React開發入門：以開發Todo List為例
阿新 • • 發佈：2021-03-03
[TOC]
## 概述
起因是，為了做畢設，順便學點前端，我打算學習React。
[MDN](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started)通過一個Todo List App的製作，教導React的知識點。
這是我在MDN學習React的總結，總結出了一些React開發的基本特性，加上MDN上這個教程的簡體中文還沒翻譯過來，我的總結就更有意義了。
我的成品放在了[Github](https://github.com/iltonmi/mdn-front-end-dev-practice/tree/main/moz-todo-react)。
## React基本概念
### JSX是什麼？
JSX語法，是長得很像HTML的JavaScript程式碼，簡稱：JavaScript語法的類HTML擴充套件（後面會介紹，它和HTML的區別）
```javascript
const header = (
);
```
關於它的一些原理：瀏覽器是無法理解JSX的，JSX語法會在編譯的時候，被轉換：
```javascript
const header = React.createElement("header", null,
React.createElement("h1", null, "Mozilla Developer Network")
);
```
### 設定React APP
#### 初始化APP
```shell
npx create-react-app moz-todo-react
```
#### 應用結構
```shell
moz-todo-react
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
```
* src是原始碼
* public包含了在開發APP過程中，瀏覽器需要讀取的檔案；`index.html`是最重要的檔案，React會將src中的原始碼注入這個檔案，是的瀏覽器能夠執行原始碼；其中有個\