初始化React项目

1.1  create-react-app工具

    npm install --global create-react-app   通过Npm安装

安装完成后 可执行 create-react-app  first-reract-app(目录名)

cd   first-reract-app跳转到刚才所创建的目录

输入npm start 运行项目

1.2创建一个React组件

React 的首要思想是通过组件（ Component）来开发应用。 所谓组件，简单说，指的 是能完成某个特定功能的独立的、 可重用的代码。

在src文件夹下创建ClickCounter.js

---

//import是ES6语法的导入文件模块的方式，Component是所有组件的基类，提供了很多组件共用的功能

import React,{Component} from 'react';

class ClickCounter extends 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}>点我</button>

                点击次数:{this.state.count}

            </div>

        )

    }

}

export default ClickCounter;

修改index.js代码

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import ClickCounter from './ClickCounter';

import * as serviceWorker from './serviceWorker';

ReactDOM.render(

  <React.StrictMode>

    <ClickCounter />

  </React.StrictMode>,

  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();

---

运行结果如图所示: