Try   HackMD

React 學習手冊

tags: 程式導師 React
  1. JSX 基本語法
  2. React Components
  3. Component Interacting
  4. Lifecycle Methods
  5. Hooks
  6. Stateless Components From Stateful Components
  7. Advanced React

前期建置

  1. 設定 webpack
  2. 設定 babel

快速建置

npx create-react-app my-app
cd my-app
npm start

分解建置步驟

步驟

  1. npm init,建立 package.json -> 自動產生 /node.modules 資料夾
  2. yarn add webpack webpack-cli,安裝 wbpack
  3. 建立 src 資料夾,內有 index.js 與 util.js
  4. 建立 webpack.config.js 檔案,並撰寫打包命令
  5. 撰寫 package.json 的腳本,設定開發環境與發布環境的命令
  6. npm run start -> 自動產生 /dist 資料夾與 bundle.js
  7. yarn add @babel/core babel-loader @babel/preset-env 安裝 babel
  8. 新增 .babelrc 作為設置檔案
  9. webpack.config.js 撰寫載入模組的條件
  10. yarn add react react-dom @babel/preset-react 安裝 React
  11. .babelrc 新增 @babel/preset-react

webpack.config.js

const path = require("path")

module.exports = {
  entry: "./src/index.js",  // 設定主要入口點
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js"
  },
  module: {
    // 當看到有 .js 結尾的檔案,會使用 babel-loader 載入
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,  //排除已經處理好的 node_modules
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}

package.json

"scripts": {
    "start": "webpack --mode development",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

完成上述步驟後的專案檔案結構

  • /src
    • index.js
    • util.js
  • /dist
    • bundle.js
  • /node.modules
  • index.html
  • webpack.config.js
  • package.json
  • yarn.lock

特點

01 JSX 語法

  • 使用駝峰命名法
  • 需使用 className 才能指定 class
  • 需使用物件 style 傳入 CSS

👉[[JSX 基本語法]]

02 事件機制

02-1 監聽事件

return <h1 onClick={()=>{
	alert('Hi')
}}>{t}</h1>

02-2 改變狀態

  • 改變狀態前,必須調用 this.setState(),在裡面寫狀態
  • 若把改變狀態的 function 與物件分開寫,需要綁定 this(在 constructor 內綁定 or function 內綁定皆可)

👉this 由被呼叫的方式而定