React 開發基礎介紹

嗨各位開發者，今天有遇到奇怪的 bug 嗎？
今天筆者要用幾個問題來分享自己為什麼選擇用 React 開發這個應用。

首先當然因為這是筆者最熟悉的前端技術。
React 最大的特色之一是使用元件（Component）的來建構網頁的大小部分。

為什麼 React 要用 Component 開發？好處是？

詳情請看這篇由张云龙撰寫的前端工程文章

簡單來說，因為前端是複雜的 GUI 軟體，如果使用文章中提到的「元件化」開發，可以享有以下特色及優點：

1. 網頁裡，分割出來的每個「可見的」「可互動的」區域，都被稱呼為元件
2. 每個元件對應一個「資料夾」，元件所需的資源都集中放置在這個資料夾內，維護方便
3. 每個元件具有「獨立性」，所以元件之間可以「自由組合」而呈更複雜的元件
4. 頁面就是各種大小元件的放置空間，組合各個元件形成完整頁面。當你需要替換元件，只需要將對應的資料夾修改即可。

根據以上幾點，我們可以知道，依循元件的工程理念開發網頁，
可以享受許多維護及開發的好處。

接下來讓我們來架設 React 專案，來放置元件程式碼。

可是 React 開發環境難以架設，有什麼好辦法嗎？

React 專案架設需要導入多個函式庫及打包工具，加上搭配 jsx 語法，導致 React 的學習門檻較高。

建議的方法是先使用社群大受好評的「樣板專案」create-react-app，讓初學者可以先跳過繁複的專案設置，以受大眾接受的初始設置出發，開始學習及開發 React。

如果你使用版本 8.2 以上的 NodeJS，你可以用 npx 這個指令一鍵建立 React 專案

npx create-react-app my-app

用指令 cd my-app && npm start 你就可以建立一個會 hot reload 的開發用本地端服務器，開發體驗滿分?。

接下來讓我們從 create-react-app 專案來開始了解更多 React 吧。