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

一、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到此就安装好了