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} />

React 入门