基於CRA，使用Redux、Router、Sass等快速搭建純前端React項目

本項目基於Create React App
倉庫地址：https://github.com/GzhiYi/react-onestep

克隆

git clone git@github.com:GzhiYi/react-onestep.git
cd react-onestep
yarn

可選npm包管理安裝packagenpm install
若是不想要提交歷史，能夠克隆後手動刪除.git文件夾後再初始化倉庫。

分支

暫無

內建命令

具有Create React App命令，但通過彈出原始隱藏配置後，npm run eject或者yarn run eject不可用。

npm start 或 yarn start

運行開發模式，在運行前會編譯scss爲css文件，運行後打開http://localhost:3000便可看到項目內容。

npm test 或 yarn test

運行測試，未基於原項目再次補充測試用例等代碼。

npm run build 或 yarn run build

運行生產模式打包項目用於部署。生產模式將經過webpack壓縮代碼，生成的文件名附帶哈希值。

項目額外包含內容

• 項目預留兩個小栗子，便於瞭解React狀態管理和路由的知識。
• 生成vscode調試文件，能夠安裝擴展Debugger for Chrome調試程序。可自行修改launch.json以符合你的要求。
• 支持sass。運行開發模式將自動編譯爲對於的css文件。組件內須要手動引入對應生成的css文件。若在新文件夾內新建scss文件，務必在.gitignore內增長排除，保持線上倉庫整潔。
• 使用normalize.css。
• flow靜態類型檢查，寫代碼不至於那麼多bug。查看文檔瞭解用法。
• 引入react-redux、react-router-dom、redux-thunk等，便於搭建大型應用。
• 提供redux-logger，可在console內看到狀態，方便調試控制。
• 使用axios請求接口。
• 分離模塊，對項目結構進行控制，能夠有序的管理組件和state。
• 不間斷尋找更優方案優化項目。
• ...

主要模塊文件夾說明

1. config webpack配置文件以及jest配置文件等。如重點關注視圖層開發，可不用過多關注相關配置。
2. script 命令入口處，能夠調整build、start、test命令相關的配置。
3. src/modules 分佈actions、reducers以及constants.js，用於處理數據請求、狀態數據等相關操做。
4. src/settings 配置http實例、路由設置以及狀態管理的配置文件。
5. src/views 視圖層、組件分佈。

其餘

若是隻是開發一個簡單的應用，能夠直接用CRA建立一個。而對於redux這樣的狀態管理，若是應用狀態少，大可不須要使用，你徹底能夠使用React自己的state處理組件的狀態。這個項目適合構建較爲複雜的應用，適合多人分工構建。

再有，當前master分支只有搭建好的項目結構，能夠隨時經過npm引入其餘須要的package。因爲項目剛搭建不久，能夠用於我的網站或者稍微複雜的頁面，後續不斷提高項目穩定性和易用性，爭取能開箱即用，快速搭建須要的頁面內容。

有更好的實踐或者方案，歡迎留言討論PR。