第一步 建立react專案  

create-react-app myfood

第二步 匯入相關依賴

npm i antd redux react-redux   react-router-dom@5 axios less [email protected] --save

ant-design ui設計元件庫   redux最主要是用作應用狀態的管理    一個針對React而設計的路由解決方案、可以友好的幫你解決React components 到URl之間的同步對映關係       axios 非同步通訊    less  css預處理語言

第三步 系統結構設計

1.刪除src目錄下所有檔案 新建 Index.jsx 程式入口檔案  App.jsx程式單頁面元件 

通過react-dom render函式將App元件渲染到index.html中

 3.解包配置less

解包前提交git

git init

git add .

git commit -m '解包前'

通過npm run eject 解包  輸入y確認解包

 在解壓後config資料夾下的webpack.config.js中新增以下程式碼 （'sass-loader'之後）

{ test: /\.less$/, use: getStyleLoaders( { //暫不配置 }, 'less-loader'  //初始化的less-loader依賴 ), },   4.在src/assets/目錄下新增base.less檔案，引入antd.css @import '~antd/dist/antd.css';     在index.js中引入base.less 作為全域性配置 import "./assets/base.less"

此時會出現eslint檢查問題

 解決方法 在package.json 中的 "eslintConfig"後新增以下程式碼

    "eslintConfig": {     "extends": [       "react-app",       "react-app/jest"     ],     "parserOptions": {       "babelOptions": {         "presets": [           [             "babel-preset-react-app",             false           ],           "babel-preset-react-app/prod"         ]       }     }   }  

第四步 仿照豆果網頁面設計