1.1 初始化一个React项目

1.1.1 create-react-app工具

快速开发React应用的工具create-react-app

npm install --global create-react-app

creat-react-app first_react_app
cd first_react_app
npm start

浏览器会打开一个个网页：http://localhost:3000/ 恭喜你，你的第一个React应用诞生了！

1.2 增加一个新的React组件

基于组件的应用开发是广泛使用的软件开发模式，用分而治之的方法，把一个大的应用分解成若干个小的组件。每个组件只关注某个小范围的特定功能，但是把组件组合起来，就能构成一个功能庞大的应用.

我们要定义一新的能够计算点击数组件，名叫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(<ClickCounter />, 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();

在src目录下增加啊啊一个新的代码文件ClickCount.js

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}>Click me</button>
        <div>
          Click Count: {this.state.count}
        </div>
      </div>
    )
  }
}
export default ClickCounter

深入浅出React和Redux--学习笔记一

1.1 初始化一个React项目

1.1.1 create-react-app工具

1.2 增加一个新的React组件