1.建立一個新的React 專案

npx create-react-app first-app
cd first-app
npm start

• 開啟命令提示字元cmd，使用 npx 指令建立命稱為 first-app的 React專案

• 建立好 React 專案之後，使用cd指令進入至first-app專案

• 進入至first-app專案後，輸入npm start執行專案
  程式會在http://localhost:3000/ 自動開啟網頁瀏覽畫面

  

2.React 專案結構

• node_module ： React 專案所需的所有的模組套件都會存放在此資料夾中，是存放經由npm下載而來的外部套件原始碼存放的地方, 這些套件的版本等等訊息都記錄在package.json裡面。

• public ： 放置index.html和靜態檔案，網頁設定、描述…等。

• src ：專案中主要的檔案都會放置在此資料夾下，其中 index.js 是整個專案的程式進入點， App.js 是 React 建立專案預設的元件。另自訂Component元件資料夾中可將 UI 拆分成獨立的頁面元件，都將集中於置於此資料夾中。

• package.json ：管理套件用的的描述文件，包含用哪些套件/開發者/版本/測試指令..等，方便程式部署到不同環境時使用。

備註：可以copy package.json 檔案至別的專案，下npm install指令，即可在別的專案安裝package.json裡所有的套件。

3.index.js程式的進入點

此檔案為 React 專案啟動時的進入點，會把放在ReactDOM.render裡面的程式渲染在html檔裡面的root標籤內，一般會將App.js頁面元件放置於此進行渲染。

4.App.js專案預設的第一個頁面元件

建立專案後預設的第一個頁面元件，之後會將建構 web 頁面的UI頁面元件集中放置於此。