安裝create-react-app

執行yarn start

寫配置文件(launch.json)

eg:

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

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

  常見用法:

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

  export default class MyText extends Component {

  }
  ```
• 在MyText.js同級目錄下的一個文件中導入該組件
  js //說明: //路徑: './'表示同級目錄下的文件 //省略后綴: 后綴為.js的可以省略不寫 import MyText from './MyText'

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

  }

  export function func2() {

  }

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

  function func1() {

  }

  function func2() {

  }

  export default {
  func1,
  func2
  }
  ```

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

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

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

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

  func1();
  ```

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

  幾個特性:
• 無this
• 無arguments
• 不可作為構造函數

• 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);

  });

  ```

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

eg:

特殊的屬性寫法

eg:

注意

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

React element是一個簡單的對象(原文: a plain Object), 由React.createElement()方法得到, 并且所有的React element構成React DOM.

使用ReactDOM.render()方法可以在DOM中注入React DOM.
純React的項目一般來說只需要一個root DOM.而在一個已有的項目中, 你可以提供多個dom節點, 作為注入React DOM的入口.