React 2021 new Book 102, Project Configuration

The React newbie village

There are several ways to configure a React project:

The React, React DOM and Babel Javascript support packages are introduced using the Script tag.
Use the Create React App scaffolding, a tool that generates React projects.
It is also possible to configure the React project manually using Webpack.

Importing tags using Script

React is an easy way for beginners to experience and learn React features.

📌 Configure a new React project using the Script tag and CDN.

Create a js file app.js containing the following code:

// app.js

class Application extends React.Component {
  render() {
    return (
      <div>
      App
      </div>
    );
  }
}

ReactDOM.render(<Application />.document.getElementById('app'));
Copy the code

Then create an HTML file index. HTML containing the following code:

<! -- index.html -->

<html>
  <body>
  <! -- This is where our app will live -->
    <div id="app"></div>

  <! -- These are script tags we need for React, JSX and ES2015 features -->
  <script src="https://cdn.bootcdn.net/ajax/libs/react/15.0.0/react.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/react/15.0.0/react-dom.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  <script type="text/babel" src="app.js"></script>
</body>

</html>
Copy the code

The file list is as follows:

-| app.js
-| index.html
Copy the code

Run NPX http-server -p 5000 on terminal:
```
npx http-server -p 5000
Copy the code
```
The service has started http://localhost:5000.
Using a browser to visit http://localhost:5000 will display: App.

The downside of this approach is that the code is compiled AD hoc at run time, which makes it slow to run. The advantage is that it is easy to configure and good for learning. Please do not use in production environment!

Use the Create React App scaffolding

The Create React App scaffolding was developed by Dan Abramov to quickly Create and run an App.

📌 Quickly Create the React App using the Create React App scaffolding and NPX

A single command will do the trick:

Create an app named my-app:
```
npx create-react-app my-app
Copy the code
```
Node>=8.10, NPM >= 5.6
Into the project
```
cd my-app
Copy the code
```
Operating Projects:
```
yarn start
Copy the code
```
The service has started http://localhost:3000.
Using a browser to visit http://localhost:3000 will display:

Create-react-app is an active project on Github that can help beginners learn, as well as help you create real projects. Whether or not you use it depends on how you configure your project. In fact, create-React-app can handle most scenarios, until one day you’re skilled enough with React that you don’t need it anymore. Official document portal: github.com/facebook/cr…

Manual configuration

Using Webpack makes it easier to manually configure a Reat project, and we’ll show you how to do it step by step:

Install Node.js. Use Node.js to install various versions of packages.
Webpack. Download the Webpack package and create a configuration file for it.
Babel. Babel adds more features to JavaScript that may not be supported yet. One of them is to convert JSX to native JavaScript.

📌 -1- Create a Webpack project

Webpack is a static module bundler for modern JavaScript applications. When WebPack works with an application, it recursively builds a Dependency graph containing every module the application needs, and then packages all of those modules into one or more bundles.

Webpack also has code-switching capabilities:

JSX is converted to native JavaScript. Our React project includes JSX syntax.
SCSS to CSS. SCSS has been used for a long time to make CSS easier to manage. It provides things like modules, variables, and function functions. As Web technology continues to evolve, many functions can now be provided by native CSS.

Now start creating a Webpack project. Create folders and files first:

mkdir src
mkdir dist
cd src
touch index.js
cd ..
cd dist
touch index.html
Copy the code

Run NPM init -y to initialize the project in a further directory of the project:
```
npm init -y
Copy the code
```
When run, a configuration file package.json is automatically generated:
```
-| src/
---| index.js
-| dist/
---| index.html 
-| package.json
Copy the code
```

Add the following to the index.html file:

<! DOCTYPEhtml>
 <html>
   <head>
     <title>Hello App</title>
   </head>
   <body>
     <div>
       <h1>Hello App</h1>
     </div>
     <script src="./bundle.js"></script>
   </body>
 </html>
Copy the code

Bundle. Js? Don’t worry, this file will be generated automatically by Webpack.

Add the following to the index.js file:

console.log('hi from app')
Copy the code

