用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

想着要不要推本身我的博客的，不過想一想，我只是打算本身看成記事本同樣。就不推了。你們看掘金就好。