欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react基础教程之react安装详细教程

程序员文章站 2022-08-11 10:12:21
一、react安装方式 引入方式:script标签引入 1.可以去react官网去下载,也可以直接使用 BootCDN 的 React CDN 库,地址如下:

一、react安装方式

引入方式:script标签引入

1.可以去react官网去下载,也可以直接使用 BootCDN 的 React CDN 库,地址如下:
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
以上我们引入了三个库: react.min.js 、react-dom.min.js 和 babel.min.js:
react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内 嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。 所以如果我们需要使用 JSX,则 <script> 标签的 type 属性需要设置为 text/babel。
2.实例:实例中包括了react中如何定义组件,如何添加类,注意在react每个组件中有且只有一个根节点


	
	react基础01
	<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

.first{
    		color:#185;
    	}

 

<script type="text/babel"> { // ReactDOM.render( // Hello React, // document.getElementById("example") // ); } var Hello=React.createClass({ render:function(){ return(

第一个react组件

纠结 还是去 真是纠结啊

) } }); ReactDOM.render(,document.getElementById("example")); </script>

3.组件之间的传值 props




<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

 

<script type="text/babel"> var ComponentOne=React.createClass({ render:function(){ return(

{this.props.title},{this.props.hello}

) } }); var ComponentTwo=React.createClass({ render:function(){ var hello="hello react"; return( ) } }); ReactDOM.render(,document.getElementById("example")); </script>4.react 中的事件响应



<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

 

<script type="text/babel"> var EventTest=React.createClass({ // 状态初始值 初始化 getInitialState:function(){ return{ title:"点击更改" } }, // 定义事件 btnClick:function(){ this.setState({ title:"点击了按钮" }) }, render:function(){ return(

{this.state.title}

change ) } }); ReactDOM.render(,document.getElementById("example")); </script>npm 方法安装

一键搭建方式

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start
react到此就安装好了