React zero base pit

1. Premise basis

• Before learning React, you need to master basic js, CSS, and HTML knowledge
• Node.js, Git, webpack basics
• Some knowledge of JSX syntax (a syntactic sugar of JS)
• React

2. Development environment

1. Install Node.js (required version :node>=6, NPM >=5.2) and goThe node’s official websiteAfter the installation is complete, open CMD /git and run node -v/ NPM -v to check the version.
   

   

2. Install webPack globally

npm install -g webpack
Copy the code

3. To install Git (for code management), download the installation package from Baidu.

Create a new React APP

1. The official recommended scaffolding (Create React App) is used to initialize the project. First, install create-react-app globally

npm install -g create-react-app
Copy the code

2. Initialize a project

NPX create-react-app my-app (NPXS is NPM 5.2+ package running tool)cd my-app
npm start
Copy the code

At this point our React project is set up

npm run eject
Copy the code

All built-in configurations will be exposed.

4. Start development

• Plan the project structure, create pages, Layout, Components folder under SRC, and divide the components into page components,layout components, and functional components.
• Install the react-router. Here we use the react-router-dom.

cnpm i -S react-router-dom
Copy the code

• Now let’s complete a simple layout. As shown below, it consists of a common header, bottom component, and body part:
  

  

1. Create a common folder under Conponents, create header and Footer components respectively, and create a Home component under Pages. Create a router folder under SRC and create a routing file.
   

   

   

2. After starting the project, we find that the page is redirected to ‘/home’, just as we see in the renderings.

• Less configuration, check webpack.config.js, find only SCSS (sass) configuration, if you use Sass, directly install dependencies, you can skip the next part

const cssRegex = /\.css/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
Copy the code

1. Install less and less-loader

cnpm i -S less less-loader
Copy the code

2. Modify the webpack. Config. Js

const cssRegex = /\.css/; => const cssRegex = /\.css|less/;
Copy the code

Add: {loader: require.resolve('less-loader')}Copy the code

3. Change our CSS file to less file and restart the project (CSS processor installed here, need to restart less style to take effect)
   

   

   

   Review the element and find that the style is in effect.

5. Use UI components

• Choose To use Ali’s: Ant Design.
• If you do not expose the built-in configuration using yarn Run eject, you can choose to extend the configuration as recommended in the documentation (config-overrides. Js).
• Here we will show how to configure once the configuration file is exposed

1. Install antd

Yarn add ANTd or NPM install -s antdCopy the code

2. Use in a page, such as a button in a home component

    import React, { Component } from 'react';
    import './index.less';
+   import Button from 'antd/lib/button';
    export default class Home extends Component {
      render() {
        return (
          <div className="home_page container">
            <h1 className="home_page_title">this is a home pages</h1>
            <div className="main_content">
        +     <Button type="primary">Login</Button>
        +     <Button>go to console</Button>
            </div>
          </div>
        )
      }
    }
Copy the code

3. The button appears on the page, but there is no style. You can introduce antd.css in the global CSS as follows. However, this will load all CSS files, so it is not recommended for performance reasons.

@import '~antd/dist/antd.css';
Copy the code

4. To reference as needed, add the following configuration items to webpack.config.js plugins and change the reference method

['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }]
Copy the code

import Button from 'antd/lib/button'; => import { Button } from 'antd'
Copy the code

5. Restart the project and find that the button style is loaded.
   

   

essays

• As I am a beginner of React, there may be many problems during the process. Welcome to correct them.
• API, route authentication, Redux and other related parts will be updated in the future.