1、
1.1、安装集成几种配置的应用create-react-app：
npm inastall --global create-react-app
安装成功后，在命令行中运行以下的命令：
create-react-app first_react_app
在Windows环境下，此时输入的命令行应该为：
.\create-react-app first_react_app
根据提示，在create-react-app命令一大段文字输出后，根据提示，输入下面的命令：
cd first_react_app
npm start
这个命令会启动一个开发模式的服务器，同时也会让你的浏览器自动打开了一个网页，指向本机地址http://localhost:3000/.
1.2、继续学习，增加一个新的react组件
react的首要思想是通过组件（component）来开发应用。所谓组件，简单说，指的是能完成某个特定功能的独立的，可重用的代码。
create-react-app所创建的应用入口是src/index.js文件，其代码为：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
这个应用所做的事情，只是渲染一个名叫App的组件，App组件在同目录下的App.js文件中定义。
接下来我们重新定义一个能够计算点击数组件，名叫ClickCounter，所以我们进行index.js文件的修改：
import React from 'react';
import ReactDOM from 'react-dom';
import ClickCounter from './ClickCounter'; //使用import导入了ClickCounter组件，代替了之前的App组件
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
接下来，在src目录下新增一个代码文件ClickCounter.js，代码如下：
import React, {Component} from 'react'; //从react库中引入React和Component,Component作为所有组件的基类，提供了很多组件共有的功能
class ClickCounter extends Component{ //这行代码，使用ES6语法创建了一个叫做ClickCounter的组件类，而其父类就是Component.
constructor(props){
super(props);
this.onClickButton=this.onClickButton.bind(this);
this.state={count:0};
}
onClickButton(){
this.setState({count:this.state.count+1});
}
render(){
return(
<div>
<button onClick={this.onClickButton}>Click Me</button>
<div>
Click Count:{this.state.count}
</div>
</div>
);
}
}
export default ClickCounter;
此时，回到之前浏览器自行打开的那个页面，你会发现之前的logo图标已经变成了一个按钮，当你点击这个按钮时，页面上就会显示你点击的次数，好吧，此时我们第一个有交互性的组件已经构建完毕，我们继续往下学习。
注：一些ES6的新的语法有可能不被一些浏览器所支持，但是在create-react-app中，这些不被支持的比如说import，已经被webpack和Babel所转化为ES5中被各大浏览器支持的语法。
1.2.1、认识JSX:
所谓JSX，就是JavaScript的语法扩展，让我们可以在JavaScript中可以编写像HTML一样的代码。render函数中，就存在着JSX代码。
深入理解JSX:
首先，在JSX中使用的”元素“不局限于HTML元素，它还可以是任何一个React组件；React判断一个元素是HTML元素还是React组件的原则就是看第一个字母是否大写，如果是大写，可以被识别，否则，则得不到我们想要得到的结果，比如之前使用的ClickCounter，如果写成clickCounter，就是无法被识别的组件。
其次，在JSX中可以通过onClick这样的方式给一个元素添加一个事件处理函数。
React组件可以把JavaScript、css、HTML的功能封装在一个文件中，实现真正的组件封装。
未完待续！！！
最近浏览
