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

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

总结看最后。

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

一、建立项目

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

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

二、分析目录结构

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)

三、必须有eslint，prettier

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

一、先添加包

yarn add prettier

yarn add eslint-plugin-prettier

安装完毕

二、添加eslint配置文件

根目录下面

.eslintrc.json

添加内容

{
  "extends": "react-app",
}
复制代码

三、添加prettier配置

最终eslint配置文件为

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

四、添加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,
};
复制代码

四、添加sass

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

命令：yarn add node-sass

而后把css文件后缀改成scss就好了

五、添加路由

一、react-router？react-router-dom

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

原谅我是新手，因此我百度比较了下。

这里推荐一个csdn的博客，这位大神讲的比较详细。你们能够看看。

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

因此安装：yarn add react-router-dom

二、改的像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

三、编写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是否是就没有这玩意，可怕！）。

四、按需加载

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

我记得在学习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

这个就你们本身看看了。

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

六、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

想着要不要推本身我的博客的，不过想一想，我只是打算本身看成记事本同样。就不推了。你们看掘金就好。