React實戰-如何快速建立除錯一個Demo程式
React實戰-如何快速建立除錯一個Demo程式
React是單一頁面程式，因此需要我們在建立React專案時需要做很多配置、解析等工作，嚴重影響著我們在編寫demo時的情緒和效率。
通常的方式我們需要做以下幾步(微信公眾號：react-javascript)：
1. 建立配置檔案package.json。
定義專案所需的React程式包：
{
"name": "routerdemo",
"version": "0.0.1",
"private": true,
"devDependencies": {
"react-scripts": "^0.4.0"
},
"dependencies": {
"react": "^15.3.0",
"react-dom": "^15.3.0",
"react-redux": "^4.4.5",
"react-router": "^2.6.1",
"react-router-redux": "^4.0.5",
"redux": "^3.5.2",
"redux-undo": "^1.0.0-beta9"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "./node_modules/react-scripts/config/eslint.js"
}
}
2. 定義專案檔案結構: 精簡到index.html，src/app.js，assert/bundle.js(解析後的js檔案)
3. 定義解析打包原始檔為bound.js的腳本，執行web頁面
光以上3步就讓我們非常頭疼，尤其是第三步，我們需要解析專案中js原始檔，打包成一個檔案bundle.js，還需要建立一個web應用支撐我們訪問。
4.通過React-Scripts進行除錯
幸運的是，在react相關包中，存在一個
l 在config中引入react-scripts
"devDependencies": {
"react-scripts": "~0.4.0"
},
"eslintConfig": {
"extends": "./node_modules/react-scripts/config/eslint.js"
}
l 在config中加入執行腳步
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject"
}
好了，我們以後再測試時，只需要允許npm start即可了，方便太多了。
必須要注意的是：
l html檔案必須為index.html
l 入口js檔名必須為index.js
如果不遵守上述兩點，你的解析是不成功的。
5.分析React-Scripts原始碼瞭解執行原理
採用React-scripts省去了我們太多事情，但是總還是會好奇，它到底幹了什麼，我們不能只知道使用規則，而不知原理。看看React-scripts的專案配置檔案，我們知道它只是幫我們做了我們自己編寫指令碼的工作：採用webpack進行原始碼解析，至於為什麼必須使用index.html和index.js檔名，以下兩段配置檔案說明了原因：
在React-scripts的path檔案中appHtml: resolveApp('index.html')
在React-scripts的webpack.config中：path.join(paths.appSrc, 'index')。
在明白了React-scripts的原理情況下，採用npm start命令即可除錯專案了，並且在修改原始碼時，能理解反應在執行程式裡。不再為實現個HelloWorld程式煩惱了。