前端開發Day 2 ：建立React專案

MacOS+Create React App V2

作業系統：MacOS

【開發環境】

• Node.js
• NVM
• VSCode

【名詞介紹】

#CRA（Create React App V2）

Create React App，簡稱CRA，是一個可以簡單建立開發的React樣版工具 ，可以快速建立一個開發React用的專案樣版。2018年10月V2第二版正式發布，在功能上做了升級及支援更多功能，主要變更為：

• 更多的 CSS 工具支援： Sass、CSS Modules
• 更新的開發工具： Babel 7、webpack 4、Jest 23

最重要且大家最在意的變革不外乎就是加上 Sass、CSS Modules這一類的CSS開發工具啦！

CRA不處理後端的邏輯或資料庫，但可以搭配自己想用的後端工具使用。CRA最棒的地方就是不需要安裝或設定Webpack和Babel之類的工具，它會預設並隱藏，可以省不少工。

【開始建立專案】

在CRA之前，請確認Nodejs和npm的使用版本：Node >= 6 、npm >= 5.2，Node.js及npm安裝教學請參考此篇。

進入主題

打開terminal，前往要建立專案的資料夾底下，並輸入以下指令建立專案。（npx 無誤，這是npm 5.2+引入的一條指令）

npx create-react-app react-test

專案建立完成，會產生以下的目錄結構

目錄結構

移動到建立的專案底下

cd react-test

輸入以下指令，在開發模式下執行app

npm start

若確定要正式deploy，輸入以下指令

npm run build

再打開以下位址

http://localhost:3000

一個最基本的React App就完成啦！

【參考資料】

1. https://reactjs.org/docs/create-a-new-react-app.html#create-react-app
2. https://reactjs.org/blog/2018/10/01/create-react-app-v2.html