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 web前端组,有（XXX）人;
    return web前端组,有{Math.round(Math.random() * 30)}人;
  };
  export default Person;

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

      const Person = props => {
        // return web前端组,有（XXX）人;
        return (
          
            {props.name},有{props.count}人
          
        );
      };


          
      定义一个props的形参去接收Person标签中传递过来的实参name，count。 在组件内部接收并赋值

3.获取双标签中的内容

  人间处处是真爱

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

  const Person = props => {
    return (
      
        
          {props.name},有{props.count}人
        
        {props.children}
      
    );
  };
  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 (
            
              {/* 
                
                
                  Edit src/App.js and save to reload.
                
                
                  Learn React
                
               */}
              Hello World
              
              
              
              
                人间处处是真爱
              
            
          );
        }
      }

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.函数传参

   // 通过箭头函数的方式

   // 通过bind

2.属性传值

  


          然后子组件通过props的方式去接收
         
              {props.name},有{props.count}人

8.React双向数据绑定

          
            在input标签上绑定一个onChange方法 并接收props传递过来的changed上绑定的事件

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

React 入门