ReactJS 環境佈署

有完善的開發環境，開發起來才順手之起手式

ReactJS 部署開發環境

安裝開發套件懶人法

可先安裝create-react-app套件在 global 環境中，使用終端機指令：sudo npm install -g create-react-app，可以先試試把sudo拿掉，看是否有權限安裝，不行再加。

安裝了這個套件，在要開新專案時使用，會自動佈署所需要的檔案與套件，整個檔案約 296MB。先以cd前往要安裝的位置。
create-react-app [專案檔案夾名稱ex.test]即會在所在的路徑增加一個名為 [專案檔案夾名稱 ex.test] 的 test 檔案夾。

顯示以下訊息表示安裝完成

[fsevents] Success: "/Users/tsuifei/Apprendre/JS/ReactJS/test/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
+ react@16.5.2
+ react-scripts@2.0.5
+ react-dom@16.5.2
added 1746 packages from 670 contributors and audited 31992 packages in 147.652s
found 0 vulnerabilities

Initialized a git repository.

Success! Created test at /Users/tsuifei/Apprendre/JS/ReactJS/test
Inside that directory, you can run several commands:

  npm start // 開啟開發伺服器，並會自動啟動預設瀏覽器，並以port 3000開啟顯示結果。
    Starts the development server. 由port 3000開啟至瀏覽器

  npm run build // 生成可用的網頁
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

進入專案檔案夾

安裝完後先進去專案，以範例來說專案名稱為test：
cd test
啟動並開始開發
npm start

Happy hacking!

create-react-app 所自動產生的檔案說明

.
├── README.md
├── package.json
├── public –> 編譯後產生的前端檔
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src –> 開發檔案
│ ├── App.css
│ ├── App.js 組件
│ ├── App.test.js
│ ├── index.css
│ ├── index.js 入口
│ ├── logo.svg
│ └── registerServiceWorker.js
└── yarn.lock

安裝完畢後執行 npm start 指令，可直接在瀏覽器上看編譯結果，
跳出編譯器則是control + c

==指令==
利用 create-react-app 套件, 快速產生 webpack 的設定檔
npm install --global create-react-app

重點[使用方法]：

新增 react 開發模板
create-react-app [YOUR_APP_NAME]
啟動 server
npm start 會自動在瀏覽器開啟 localhost:3000
src 資料夾即 react 的模板
用 webpack build 你的網頁，執行之後在build裡的檔案即是可發佈的檔案。
npm run build