環境搭建（官方腳手架）
可以使用npm，建議使用yarn
1.安裝 yarn，重啟（不重啟，別的盤符有可能用不了）
打開cmd（小黑框）執行以下命令
//查詢當前鏡像
yarn config get registry
//設定為淘寶鏡像
yarn config set registry https://registry.npm.taobao.org/
//設定為官方鏡像
//yarn config set registry https://registry.yarnpkg.com
2.安裝 create-react-app
//官方 不在支持 把CRA4.0安裝到全域了,需要安裝最新版CRA到全域
yarn global add create-react-app
或
npm install create-react-app -g //非安裝包安裝的yarn 推薦
//測驗是否成功
create-react-app -V
3.創建 react專案
create-react-app 目錄 | npx create-react-app 目錄 | npm init react-app 目錄
yarn eject 解構出所有的組態檔 可選
yarn start | npm start 開發
yarn build | npm run build 打包
//除錯 需要安裝給chrome瀏覽器一個插件 react-dev-tools 谷歌助手->chrome商店-搜索
環境決議
- react: 核心包，決議組件 演示
- react-dom: 編譯 -> 瀏覽器 演示
- react-scrpts: react的專案環境配置
- manifest.json 生成一個網頁的桌面快捷方式時，會以這個檔案中的內容作為圖示和文字的顯示內容
- registerServiceWorker.js支持離線訪問，所以用起來和原生app的體驗很接近,只有打包生成線上版本的react專案時，registerServiceWorker.js才會有效，服務器必須采用https協議
- 對Internet Explorer 9,10和11的支持需要polyfill
可能會遇到的錯誤
運行yarn 提示“不是內部或外部命令，”
裝完重啟
create-react-app 提示“不是內部或外部命令，” //yarn無法全域安裝包
npm i create-react-app -g 用npm重裝
create-react-app 能用安裝到一半報錯(error)
node 全量安裝 ,一路下一步安裝程序中有個復選框選中,時長30分鐘
yarn eject
報git錯誤時:
git init -> git add . -> git commit -m 'init' -> yarn eject
報缺少babel 包: 安裝一下（yarn add xxx -S)
配置
修改埠
//修改script/start.js
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3001;
去除eslint 警告(建議不要去除）
//config/webpack.config.js
//注釋關于eslint的匯入和rules規則 (react16.x)
//注釋關于new ESLintPlugin (react17.x)
第三方腳手架
yomen/umi
webpack手動搭建
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/271420.html
標籤：區塊鏈
上一篇：關于promise