1 Star 0 Fork 0

justwkj / react-imooc

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
step.md 2.01 KB
一键复制 编辑 原始数据 按行查看 历史
justwkj 提交于 2019-04-28 14:43 . redux 引入

项目前期搭建

  1. 安装脚手架工具 npm install create-react-app
  2. 使用脚手架创建react项目 create-react-app demo
  3. 运行项目,查看效果 yarn start 或者npm start
  4. 安装项目插件 yarn add react-router-dom axios less-loader
  5. 暴露配置文件 yarn eject 设置webpack的less解析
  6. 安装antd插件 yarn add antd
  7. antd 简单使用实例
  8. 安装babel按需加载 yarn add babel-plugin-import,不需要单独引入antd的样式,此时需要在package.json中配置
"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      ["import", {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": true
      }]
    ]
  }
  1. less解析 yarn add less less-loader
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
//依照sass添加less
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

... 
//复制sass的解析相应的修改为less即可

{
      test: lessRegex,
      exclude: lessModuleRegex,
      use: getStyleLoaders(
          {
              importLoaders: 2,
              sourceMap: isEnvProduction && shouldUseSourceMap,
          },
          'less-loader'
      ),
      sideEffects: true,
  },
  {
      test: lessModuleRegex,
      use: getStyleLoaders(
          {
              importLoaders: 2,
              sourceMap: isEnvProduction && shouldUseSourceMap,
              modules: true,
              getLocalIdent: getCSSModuleLocalIdent,
          },
          'less-loader'
      ),
  },
  1. 百度天气接口条用需要安装jsonp插件 yarn add jsonp --save

react-router

  1. HashRouter和BrowserRouter区别

antD UI组件使用

...

redux 使用

  • redux 调试工具, chrome安装 redux devtools
  • yarn add redux react-redux redux-devtools-extension --save
JavaScript
1
https://gitee.com/justwkj/react-imooc.git
git@gitee.com:justwkj/react-imooc.git
justwkj
react-imooc
react-imooc
master

搜索帮助