react-项目（1）配置环境+基本页面及外层路由+内层路由

我的项目源码地址

配置项目开发环境

• 基于cra添加react-app-rewired 和customize-cra

  npm i react-app-rewired customize-cra -D

  配置config-overrides.js

• 配置less

  npm i less less-loader -D

  配置config-overrides.js

• 配置Antd

  npm i antd -S

  npm i babel-plugin-import -D

  配置lessVar.js

  个性化操作参见Ant Design官网

• 装饰器模式

  查看customize-cra

  需要在config-overrides里添加addDecoratorsLegacy方法

  npm i @babel/plugin-proposal-decorators -D

  此处遇到问题，应该是ES7中装饰器语法的问题，查阅资料后发现可以在项目根目录下添加jsconfig.js，代码如下

  {
  	"compilerOptions": {
  			"experimentalDecorators": true,
  			"allowJs": true
  	}
  }

  
  
  

  在App.js里面尝试一下

  const testHOC = (WrappedComponent) =>{
      return class HOCComponent extends Component{
          render() {
              return(
                  <>
                  <WrappedComponent />
                  <div>这是高阶组件里的信息</div>
                  </>
              )
          }
      }
  }
  
  @testHOC

每一步配置完最好写段代码测试一下**

【在vscode中ctrl+shift+L对相同字符同时进行操作】

基本页面及外层路由

基本界面分为：

-Login

-404

-admin

​ -dashboard

​ -article

​ -List

​ -edit

​ -settings

外层路由：

这里主要指

• 在routes里分为mainRouter(login和404)和adminRouter(其余一些功能)

• 在src/index.js里：

  当路径是/admin时，返回App组件

  mainRouter的遍历，返回mainRouter路由名对应的组件

  对/和其余路径的重定向

  
  
  

内层路由的配置以及路由的懒加载

1.结合前面的教程配置react-router

​ 这里主要是对/admin后面的路径进行细的划分 ，思路和之前的外层路由类似，看个人喜好进行配置

2.参考react-loadable进行配置路由的懒加载

​ npm i react-loadable -S

3.编写一个Loading组件便于测试

运行后发现在控制台会warning

参考@前端瓶子君在csdn上的文章

可以运行一个自动重命名它们的 codemod 脚本

npx react-codemod rename-unsafe-lifecycles

赏

谢谢你的关注

支付宝

微信

• 本文作者： Raphael_Li
• 本文链接： https://lifei-2019.github.io/react11/
• 版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！