1.React 是什么

贴上官网的说明：A JavaScript library for building user interfaces

一般学习新框架可以从官网上找到文档开始看起。
在此贴上react官网链接 https://reactjs.org/

2.创建React项目

使用官方脚手架创建一个项目

• 1.首先看环境有没有安装好
  node -v
  npm -v
• 2.全局安装react命令
  npm install -g create-react-app
• 3.创建项目
  create-react-app [项目名称]
• 4.运行项目
  npm start/yarn start

3.React文件结构和JSX语法

    package.json->index.html->index.js->APP.js

4.React组件作用

• 组件复用，提高开发速度

5.React组件通讯（属性传值）

• 1.动态的值渲染通过一个大括号的形式

    const Person = () => {
      // return <p>web前端组,有（XXX）人</p>;
      return <p>web前端组,有{Math.round(Math.random() * 30)}人</p>;
    };
    export default Person;
  

• 2.定义函数通过参数的方式去传值

•       const Person = props => {
          // return <p>web前端组,有（XXX）人</p>;
          return (
            <p>
              {props.name},有{props.count}人
            </p>
          );
        };
  
  
            <Person name="web前端组" count="30" />
        定义一个props的形参去接收Person标签中传递过来的实参name，count。 在组件内部接收并赋值
  

• 3.获取双标签中的内容

    <Person name="Java组" count="10">人间处处是真爱</Person>
  

  我们要拿到双标签的的内容可以通过children方法获取

    const Person = props => {
      return (
        <div>
          <p>
            {props.name},有{props.count}人
          </p>
          <p>{props.children}</p>
        </div>
      );
    };
    export default Person;
  

6.React-state状态使用

• 1.state和props不同props是用来接收这个值，为state是用来改变这个值的状态
  类似Vue中的data

        class App extends Component {
          state = {
            person: [{ name: 'Android', count: 10 }, { name: 'DBA', count: 1 }, { name: 'Test', count: 40 }],
            otherState: 'anything'
          };
          render() {
            return (
              <div className="App">
                {/* <header className="App-header">
                  <img src={logo} className="App-logo" alt="logo" />
                  <p>
                    Edit <code>src/App.js</code> and save to reload.
                  </p>
                  <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
                    Learn React
                  </a>
                </header> */}
                <h1>Hello World</h1>
                <Person name={this.state.person[0].name} count="30" />
                <Person name="ios组" count="20" />
                <Person name="PHP组" count="10" />
                <Person name="Java组" count="10">
                  人间处处是真爱
                </Person>
              </div>
            );
          }
        }
  

• 2.修改state里的值

         changeName = () => {
            this.state.person[0].name = '123';
          };
  
  
  
        Do not mutate state directly. Use setState() 
        不要直接的修改值 
  
        要用React提供的这个方法 setState() :
  
      this.setState({
          person: [{ name: 'Android5', count: 1000000 }, { name: 'DBA', count: 1 }, { name: 'Test', count: 40 }]
        });
  

7.React属性传值（传事件）

• 1.函数传参

    <button onClick={() => this.changeName('安卓')}>更改状态值</button> // 通过箭头函数的方式
  
    <button onClick={this.changeName.bind(this, '安卓')}>更改状态值</button> // 通过bind
  

• 2.属性传值

    <Person myClick={this.changeName.bind(this, 'IOS')} name="ios组" count="20" />
  
  
            然后子组件通过props的方式去接收
           <p onClick={props.myClick}>
                {props.name},有{props.count}人
              </p>
  

8.React双向数据绑定

          <input type="text" onChange={props.changed} defaultValue={props.name} />
            在input标签上绑定一个onChange方法 并接收props传递过来的changed上绑定的事件

• APP.js person标签中定义changed方法并把定义的事件执行

              <Person changed={this.nameChangeHandle} name={this.state.person[0].name} count={this.state.person[0].count} />