Cut the crap and get straight to work this time. It’s my step-by-step building process. When’s note

Sum up and see the end.

The project address: https://github.com/ht-sauce/react-template

1. Create a project

This is nothing to say, just a command: NPM create your project name

Along with website address: https://www.html.cn/create-react-app/docs/setting-up-your-editor/

2. Analyze the directory structure

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
Copy the code

Official note:

  • public/index.htmlIs a page template;
  • src/index.jsIs a JavaScript entry point.

For those with VUE experience, it’s straightforward to understand. And the file is partially modified. This is what IT looks like when I’m done. I’m going to write the document like this.

Public favicon.ico index.html SRC app.css // App page CSS app.js // home page, global index.css // global CSS index.js // entry file, similar to vue main.jsCopy the code

Notice that this is just the first modification. Then you need to import routing and REdux (similar to VUX)



3, There must be esLint, prettier

Note that react’s official scaffolding comes with ESLint. For the time being, it’s official



1. Add packages first

yarn add prettier

yarn add eslint-plugin-prettier

installed



2. Add the ESLint configuration file

Under the root

.eslintrc.json

Add content

{
  "extends": "react-app",}Copy the code

3. Add the prettier configuration

The final ESLint configuration file is

{
  "extends": "react-app"."plugins": ["prettier"]."rules": {
    "prettier/prettier": "error"}}Copy the code

4. Add the prettier configuration file

The reference configuration parameters description: 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};Copy the code

4. Add sass

First according to the official document, add a simple to

Command: yarn add node-sass

Then change the CSS file suffix to SCSS



5. Add a route

1, the react – the router? react-router-dom

React-router-dom is officially recommended by create-react-app, but react-router-dom is usually asked.

Forgive me for being a novice, so I baidu comparison.

Here I recommend a CSDN blog, which is more detailed. You can take a look.

React-router-dom is repackaged based on react-router and optimized to provide more solutions. So it’s an optimization process for both.

Install yarn add react-router-dom


Route react-router-config (vUE)

Here I have to make fun of the React routing.

Reason for teasing:

Study is inevitable baidu, and then when I am more broken when I go to nuggets to complain. Then I found out that react routing was really bad. Because I know baidu, there are currently DVA. Js solution to put HI, umiJs way, and you big guy to encapsulate the route. Think about it. The React ecosystem is so rich. But what about a novice? This is not a disaster.

Then react is too flexible for a novice to handle. Old hands individually package, then the project is uneven. The original sin.

React works for large companies because large companies have good specifications.

Vue has no limits and is suitable for both large and small projects. Vue itself is well regulated for small businesses. For large companies, there is no lack of flexibility. Only sigh, Vue appeared later than React, and there is no big factory background.


Official:

Since I’m new, and I transferred from Vue. Then I will never accept vUE as a component route navigation. But self-encapsulation is not familiar enough. React-router-config is the latest version of Vue

NPM install –save react-router-config/yarn add react-router-config

Write router.js

Create the router file under SRC and create router.js

There is nothing to be said for copying the react-router-config document directly. I put my code out there

import asyncComponent from './asyncComponent'; // Import {renderRoutes} from'react-router-config'; / / the example refs / * const Child = ({route}) = > (< div > < h2 > Child < / h2 > {/! * child routes won't render without this *! /} {renderRoutes(route.routes, { someProp: 'these extra props are optional' })}  ); */ const routes = [ { component: asyncComponent(() => import('../App')), routes: [ { path: '/Component: asyncComponent(() => import(') '../view/Home')), }, { path: '/About', component: asyncComponent(() => import('../view/About')), }, { path: '/InboxComponent: asyncComponent(() => import(') '../view/Inbox')),}, // Route nesting example /*{path: '/child/:id', component: Child, routes: [ { path: '/child/:id/grand-child', component: GrandChild, }, ], },*/ ], }, ]; export default routes;Copy the code

You can see that the code is very similar to vue

Then there’s the contents of 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 is removed'react-router-config';
import routes from './router/router';

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

This is basically the same as react-router-config. Nothing to change. Here praise under the official (if I had written react last year is not this thing, terrible!) .

4. Load on demand

If you go straight to the official full example then it won’t load on demand.

I remember when I was learning about Vue, vueRouter said that importing imports directly into the page would not load on demand. But in the component location

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

Above way, then can load on demand.

But react doesn’t work. This is an error. The English hint basically means that you are introducing primose, but not components.

Recall that the React-create-app official vaguely mentioned on-demand loading.

The official address: https://www.html.cn/create-react-app/docs/code-splitting/

But vue-router is a different approach

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

Basically, you need to treat promises as higher-order components.

Fortunately, the documentation is readily available. Just copy it.

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;
}
Copy the code

Router.js (router.js) This completes loading on demand.

NPM install –save react-loadable

This is for you to see.

So far the routing calculation is basically completed.

6. Vue and React

React except for redux. The rest is the actual development.

Then I took the front end development route: a small program — Vue — learned react

Here I think React is very flexible. Overall, react officials have actually given you a good path. However, it can be seen that react does not have a good standard during the evolution of the project from its inception to its current position. Lead to entry too high, a hundred flowers bloom. React’s high entry level limits its popularity among lower-level users.


Vue from the start seems to have a set of rules for the user. Let you play by his rules. But it’s newbie friendly. React is basically better than vue.

React was definitely better initially in terms of development efficiency. In fact, the latter two are similar.


Code wise, React is less granular, but Vue isn’t bigger either, it just feels more like HTML page development.


Vue is better in terms of development experience.


In contrast, VUE is definitely the first choice for small companies. React has been a bit of a disaster for small businesses. React is highly flexible, resulting in too many specifications.


Compared to large projects, there is no difference (regardless of performance).


React is better at getting started, vue is less. To be honest, I was more confused when I first learned VUE than react. Because Vue is not friendly enough on tutorials. (Mainly in vueCli)


Finally: You can choose VUE in China, but you also need to learn React. If you want to go further, you need to learn everything.

The git address of this project is https://github.com/ht-sauce/react-template

I was thinking about launching my own personal blog, but come to think of it, I’m just going to use myself as a notepad. I won’t push it. Just watch the Nuggets.