使用脚手架create-react-app创建第一个应用

react只要理念就是基于组建来开发应用

使用脚手架进行创建，在当前目录下使用脚手架create-react-app 【应用名称】进行创建，完成之后cd进入目录，使用npm start启动程序

进入该页面则代表成功

index.js文件内容如下，可见其引用app组件，

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

接下来进行按照app的样式建立自己的文件或者直接在app中修改以实现自己的功能

index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import ClickCount from './ClickCount';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<ClickCount />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ClickCount.js文件，注意注意抛出的组建明层首字母需要大写，否则无法引用，注意虽然React在该文件中看似未被应用，但是不能删除，因为使用JSX范围内必须要有React，JSX就是return里面的语法，类似于html，但是并不局限于html，它可以是任意定义的一个组件，例如在index.js中，render回去的Clickcount。

另外onClick与html中的onclick不一样，onClick挂载的每个函数，都可以控制在组件之内，不会污染全局空间，这是因为其使用事件委托的方式处理，因此无论有多少个onClick，在最终DOM树上之后有一个事件处理函数，点击事件会被该函数捕捉，然后根据具体组建分配给特定函数，性能会比每个事件挂载一个事件处理函数要好，因为React会存在生命周期，unmount时会清除所有事件相关的函数，内存不会出现泄漏。

import React, {Component} from 'react'
class ClickCount extends Component{
    // 继承属性
    constructor(props){
        super(props);  // 使用super之后就可以使用this
        this.OnClickButton = this.OnClickButton.bind(this)  // 绑定this，这样可保证传入函数的this是相同的，并且可调用
        this.state = {count:0}  // 定义仓库，count的初始值是0
    }

    OnClickButton(){
        this.setState(
            {count:this.state.count+1}  // 对state里面的值进行改变时，如果单纯赋值修改，则不能渲染到页面中，react提供一个方法，setState。一旦state里面的值发生修改，则会渲染页面
        )
    }
    // 返回定义的定义的功能，类似于django中的render方法，提交自定义功能，将给调用者，最终react渲染的指定位置
    render(){
        // return跟着的内容为最终返回的内容
        return(
            <div>
                <button onClick={this.OnClickButton}>点我</button>
                <p>clicl count: {this.state.count}</p>
            </div>
        )
    };
}
export default ClickCount

最终效果如下：