用react-create-app搭建一个类似vue的初始项目（eslint，prettier，rouer）

秦晋

2023-12-01

不废话了，这次直接开干。也是我逐步的搭建过程。当手记了

总结看最后。

本次项目地址：https://github.com/ht-sauce/react-template

1、创建项目

这个没什么可以说的，就是一个命令：npm create 你的项目名称

附带官网地址：https://www.html.cn/create-react-app/docs/setting-up-your-editor/

2、分析目录结构

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

官方说明：

public/index.html 是页面模板;
src/index.js 是 JavaScript 入口点。

有vue经验的那么就直接很好理解。并且对文件进行部分修改。我初步干完是这样样子的。剩下这么写文件。

public
    favicon.ico
    index.html
  src
     App.css //app页面css
     App.js //首页，全局的
     index.css //全局css
     index.js //入口文件，类似vue的main.js

这里注意，只是初次修改。后面还需要引入路由和redux(类似vux)

3、必须有eslint，prettier

注意react的官方脚手架是有eslint的。暂时根据官方的操作来

1、先添加包

yarn add prettier

yarn add eslint-plugin-prettier

安装完毕

2、添加eslint配置文件

根目录下面

.eslintrc.json

添加内容

{
  "extends": "react-app",
}

3、添加prettier配置

最终eslint配置文件为

{
  "extends": "react-app",
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

4、添加prettier配置文件

参考配置参数说明：https://www.cnblogs.com/linjunfu/p/10880381.html

prettier.config.js

module.exports = {
  printWidth: 100,
  singleQuote: true,
  trailingComma: 'all',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  parser: 'babylon',
  semi: true,
};

4、添加sass

先根据官方文档，添加简单的来

命令：yarn add node-sass

然后把css文件后缀改为scss就行了

5、添加路由

1、react-router？react-router-dom

这里有一个比较争议性的问题，通过create-react-app的官方推荐了react-router-dom，但是通常问的是react-router。

原谅我是新手，所以我百度比较了下。

这里推荐一个csdn的博客，这位大神讲的比较详细。大家可以看看。

我总结下：react-router-dom是基于react-router再次封装的，并且优化提供了更多的解决方案。所以两者而言是一个优化过程。

所以安装：yarn add react-router-dom

2、改的像vue一样操作路由react-router-config

这里我不得不吐槽react的路由。

吐槽原因：

学习免不了百度，然后当我比较崩溃的时候我去掘金发发牢骚。然后我发现react路由做的确实差。因为我自己百度所得知，目前有dva.js解决放hi，umiJs方式，还有各位大佬自己去封装路由。想想，这react生态真是丰富啊。然而这对于一个新手呢?这是不是一个灾难。

然后就是react太灵活，灵活到新手无法驾驭。老手各自封装，然后项目参差不齐。原罪啊。

react之所以适合大公司，因为大公司有良好的规范。

vue没有限制，即适合大项目也适合小项目。对于小公司vue本身规范良好。对于大公司，又不欠缺灵活性。只叹，vue出现的比react晚，又没有大厂背景。

正式：

既然我是新手，而且我是vue转过来的。那么我是万万不能接受vue这种组件方式的路由导航。但是自己封装又不够熟悉。好在react-router官方开始向vue学习，推出了react-router-config

安装：npm install --save react-router-config/yarn add react-router-config

3、编写router.js

在src下面创建router文件，然后新建router.js

如果直接拷贝react-router-config文档那么没什么可以说的。我放出来自己的代码

import asyncComponent from './asyncComponent';
//子路由展示的关键参数，类似router-view
//import { renderRoutes } from 'react-router-config';
// 传参示例
/*const Child = ({ route }) => (
  <div>
    <h2>Child</h2>
    {/!* child routes won't render without this *!/}
    {renderRoutes(route.routes, { someProp: 'these extra props are optional' })}
  </div>
);*/

const routes = [
  {
    component: asyncComponent(() => import('../App')),
    routes: [
      {
        path: '/',
        exact: true, //只有当路由完全匹配的时候才进行匹配
        component: asyncComponent(() => import('../view/Home')),
      },
      {
        path: '/About',
        component: asyncComponent(() => import('../view/About')),
      },
      {
        path: '/Inbox',
        exact: true, //只有当路由完全匹配的时候才进行匹配
        component: asyncComponent(() => import('../view/Inbox')),
      },
      // 路由嵌套示例
      /*{
        path: '/child/:id',
        component: Child,
        routes: [
          {
            path: '/child/:id/grand-child',
            component: GrandChild,
          },
        ],
      },*/
    ],
  },
];

export default routes;

可以看到代码和vue很相似了

然后是index.js中的内容

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';

// 路由配置
import { BrowserRouter as Router } from 'react-router-dom';
// 路由配置抽离
import { renderRoutes } from 'react-router-config';
import routes from './router/router';

ReactDOM.render(
  <Router>{renderRoutes(routes)}</Router>,
  document.getElementById('root'),
);
serviceWorker.unregister();

基本上是和react-router-config一样的。没什么多余的改变。这里赞扬下官方（我要是早去年写react是不是就没有这玩意，可怕！）。

4、按需加载

如果你直接按官方完整的例子来那么是无法按需加载的。

我记得在学习vue的时候，vueRouter说过，如果直接在页面里面引入import是不会按需加载的。但是在组件（component）位置用

component: () => import("../views/blog/Home.vue"),

上述方式，那么就能按需加载。

但是react里面不行啊。这样写就报错。英文提示的大致意思就是，你引入的是primose，但不是组件。

这时候回想到react-create-app官方隐约提过按需加载的方式。

官方地址：https://www.html.cn/create-react-app/docs/code-splitting/

但是vue-router是另外的方式

地址：https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html

大致意思就是，你需要将promise处理为高阶组件。

还好文档有现成的。拷贝就行了。

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);

      this.state = {
        component: null
      };
    }

    async componentDidMount() {
      const { default: component } = await importComponent();

      this.setState({
        component: component
      });
    }

    render() {
      const C = this.state.component;

      return C ? <C {...this.props} /> : null;
    }
  }

  return AsyncComponent;
}

