Initialize the project

   $ mkdir my-app & cd my-app

   $ npm install --yes

Install the dependency library

Prerequisites React base modules

   $ npm install --save react react-dom    

Install webpack-cli, webpacke-dev-server to start the server

   $ npm install --save-dev webpack webpack-dev-server webpack-cli   

# Support ES6 and JSX syntax modules

   $ npm install --save-dev babel-core babel-loader babel-preset-es2017 babel-preset-react    

Generate HTML files and clean the specified directory module

  $ npm install --save-dev html-webpack-plugin clean-webpack-plugin

# Parse CSS syntax

   $ npm install --save-dev css-loader style-loader






Configure webpack and write projects

Create webpack.config.js, index.html, SRC /index.js, SRC/app.js in the root directory



Write a webpack. Config. Js

const path = require('path');    #nodejs built-in module
const htmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  mode: 'production'.# webPack4.x must be defined
  entry: path.resolve(__dirname, './src/index.js'),     # import file
  output: {                                             Export document
    path: path.resolve(__dirname, './dist'),
    filename: 'bunlde.js'
  },
  devServer: {                                          # configuration webpack - dev server. -
    contentBase: path.join(__dirname, 'dist'),           
    compress: true,
    port: 9000
  },
  module: {                                            
    rules: [                                           # webPack4.x no longer uses loaders
      {                                                Rules + use
        test: /\.jsx? $/, include: path.resolve(__dirname,'src'),
        exclude: path.resolve(__dirname, 'node_modules'),
        use: {
          loader: 'babel-loader'.# Parse ES6 syntax
          options: {
            presets: ['es2017'.'react'}}}, {test: /\.css$/,
        use: ['style-loader'.'css-loader']               # webPack4.x loader must have the full name
      }
    ]
  },
  plugins: [
    new cleanWebpackPlugin(['dist'.'build']),            NPM satRT automatically deletes dist and build directories
    new htmlWebpackPlugin({                               Generate an HTML file
      template: './index.html'}})];Copy the code

Write index. HTML

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>        # define the root node
</body>
</html>Copy the code

Write the SRC /index.js entry file

import React from 'react'                    # Introduce the React module
import ReactDOM from 'react-dom'             # Introduce the React-dom module

import App from './App'                      # import app.js from the current directory, must use./ otherwise node_modules will be looked up, the.js suffix can be omitted

ReactDOM.render(                             # virtual DOM render to real DOM 
      
 node
  <App/>,
  document.getElementById('root'));Copy the code

Write the first SRC/app. js react component

import React, {Component} from 'react';
import IndexComponent from './components/IndexComponent';   # Introduce custom components

# ES6 syntax create component and expose interface export default
export default class App extends Component {
  render() {
    return (
      <IndexComponent/>
    )
  }
};Copy the code

The SRC directory components/new IndexComponent js, components/index. The CSS

import React, {Component} from 'react'
import './index.css'

Write components using JSX syntax
export default class IndexComponent extends Component {
  render() {
    return</h2> <ul> <li><a href=""</a></li> <li><a href=""</a></li> <li><a href=""> Life </a></li> </ul> </div>)}};Copy the code

The CSS style of the IndexComponent
body, html {
    font-family: "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans"."Hiragino Sans GB"."Source Han Sans CN"."Source Han Sans SC"."Microsoft YaHei"."Wenquanyi Micro Hei"."WenQuanYi Zen Hei"."ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
    font-size: 14px;
    background-color: tomato;
    padding: 0;
    margin: 0;
}

ul, ol,li {
    list-style-type: none;
}

a {
    text-decoration: darkcyan;
}Copy the code

Add package.json script

"start": "webpack-dev-server --color --progress --watch --open --mode development"."build": "webpack --colors --progress --mode production"Copy the code



Iv. Start the project

$ npm start 

Compiled successfully on the console is as follows





The browser will open automatically (because the package.json script has the –open option for start configured).

Go to http://localhost:9000/



Verify hot updates:

When you change the value inside the div element in the IndexComponent.js component, the server automatically compiles and the browser automatically refreshes


Five, the summary

1. React and react- DOM are the foundation of the React project

2. Webpack4. x has some configuration changes, such as Rules and use

Use: [‘style-loader’, ‘css-loader’]; otherwise, an error will be reported