环境要求:Node >= 8.10 和 npm >= 5.6

这是第一篇:包含基本项目的创建组件间传值和向上抽取逻辑

1.创建初始项目，并启动

npx create-react-app my-app
cd my-app
npm start

会自动弹出http://localhost:3000/页面，第一个应用创建成功，恭喜大佬

2.删除src目录下的文件，并新建index.css和index.js,并拷入如下代码，点击获取

3.重新启动即可看到井字图案，npm start

这就是今天我们的主角

什么是react

一个JavaScript库，写一些代码片段就可以拼出复杂的UI界面，这些片段叫做组件

react的组件

//1.ShoppingList 称为组件类
//2.props 接收参数使用
//3.render 的返回值 就是展示在页面上的内容
//4.这种类html的标签，叫做JSX
//5.可以随意使用js语法，只需{}包裹即可
//6.以后使用只需 <ShoppingList />即可
class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
        </ul>
      </div>
    );
  }
}

以上JSX语法的原生表示如下，超级丑，你不会喜欢的

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

开启案例

这个井字案例在index.js中有三个组件

Square (包含一个button)
Board（包含9个 Square）
Game（包含1个Board）

组件间如何传参

将 Board 中的数据，传递到Square组件中

在 Board 组件的 renderSquare 方法中,代码修改如下

//手敲 别复制
class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }
}

修改 Square 组件中的 render 方法，把 {/* TODO */} 替换为 {this.props.value}

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

以上，通过传参到 Square的 render()中的{this.props.value}中,传参后，效果如下

添加交互功能

点击后，在一个框中增加一个 X

修改Square 如下,点击后单个框会写入X

class Square extends React.Component {
    
    constructor(props){
        //super固定用法
        super(props);
        //声明state 存储'X
        this.state={value:null}
    }

  render() {
    return (
        //点击后，设置state的值为X
      <button className="square" onClick={()=>{this.setState({value:'X'})}}>
        {this.state.value}
      </button>
    );
  }
}

组件间传值

把控制权移交到外层的Board中

class Board extends React.Component {

constructor(props){
    super(props);
    // 用来储存每个 框中的X
    // [
    //     'O', null, 'X',
    //     'X', 'X', 'O',
    //     'O', null, null,
    //  ] 
    // state保存在当前Board中
    this.state={squares:Array(9).fill(null)};
}

//通过value 传入state
//传入onClick 执行的方法
  renderSquare(i) {
    return <Square 
    value={this.state.squares[i]}
    onClick={()=>this.handleClick(i)}
    />;
  }

  handleClick(i){
      const squares =this.state.squares.slice();
      squares[i]='X';
      this.setState({squares:squares});
  }
}

删除掉 Square 中的state逻辑，接收Board的逻辑

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={()=>{this.props.onClick()}}>
        {this.props.value}
      </button>
    );
  }
}

React官方文档学习笔记（一）