react

第一步 创建react项目  

create-react-app myfood

 

 

第二步 导入相关依赖

npm i antd redux react-redux   react-router-dom@5 axios less less-loader@6.0.0 --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"

        ]

      }

    }

  }

 

第四步 仿照豆果网页面设计