React 學習手冊
- JSX 基本語法
- React Components
- Component Interacting
- Lifecycle Methods
- Hooks
- Stateless Components From Stateful Components
- Advanced React
前期建置
- 設定 webpack
- 設定 babel
快速建置
分解建置步驟
步驟
npm init
,建立 package.json -> 自動產生 /node.modules 資料夾
yarn add webpack webpack-cli
,安裝 wbpack
- 建立 src 資料夾,內有 index.js 與 util.js
- 建立 webpack.config.js 檔案,並撰寫打包命令
- 撰寫 package.json 的腳本,設定開發環境與發布環境的命令
npm run start
-> 自動產生 /dist 資料夾與 bundle.js
yarn add @babel/core babel-loader @babel/preset-env
安裝 babel
- 新增 .babelrc 作為設置檔案
- webpack.config.js 撰寫載入模組的條件
yarn add react react-dom @babel/preset-react
安裝 React
- .babelrc 新增
@babel/preset-react
webpack.config.js
package.json
.babelrc
完成上述步驟後的專案檔案結構
- /src
- /dist
- /node.modules
- index.html
- webpack.config.js
- package.json
- yarn.lock
特點
01 JSX 語法
- 使用駝峰命名法
- 需使用 className 才能指定 class
- 需使用物件 style 傳入 CSS
👉[[JSX 基本語法]]
02 事件機制
02-1 監聽事件
02-2 改變狀態
- 改變狀態前,必須調用 this.setState(),在裡面寫狀態
- 若把改變狀態的 function 與物件分開寫,需要綁定 this(在 constructor 內綁定 or function 內綁定皆可)
👉this 由被呼叫的方式而定