Run the NPM install command to install the required packages for webpack, which are automatically written to the package.json configuration file:
```
npm install --save-dev webpack webpack-dev-server webpack-cli
Copy the code
```
Create a configuration file for webpack, webpack.config.js:
```
touch webpack.config.js
Copy the code
```
Add the following to the webpack.config.js file:
```
const path = require('path');
module.exports = {
   entry: path.resolve(__dirname, './src/index.js'),
   output: {
     path: path.resolve(__dirname, '/dist'),
     filename: 'bundle.js'
   },
   devServer: {
     contentBase: path.resolve(__dirname, './dist')}};Copy the code
```
The entry entry indicates which module to use as the starting point for building its internal dependency diagram. Once at the entry point, WebPack finds out which modules and libraries are (directly and indirectly) dependent on the entry point. The Output export refers to where to export the bundles it creates and how to name these files./dist is the default. Basically, the entire application structure is compiled into a folder in the output path you specify.
Configure the start script in the scripts module of package.json:
```
"start": "webpack serve --mode development"
Copy the code
```
Then run the NPM start command from the command line to execute:
```
npm start
Copy the code
```
The following message is displayed after the command is run

Project is running at http://localhost:8080/.
Now open your browser and visit Project is running at http://localhost:8080/. Js :1 hi from app.

📌 -2- Added Babel support

React relies on JSX to write page code, making it simpler. Webpack transforms JSX into native JavaScript. You can use Babel or some other technique to do this, we call this _preset_ :

Create a configuration file.babelrc and add the following:

{
   "presets": [
     "@babel/preset-env"."@babel/preset-react"]}Copy the code

Install Babel Preset for related dependencies:

npm install --save-dev @babel/preset-react @babel/core babel-loader @babel/preset-env
Copy the code

Open the webpack.config.js. file and add the following to the entry element:
```
module: {
   rules: [{test: /\.(js|jsx)$/,
       exclude: /node_modules/,
       use: ['babel-loader'],},],},resolve: {
   extensions: [The '*'.'.js'.'.jsx'],},Copy the code
```
This configuration tells WebPack to look for files with the extension _. Js_ or.jsx and convert JSX to native JavaScript by running the babel-loader command.

📌 -3- Add React

With everything set up, you just need to add React to it.

Install React. Install React.

npm install --save react react-dom
Copy the code

Go to the index.js file and change it to the following:

 import React from 'react';
 import ReactDOM from 'react-dom';
  
 const title = 'Your React app';
  
 ReactDOM.render(
   <div>{title}</div>.document.getElementById('app'));Copy the code

Find the index.html file and add the following tags:

<div id="app"></div>
Copy the code

React will look for this tag and create the React app here. The complete code is as follows:

 <! DOCTYPEhtml>
 <html>
   <head>
     <title>Hello App</title>
   </head>
   <body>
     <div id="app"></div>
     <script src="./bundle.js"></script>
   </body>
 </html>
Copy the code

Run NPM start from the command line:
```
npm start
Copy the code
```
Open your browser and visit http://localhost:8080. Results:
```
Your React app
Copy the code
```
Configure React project successfully using Webpack and Babel.

Let’s add HMR. Whenever the JS file changes, Webpack recompiles the project and immediately sees the changes.

Install using NPM install:

npm install --save-dev react-hot-loader
Copy the code

Modify the webpack.config.js configuration file:
- Add a new introduction at the top:
```
const webpack = require('webpack');
Copy the code
```
- Add the following to the devServer element:
```
plugins: [new webpack.HotModuleReplacementPlugin()],
Copy the code
```
- Add attributes to the devServer element:
```
hot: true.Copy the code
```
Restart the project to check whether the HMR takes effect.
```
npm start
Copy the code
```
Modify the contents of the index.js file:
```
const title = 'Your React app';
Copy the code
```
To:
```
const title = 'Your awesome React app';
Copy the code
```
After the file is saved, watch for changes on the command line and in the browser http://localhost:8080 —- the command line will rebuild the project and the new result will display Your Awesome React app in the browser

The sample code

Use the Script tag to introduce:

👉 Check out script tag project
Create React App scaffolding:

👉 Check out this solution
Manual configuration using Webpack

👉 Check out this solution