在文件夾目錄中打開終端下載
cnpm install create-react-app -g ????????全局安裝
create-react-app myapp? ? ? ? ?創(chuàng)建項目? ??
cd myapp? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?進(jìn)入項目
npm start? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 啟動項目?
npm run eject? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 暴露
Create React App腳手架官網(wǎng):https://create-react-app.dev/
注:全局安裝失敗可嘗試管理員身份打開終端進(jìn)行安裝
暴露失敗在項目的根目錄下執(zhí)行以下命令:
git init
git add --all
git commit -m 'first'
npm run eject
整合目錄
在src中刪除index.js和App.js以外的其他文件
創(chuàng)建基本文件夾:例如---assets
在assets創(chuàng)建css并修改全局樣式路徑
在scripts文件夾中start.js文件中可改端口
改src文件夾中index.js為main.js需要在config文件夾中paths.js文件第58行修改路徑后
改打包paths.js文件第55行修改為dist
改配置@在config文件夾中webpack.config.js文件中第291行的alias中添加一條? '@':path.resolve(__dirname,'../src')
修改之后重啟項目 npm start
用sass后綴報錯
cnmp install node-sass -D? ? ? ? 安裝node-sass?????
antd
cnpm install antd -S
在App.js文件中引入antd樣式? import 'antd/dist/antd.css'
antd文檔:https://ant-design.gitee.io/index-cn
路由
cnpm install react-router-dom -S? ??
cnpm install?@loadable/component -S? ? 代碼分割?
使用代碼分割引入import loadable from "@loadable/component"
路由文檔:https://reactrouter.com/web/guides/quick-start?
mobx
cnpm install mobx -S? ??
cnpm install mobx-react -S? ??
mobxGitHup倉庫:https://www.npmjs.com/package/mobx
mobx-reactGitHup倉庫:https://www.npmjs.com/package/mobx-react
Redux狀態(tài)管理工具(可預(yù)測的狀態(tài)容器)
cnpm install? redux -S
cnpm install? react-redux -S? ? ?
cnpm?install? redux-thunk -S? ? ?
redux中文文檔:http://cn.redux.js.org/??
redux官方文檔:https://react-redux.js.org/?
Moment
cnpm install moment -S
中文文檔:http://momentjs.cn/
md5加密
cnpm install md5 -S
md5倉庫:https://www.npmjs.com/package/md5
socket.io長連接
服務(wù)端
cnpm install express -S? ??
cnpm install??socket.io? -S
客戶端
cnpm install socket.io-client -S
socket.io官網(wǎng):?https://socket.io/