1.React 是什么

貼上官網(wǎng)的說(shuō)明：A JavaScript library for building user interfaces

一般學(xué)習(xí)新框架可以從官網(wǎng)上找到文檔開(kāi)始看起。
在此貼上react官網(wǎng)鏈接 https://reactjs.org/

2.創(chuàng)建React項(xiàng)目

使用官方腳手架創(chuàng)建一個(gè)項(xiàng)目

• 1.首先看環(huán)境有沒(méi)有安裝好
  node -v
  npm -v
• 2.全局安裝react命令
  npm install -g create-react-app
• 3.創(chuàng)建項(xiàng)目
  create-react-app [項(xiàng)目名稱]
• 4.運(yùn)行項(xiàng)目
  npm start/yarn start

3.React文件結(jié)構(gòu)和JSX語(yǔ)法

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

4.React組件作用

• 組件復(fù)用，提高開(kāi)發(fā)速度

5.React組件通訊（屬性傳值）

• 1.動(dòng)態(tài)的值渲染通過(guò)一個(gè)大括號(hào)的形式

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

• 2.定義函數(shù)通過(guò)參數(shù)的方式去傳值

•       const Person = props => {
          // return <p>web前端組,有（XXX）人</p>;
          return (
            <p>
              {props.name},有{props.count}人
            </p>
          );
        };
  
  
            <Person name="web前端組" count="30" />
        定義一個(gè)props的形參去接收Person標(biāo)簽中傳遞過(guò)來(lái)的實(shí)參name，count。 在組件內(nèi)部接收并賦值
  

• 3.獲取雙標(biāo)簽中的內(nèi)容

    <Person name="Java組" count="10">人間處處是真愛(ài)</Person>
  

  我們要拿到雙標(biāo)簽的的內(nèi)容可以通過(guò)children方法獲取

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

6.React-state狀態(tài)使用

• 1.state和props不同props是用來(lái)接收這個(gè)值，為state是用來(lái)改變這個(gè)值的狀態(tài)
  類似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"  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">
                  人間處處是真愛(ài)
                </Person>
              </div>
            );
          }
        }
  

• 2.修改state里的值

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

7.React屬性傳值（傳事件）

• 1.函數(shù)傳參

    <button onClick={() => this.changeName('安卓')}>更改狀態(tài)值</button> // 通過(guò)箭頭函數(shù)的方式
  
    <button onClick={this.changeName.bind(this, '安卓')}>更改狀態(tài)值</button> // 通過(guò)bind
  

• 2.屬性傳值

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

8.React雙向數(shù)據(jù)綁定

          <input type="text" onChange={props.changed} defaultValue={props.name} />
            在input標(biāo)簽上綁定一個(gè)onChange方法 并接收props傳遞過(guò)來(lái)的changed上綁定的事件

• APP.js person標(biāo)簽中定義changed方法并把定義的事件執(zhí)行

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