什麼是 React
雖然現在提到 React 都會說它是前端三大框架之一，不過嚴格來說 React 並不是框架，React 是一個 JavaScript 函式庫，主要用來開發使用者介面，也就是只負責 View 的部分，React 是由 Meta(Facebook) 開發並開源。
為什麼要使用 React
React 有以下特色：
- Virtual DOM：React 會先將資料轉換成 Virtual DOM，再透過 Virtual DOM 來操作真實的 DOM，這樣可以避免直接操作 DOM 所帶來的效能問題。
- Component：React 將 UI 分割成一個個的 Component，每個 Component 都有自己的狀態，並且可以透過 props 傳遞資料。
- 單向資料流：React 的資料流是單向的，資料只能從上層元件傳到下層元件，這樣可以避免資料流混亂的問題。
- JSX：React 使用 JSX 語法，可以在 JavaScript 中撰寫 HTML，讓開發者可以在同一個檔案中撰寫 HTML 與 JavaScript。
- 生態系：React 有龐大的生態系，有許多第三方套件可以使用。
- 開發工具：React 有許多開發工具可以使用，例如：React Developer Tools、Redux DevTools 等等。
- 社群：React 有龐大的社群，有許多開發者可以交流，並且有許多開發者維護的第三方套件可以使用。
環境準備
要使用 React 來開發網頁非常簡單，只需要安裝 Node.js 就可以了，如果還沒有安裝 Node.js 的話，可以參考 Node.js 官網。
建立新專案
按照 React 官網 最新的文件提到，如果要建立一個新專案，建議使用目前社群中最多人使用的 React 框架來開發，例如 Next.js。
官方建議選擇框架開始，是因為現代專案一些標準需求，框架就幫你準備好並且最佳化，而不用隨著時間進展一直加入相關的套件來讓自己的專案肥大化。當然你也可以在沒有框架的情況下使用 React，如果只是想要簡單學習 React 的話，那麼可以使用 Vite 來建立專案。
由於本篇文章主要會介紹 React 的基礎，所以會使用 Vite 來建立專案，Vite 是一個由 Vue.js 團隊開發的前端開發工具，可以快速建立專案，並且支援 React、Vue.js、Svelte 等等。
在終端機輸入以下指令，使用 Vite 建立一個新專案：
$ pnpm create vite react-app --template react
這裡使用 pnpm 來建立，也可以替換成 yarn 或是 npm，建立完成後，要進入專案資料夾並且安裝相關套件：
$ cd react-app
$ pnpm i
安裝完成後，現在的專案結構會是這樣：
react-app
├── node_modules
├── public
├── src
│ ├── assets
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── .gitignore
├── index.html
├── package.json
├── pnpm-lock.yaml
└── vite.config.js
大概介紹一下比較重要的部分：
src：放置專案的程式碼，這是主要開發的部分，main.jsx是進入點，App.jsx是主要的元件。index.html: 專案的進入點，會載入main.js並且渲染到#app的元素中。
最後就可以啟動開發伺服器：
$ pnpm dev
解析前端畫面如何組成
在瀏覽器打開終端機指示的 URL 就可以看到專案的畫面：
現在這個畫面主要都在 App.jsx 上可以看到對應的程式碼：
App.jsx 是一個 React 元件，這個元件會回傳一個 JSX，而 JSX 則是一種語法糖，可以在 JavaScript 中撰寫 HTML。
App.jsx 會透過前面提到的，會從進入點的 main.jsx 載入：
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
main.jsx 會載入 App.jsx 並且透過 ReactDOM 渲染到 index.html 的 #root 的元素中。
React 的狀態
現在可以在網頁畫面上看到有一個 count is 0 的按鈕，每當點擊的時候，數字都會一直往上加，這個數字就是 React 的狀態（State），而在 React 中，狀態是一個非常核心的概念。它允許我們儲存並且管理元件的資料，並且可以在狀態改變的時候，重新渲染元件。
而在 React 中，狀態是不可變的，也就是說，我們不能直接改變狀態，在現代的 React，我們可以透過 Hooks 來修改狀態，這樣才能讓 React 知道狀態改變了，並且重新渲染元件。
以上就是 React 的基本介紹，下一篇文章會介紹怎麼使用 React 的 Hooks 來串接 API 並實作一個 Todo List。如果想要先了解更多的話，可以參考React 全攻略 - 入門到進階
的課程。