React準備

React 準備

初始化項目

1. 安裝create-react-app

   打開終端執行: npm i create-react-app -g
2. 執行create-react-app AwesomeProject

3. 執行yarn start

在vscode中添加chrome調試工具

1. 在vscode的擴展中搜索並安裝Debugger for Chrome
2. 在調試窗口(ctrl+shift+d)配置, 選擇"添加配置"

3. 寫配置文件(launch.json)

   eg:

   {
     "type": "chrome",
     "request": "launch",
     "name": "Chrome",
     "url": "http://localhost:3000",
     "webRoot": "${workspaceRoot}/src",
     "userDataDir": "${workspaceRoot}/.vscode/chrome",
     "sourceMapPathOverrides": {
       "webpack:///src/*": "${webRoot}/*"
     }
   }

4. 在調試窗口點擊,開始調試.(須要先在終端執行yarn start)

知識儲備

1. ES6語法

   • 導入其餘組件/對象/方法import與暴露組件/對象/方法export

     常見用法:

     1. 從MyText.js中暴露一個組件
        ```js
        import React, { Component } from 'react'

        export default class MyText extends Component {

        }
        ```
     2. 在MyText.js同級目錄下的一個文件中導入該組件
        js //說明: //路徑: './'表示同級目錄下的文件 //省略後綴: 後綴爲.js的能夠省略不寫 import MyText from './MyText'

     3. 從util.js工具方法中暴露一個對象
        ```js
        //形式1
        export function func1() {

        }

        export function func2() {

        }

        //形式2 效果等同於 形式1

        function func1() {

        }

        function func2() {

        }

        export default {
        func1,
        func2
        }
        ```

     4. 從util.js中導入對象或指定方法
        ```js

        //導入整個對象
        import util from './../util'

        util.func1();
        util.func2();

        //導入指定方法
        import {func1} from './../util'

        func1();
        ```

   • 箭頭函數(參數) => {函數體}

     幾個特性:
     1. 無this
     2. 無arguments
     3. 不可做爲構造函數

   • Promise

     主要用於美化異步操做代碼, 使其可以有同步代碼的閱讀體驗, 避免出現地獄回調.

     有三種狀態:

     1. padding, 等待結果
     2. reject, 拒絕/錯誤
     3. resolve, 成功

     eg:
     ```js
     let func1 = () => {
     let p = new Promise((resolve, reject) => {
     setTimeout(() => {
     if (true) {
     resolve('success');
     } else {
     reject();
     }
     }, 500);
     });
     return p;
     };
     let func2 = () => {
     let p = new Promise((resolve, reject) => {
     setTimeout(() => {
     if (false) {
     resolve();
     } else {
     reject('error');
     }
     }, 500);
     });
     return p;
     };

     func
     .then((data) => {

     //500ms後執行
     console.log(data);
     return func2();

     })
     .then(() => {

     //未執行
     console.log('1');

     }, (errorData) => {
     console.log(errorData);
     })
     .catch((errMsg) => {

     //統一處理error
     console.error(errMsg);

     });

     ```
2. JSX語法

   1. 內部使用插值表達式, (關於表達式和語句的區別)

      eg:

      function greeting(text) {
        return <h1>{ text }</h1>
      }
      
      //單括號內部使用js表達式,例如:
      /*
      { number + 1 }
      { ok ? 'YES' : 'NO' }
      { message.split('').reverse().join('') }
      */

   2. 它自己也是表達式的一種, 和JavaScript語句一塊兒使用便可.

   3. 特殊的屬性寫法

      eg:

      1. class => className

      const el1 = (
        <div className="yourName">
          <h1>hello</h1>
          <b>world</b>
        </div>
      );

      1. src="example.jpg" => src={yourPath}, typeof yourPath is String

      const yourPath = 'example.jpg';
      const el2 = {
        <img src={yourPath} />
      };
      
      //or
      const el3 = {
        <img src="example.jpg" /> //傳統html中屬性的寫法
      };
      
      //error
      const el4 = {
        <img src="yourPath" />  //路徑爲yourPath, 而不是example.jpg
      };

   4. 注意

      在JavaScript語句中直接套用html標籤或者自定義組件等同於使用React.createElement()方法, 固然這須要使用babel對其進行編譯.

3. DOM element 與 React element
   1. DOM element爲傳統的html標籤.

   2. React element是一個簡單的對象(原文: a plain Object), 由React.createElement()方法獲得, 而且全部的React element構成React DOM.

      eg:
      js const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );

   3. 使用ReactDOM.render()方法能夠在DOM中注入React DOM.
      純React的項目通常來講只須要一個root DOM.而在一個已有的項目中, 你能夠提供多個dom節點, 做爲注入React DOM的入口.

擴展

create-react-app默認支持的方法有:

• "..."對象展開符

  eg:

  let obj1 = {
    name: 'zgatry',
    address: '杭州',
    age: 18
  };
  let obj2 = {
    ...obj1,
    age: 23
  };
  console.log(obj2);
  /*
  {
    name: 'zgatry',
    address: '杭州',
    age: 23
  }
  */

• Object.assign()方法