這一篇我會整理幾個常見的 React 框架以及他們的優缺點，另外會以 create-react-app 為範例紀錄安裝的步驟，並簡易介紹資料夾結構。

create-react-app

create-react-app 是 React 官方提供的 React 安裝方法，有以下的一些特性：
優點：

• 快速生成 React 項目、構建及打包都方便快速
• 支援使用 TypeScript
• 支援多種 CSS 預處理器及框架
• 官方維護
  缺點：
• 不支援服務端渲染
• 不支援 Webpack 拓展
• 不支援修飾器（Decorator）等常用的 ES6 語法

Next.JS

Next.JS 是一個輕量的服務端渲染應用框架，有以下的一些特性：
優點：

• 輕量、速度快
• 支援服務端渲染
• 自動化路由
  缺點：
• 約束性較強
• 路由必須按照規則書寫

Gatsby

Gatsby 是一個用於快速構建靜態網站的 React 框架，簡單易上手、並且支持服務端渲染，有以下的一些特性：
優點：

• 可以快速生成靜態網站
• 支援服務端渲染
• 支援 graphql
• 基於插件的完善的生態系統
  缺點：
• 偏向於靜態站點，對於複雜應用較為吃力

UmiJS

UmiJS 是插件化的企業級前端應用框架，有以下的一些特性：
優點：

• 集成了路由、狀態管理器、快速構建等功能、是一個完整的框架
• 支援區塊的開發方式
• 完善的插件系統
• 配合 ant design pro，可快速構建管理後台
  缺點：
• 不支援服務端渲染

使用 create-react-app 搭載項目

在課程中有分別教到 create-react-app、Next 及 Gatsby 的安裝方式，這篇文章中，我們先挑選官方的安裝方式來做範例。
首先我們間創建一個放置專案的資料夾

我們可以將資料夾拉到 VsCode 中開啟，然後用 VsCode 的終端機輸入安裝指令

npx create-react-app my-app

安裝完畢後用 cd fileName 指令移動到專案內，輸入 yarn start 或 npm start
如果有成功，終端機應該會出現這樣的畫面

同時也會在 http://localhost:3000/ 自動開啟 create-react-app 預設的頁面

目錄結構

package.json: npm 的配置文件
public: 有一個 index.html 是模板，favicon.ico 和 manifest.json 是跟預設配置及 icon 有關。
src: 開發目錄，大部分檔案會放在這個資料夾，裡面有一個 index.js 會接受頂層組建，並配置到 public 的 index.html 裡。

優化目錄結構

一般主要是在 src 裡面進行開發，首先在 src 中創建以下資料夾

• pages 資料夾來存放元件
• components 資料夾用來存放共用元件
• assets 存放靜態資源（圖片之類的）
• utils 存放工具用
  

接著我們可以整理一下 src 內原本的檔案，只要留下 index.js 就好，其他的檔案可放到對應的資料夾

• App.js, APP.css, App.test.js 放置到 pages 資料夾，logo.svg 放置到 assets 資料夾，並修改檔案內原本的路徑
  全部整理完之後的結構應該如下圖
  
  另外我們可以在 index.css 中配置全域的 css，這邊我是使用 reset css

打包專案

當我們開發完專案後，通常會進行打包工作，指令為 yarn build 或 npm build，完成後會多出一個 build 資料夾，裡面就是打包後的代碼，只要上傳到伺服器上面部署即可。

小結

這一篇主要是整理 React 常見的框架，另外也整理 create-react-app 的安裝方式及資料夾結構，下一篇開始會整理一些我個人不熟悉但 React 中常用的 ES6 語法。