React 回憶錄

Create a new app

以前記得如果要開始一個新的專案，需要自己寫gulp, Webpack, Babel.........

等到真正開始寫React的時候，可能已經是一個月之後的事情了。

但是現在官方有提供了一個 Project create React APP的專案

Create React APP

Github

Install

相依性套件只有一個react-scripts

react-scripts

這個套件提供了

1. 四個指令 start, build, test, test.watch

start: 負責啟動一個開發者的測試 Server

build: 將React bundle為一個js

test: 使用jest測試你的React

test.watch: 在開發的時候隨時檢查你的程式是否符合測試

2. webpack中已經包含了style-loader，所以可以將CSS模組化包在各個的元件中

Create react app

基本上已經將基本的骨架完成

並且有相當完善的一個文件解說

但是如果要使用Sass, Less, Css module目前尚未Support

這些都是未來的Feature

當然若是有興趣可以研究然後發PR

結構

my-app/
README.md
node_modules/
package.json
.gitignore
public/
  favicon.ico
  index.html
src/
  App.css
  App.js
  App.test.js
  index.css
  index.js
  logo.svg

package.json

{
  "name": "hello-world",
  "dependencies": {
    "react": "^15.2.1",
    "react-dom": "^15.2.1"
  },
  "devDependencies": {
    "react-scripts": "0.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject"
  }
}

src 就是你所有的React 檔案

• public/index.html 是這個頁面的Template

• src/index.js 則是Javascript的進入點

• test 測試的程式碼

基本上建議這三個檔案不要移動與改名

否則就會需要修改到他的react-scripts

這樣就失去了我們使用這個骨架的意義了

而其他檔案則可以依據各自需要調整結構

算是自由度相當高的一個骨架

NPM Scripts

在Package.json中也有提供幾個已經可以使用的指令

npm start

啟動一個測試的Server

URL: http://localhost:3000

npm test

執行一次測試程式，檢查程式是否有依照我們的SPEC規劃執行

Next

** React - Review Day02 - Redux - PART1 **

光建立Redux可能就會消耗掉好幾篇的扣打了啊