用react-create-app搭建一個類似vue的初始項目（eslint，prettier，rouer）

不廢話了，這次直接開幹。也是我逐步的搭建過程。當手記了

總結看最後。

本次項目地址：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

想着要不要推自己個人博客的，不過想想，我只是打算自己當作記事本一樣。就不推了。大家看掘金就好。