This build is divided into two parts: one is the necessary configuration in the early stage, and the other is the development of React code.
[React Hello World Project Based on Webpack]
1. Pre-necessary allocation
(1) First of all, we should ensure that Node.js has been installed on the reader's development equipment and a new project is built:
mkdir react-hello-world cd react-hello-world npm init -y
(2) Webpack 4.x is used in the project and executed under the project root directory:
npm i webpack webpack-cli -D
Note: In the above command code, npm install module_name-D is npm intsll module_name-save-dev. Represents devDependencies written to package.json. The plug-ins in devDependencies are used in the development environment, not in the production environment. npm install module_name-S is npm intsll module_name-save. dependencies need to be published to production environments.
(3) After installing Webpack, a configuration file named webpack.config.js is needed to let Webpack know what to do.
touch webpack.config.js
Then the configuration is as follows:
var webpack = require('webpack'); var path = require('path'); var APP_DIR = path.resolve(__dirname, 'src'); var BUILD_DIR = path.resolve(__dirname, 'build'); var config = { entry: APP_DIR + '/index.jsx', // Entrance output: { path: BUILD_DIR, // Exit Path filename: 'bundle.js' // Name of export document } }; module.exports = config;
This is the simplest configuration in the use of Webpack, which contains only the entry and exit of the package. APP_DIR denotes the entry path of the current project and BUILD_DIR denotes the output path of the packaged current project.
(4) The entries configured above need to create a new application entry file. / src/index.jsx, let's print a simple sentence:
console.log('Hello World');
(5) Use the terminal to execute under the root directory:
./node_modules/.bin/webpack -d
After running in the development environment, the above command generates a new build folder in the root directory, which contains the bundle.js file packaged by the Web pack.
(6) Next, create index.html to execute bundle.js in the browser:
<!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">
<title>Hello World</title>
</head>
<body>
<div id="app"></div>
<!--bundle.js yes Webpack Files generated after packaging-->
<script src="build/bundle.js" type="text/javascript"></script>
</body>
</html>
Now the reader can open the index.html file in the browser and see the contents printed by. / src/index.jsx in the console: Hello World.
(7) In order to improve efficiency and use the latest ES grammar, JSX and ES 6 are usually used for development. However, JSX and ES6 grammars are not fully supported in browsers, so you need to configure the corresponding loader module in Webpack to compile them. Only in this way can the packaged bundle.js file be recognized and run by the browser.
Next install Babel:
npm i -D babel-core babel-loader@7 babel-preset-env babel-preset-react
Note: babel-core is a package that invokes Babel's API for transcoding; babel-loader is the core package that performs the transcoding; babel-preset-env is a new preset that automatically enables the required Babel plug-in according to the configuration's target operating environment; and babel-preset-react is used to escape React's JSX syntax.
(8) Configure loader in webpack.config.js:
var webpack = require("webpack"); var path = require("path"); var BUILD_DIR = path.resolve(__dirname, "build"); // Construction Path var APP_DIR = path.resolve(__dirname, "src"); // Project Path var config = { entry: APP_DIR + "/index.jsx", // Project entrance output: { path: BUILD_DIR, // Output Routing filename: "bundle.js" // Naming of output file }, module: { rules: [ { test: /\.(js|jsx)$/, // Compiler suffix is js and jsx Format file exclude: /node_modules/, use: { loader: "babel-loader" // Use babel-loader this loader library } } ] } }; module.exports = config;
(9) Create. babelrc file:
touch .babelrc
Configure the appropriate content to tell babel-loader to use ES6 and JSX plug-ins:
{ "presets" : ["env", "react"] }
So far, the basic work of developing the project has been configured.
Roger said in The Pirate King that everyone has his own chance to play! In the future, React may be forgotten in the wave of front-end history, but today, React's design ideas have influenced countless developers, and now it belongs to its era!!
