preface

Write a simple framework for react and maintain it. If you like, you can leave comments and technical discussions

Project introduction

1. The technology stack is currently up to date

Newer Newer react webPack 4.41.2 node 10.12.0 // Newer React 16.12.0 webpack 4.41.2Copy the code

2. Package management tool

NPM yarn is commonly used. NPM is used here. Partners who use YARN must pay attention to the difference between commands

Just start

Initialize the project

Create a directory and enter

mkdir react-frame && cd react-frame
Copy the code

Initialize the project and fill in the project information (press Enter)

npm init
Copy the code

Install webpack

npm i webpack webpack-cli webpack-dev-server -D 

npm i react react-dom -S
Copy the code

The difference between -d and -s:

NPM uses add to add packages, -d equals --save-dev -s equals --save-d is what you rely on at development time, --S is what you rely on after releaseCopy the code

After installation, the root directory places a webpack-based development configuration, webpack.config.js

echo > webpack.config.js
Copy the code

Configure the content

const path = require('path'); Module. exports = {// exports:'./src/index.js',
    mode: 'development',
  output: {
    filename: 'bundle.js'// Relative to the URL path, /* React The publicPath property is a special property that helps us with our dev-server. It specifies The public URL of the directory -- at least as far as webpack-dev-server will know or care. If this issetIncorrectly, you'll get 404's as the server won't be serving your files from the correct location! */ publicPath:"/dist/"Path: path.resolve(__dirname,'dist'),
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://localhost:3000/dist/"}, // extensions resolve: {extensions: ["*".".js".".jsx"]}};Copy the code

Configuration package. Json

{..."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."build": "webpack"."dev": "webpack-dev-server --open --hot --port 3001 --host 127.0.0.1"},... }Copy the code

Create the required files and folders

Create folders SRC, public, dist

mkdir src dist public
Copy the code

Create files SRC /index.js and public/index.html

cd src && touch index.js && cd.cd public && touch index.html && cd.Copy the code

Dist /index.html contents:

<! DOCTYPE html> <html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

<body>
    <div id="root"></div> <! The noscript element is used to define alternative content (text) if the script is not executed. --> <noscript> You need toenable JavaScript to run this app.
    </noscript>
    <script src=".. /dist/bundle.js"></script>
</body>

</html>

Copy the code

The content of the SRC/index. Js

import React from 'react';
import ReactDOM from 'react-dom'; JSX creates const element = <div>aa </div>; Reactdom.render (element, document.getelementById ())'root'));


Copy the code

Start the project

npm run dev
Copy the code

Use Babel to enable JSX, React, CSS, etc

Refer to webpack official

See the React official recommendation

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader url-loader style-loader css-loader
Copy the code
const path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    filename: 'bundle.js'// Relative to the URL path, // React The publicPath property is a special property that helps us with our dev-server. It specifies The public URL of the directory -- at least as far as webpack-dev-server will know or care. If this issetIncorrectly, you'll get 404's as the server won't be serving your files from the correct location! publicPath:"/dist/"Path: path.resolve(__dirname,'dist'),
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://localhost:3000/dist/"}, // extensions resolve: {extensions: ["*".".js".".jsx"}, module: {rules: [{/* SRC /* Babel */ *cacheDirectory is used to cache compilation results and accelerate the next compilation */test: /\.(js|.jsx)$/i,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'.'@babel/preset-react'],
          },
        },
      },
      // 
      // The following webpack.config.js can load CSS files,
      // embed small PNG/JPG/GIF/SVG images as well as fonts as Data URLs 
      // and copy larger files to the output directory.
      {
        test: /\.css$/i,
        use: ['style-loader'.'css-loader'],}, {test: /\.(png|jpe? g|gif|svg|eot|ttf|woff|woff2)$/i, loader:'url-loader',
        options: {
          limit: 8192,},},],},};Copy the code

Install SASS to prevent CSS conflicts

Installation NPM install sass-loader node-sass –save-dev

Add the rules of webpack below

..."test: /\.scss$/i,
                // npm install sass-loader node-sass webpack --save-dev
                use: ['style-loader'.'css-loader'.'sass-loader'],},...Copy the code

The proxy agent

DevServer has a proxy property to set up our proxy

devServer: { ... Proxy: {// Configure the service proxy'/api': {
                 target: 'http://localhost:8000',
                 pathRewrite: {'^/api' : ' '}, // changeOrigin:true}, port: 8000 // port,Copy the code

If you have a back-end service on localhost:8000, you can enable the proxy in this way. Request to the/API/users will now be agent to request http://localhost:8000/users. (Note the second attribute here, which replaces ‘/ API ‘with ”). ChangeOrigin: True helps us with cross-domain issues.

Unit testing

Please look at my other article: click here