使用方式，看我刚才router.js里面的代码就懂了。这样就完成了按需加载。

文档中还提到：npm install --save react-loadable

这个就大家自己看看了。

到目前为止路由算基本完成了。

6、vue和react总结

上述操作下来，其实react除了redux基本上是没问题了。剩余的就是实际开发了。

然后我前端开发路线是：小程序——vue——学习react

这里我觉得react非常灵活。总的走来下，react官方其实已经给你了良好的道路。只是可以看的出来react从开始到目前位置，项目本身演变过程中，没有一个良好的规范。导致入门太高，百花齐放。入门高，限制了react在底层用户的发展。

vue从一开就好像给用户框定了一套规则。让你去根据他的规则来。但是这对于新手友好。相对于react，基本面上其实vue这块做的更好。

从开发效率上，初始绝对是react更好。后期两者其实相差不多。

从代码上看，react颗粒度更低，但是vue也不能说比react大，只是vue感觉更像一个html页面开发。

开发体验上vue更好。

相比而言，vue绝对是小公司首选。react对于小公司有点像灾难。因为react的高度灵活性，导致出现太多规范。

大项目相比，两者没有差别（抛开性能）。

官方文档比较：react在入门教育上更好，vue就比较欠缺。说实在，我一开始学vue的时候比react还懵逼。因为vue在新手教程上不够友好。（主要在于vueCli方面）

最后：国内选vue没错，但是你也不能不学习react，路想走的更远那么就都需要学习。

本次项目git地址：https://github.com/ht-sauce/react-template

想着要不要推自己个人博客的，不过想想，我只是打算自己当作记事本一样。就不推了。大家看掘金就好。