Build the React project from scratch

  1. npm init
  2. First installation
  • –save dev development environment (devDependencies), –save is the package needed to run online (dependencies);
  • npm i webpack webpack-cli html-webpack-plugin webpack-dev-server –save-dev
  • npm i react react-dom babel-core babel-loader@7 babel-preset-es2015 babel-preset-react –save
  1. Create webpack.config.js in the project directory
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // Specify the entry file from which the program starts, and the directory __dirname is currently located
  entry: path.resolve(__dirname, './src/index.js'),
  output: {
    // Output path
    path: path.resolve(__dirname,'./dist'),
    // Pack the file
    filename: 'app/[name]_[hash:8].js'
  },
  module: {
    rules: [{test: /\.(js|jsx)$/.loader: 'babel-loader'.exclude: /node_modules/}},plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "index.html")}),new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    contentBase: path.resolve(__dirname,  '/dist'),// The directory where the page is loaded by the local server
    port: 1313.inline: true.hot: true.historyApiFallback: true}},Copy the code

4. Create the file babelrc in the root directory of the project

{
  "presets": [
    "es2015"."react"]}Copy the code

5. Create index.html in the project and directory

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge"> <title>Document</title> </head> <body> <div id="root"></div> </body> </html>Copy the code

6. Create the SRC folder in the project root directory SRC ->index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>hello,react</div>.document.getElementById('root'))Copy the code

Add “dev” to scripts in pageckage.json: NPM install –save-dev Babel -cli babel-preset-env “webpack-dev-server –open –mode development”

Babelrc import {“env” : [“env”]}

7. Load routes as required

npm i react-router –save

Add it in the webpack.config.js file

  • The use of es7@ decorators is used:
  • NPM I babel-plugin-transform-decoratorors-legacy babel-preset-stage-2 babel-preset-react-native-stage-0 –save-dev
  • And then add it to the.babelrc file

  • In index.js, the main file in routes
export default {
  path: '/'.indexRoute: {
    getComponent(nextState, cb) {
      require.ensure([], (require) = > {console.log('Come in')
        cb(null.require('.. /pages/homepage').default);
      }, 'home'); }},component: require('.. /App').default,
  childRoutes: [
    require('./HomePage/index').default,
    require('./BaiDu/index').default,
    require('./LianXin/index').default,
  ]
}
Copy the code
  • Where indexRoute is the page loaded at initialization and the App file imported by Component. ChildRoutes are loaded when needed; Routes file homePage under similar documents, written using getComponent, inside the require. Ensure () reference to the load. **
  • (Note: this notation is not suitable for react-Router4 and above); **
export default { path: 'home', getComponent(nextProps, cb) { require.ensure( [], require => { cb(null,require('.. /.. /pages/homepage').default) }, 'home' ) } }Copy the code

7.2 Creating the app. js file in the SRC folder


import LeftContainer from './components/leftContainer';

// The WrappedComponent in @leftContainer is the current app.js
// App = LeftContainer(App) || App;

@LeftContainer
 class App extends React.Component {
  render(){
    const { children }= this.props;
    console.log('children are',children)
    return(
      <div>
        {children}
      </div>)}}export default App;
Copy the code

Create leftcontainer.js in the components file.

import React, { Component } from 'react';
import { Link } from 'react-router';
import Home from '.. /pages/homepage';
import BaiDu from '.. /pages/baidu';
import Lianxin from '.. /pages/lianxin';


const Container = Inner => {
  return class LeftContainer extends Component {
    render(){ const props = {... this.props}return(
        <div>
            <Link to={'/home'}>home页</Link>
            <Link to={'/baidu'}>badu page </Link> <Link to={'/lianxin'}>lianxin page </Link> <Inner {... props} /> </div> ) } } }export default Container;
Copy the code

8. Install less with browser prefix

  • npm i less less-loader css-loader postcss-loader style-loader autoprefixer –save-dev
  • Add this sentence to rules in webpack.config.js
{
        test: /\.(css|less)$/,
        use: ["style-loader"."css-loader", // add browser auto-prefix configuration {loader:'postcss-loader',options:{plugins:[require("autoprefixer") ("last 100 versions")]}},
        "less-loader"]},Copy the code

9. Reference the ANTD style library

  • npm i antd babel-plugin-import –save
  • .babelrc file adds:
"plugins": [["import", { "libraryName": "antd"."libraryDirectory": "es"."style": "css"}]]Copy the code
  • Introduced in the index.js file
import { LocaleProvider } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn';
Copy the code