# React 學習手冊

###### tags: `程式導師` `React`

1. [JSX 基本語法](https://hackmd.io/@laiyenju/jsx-basics)
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 由被呼叫的方式而定