Home > Developer > Web Develop
工欲善其事, its prerequisite. In order to better study the react, we first briefly set up the development environment. This article mainly introduces the use of Webpack build react project, if you do not understand the basic grammar of react or ES6, it is recommended to learn first.
node/npm
A modular wrapper for modern JavaScript applications. It mainly analyzes your project structure, finds JavaScript modules and other extended languages (Scss, less, TypeScript) that the browser cannot run directly, converting and packaging them into the appropriate format for use by the browser.
Create a folder First-react, enter the directory, open a terminal in the directory, and execute NPM init. Follow the prompts to enter the content, or you can simply press ENTER to skip. After execution, there will be one more Package.json file in the directory, which is the core file of the project, including the package dependency management and scripting tasks.
mkdir first-reactcdFirst-react NPM init
Execute the following command under the project root, where--save means the package required for the project to run on-line, that is, the production environment (--save-dev is the package required for the development environment).
Install react react-
--your Project |--build (Project Packaging output directory) |--bundle.js (the file is generated by Webpack packaging) |--index.html |--src |--index.js |--webpack |--webpack.config.js |--package.json
Index.html
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title></Head><Body> <DivID= "App">/ * React dom*/</Div> <Scriptsrc=".. /build/bundle.js "></Script></Body></HTML>
Index.js
Import React, {Component} from ' React 'react-dom '; render ( <div>hello react!</ Div>, document.getElementById (' app '));Webpack.config.js
Const PATH = require (' path ');Module.exports= {Entry:path.resolve (__dirname, ' ... /src/index.js '),//Specify the portal file, where the program starts compiling, __dirname the current root directory, ... /indicates the previous level of the directory,./Sibling Directoryoutput: {path:path.resolve (__dirname,‘.. /build '),//path to OutputFileName: ' Bundle.js '//post-compilation files}, module: {rules: [{test:/\. (JS|JSX) $/, use: {loader:' Babel-loader ', Options: {presets: [' es2015 ', ' react '],}}, exclude:/node_modules/ } ] }}
Here, if the Webpack build is directly in the project root, it will be an error (Build command: Webpack--config webpack/webpack.config.js), because we use react, React is implemented using JSX syntax, and JSX cannot be directly identified and executed by the browser, so it is necessary to introduce the Babel library for transcoding.
babel-loader: Babel Loader
babel-preset-es2015: Support es2015
babel-preset-react: jsx converted to JS
Finally build again, then click Build/index.html to see Hello react!
// more Webpack commands in Webpack--help check
Next we have a simple optimization, the implementation of the same effect.
Index.js
Import React from ' React' react-dom '; The import App from './app ' const RENDERDOM = Component = = { render ( <component/> document.getElementById (' app ') ;} Renderdom (APP);Create a new JSON file under the project root directory. BABELRC, extract the Babel configuration separately.
{ "presets": [ "es2015", "React" ]}The Webpack.config.js file is adjusted accordingly.
Const PATH = require (' path '); Const Webpack= Require (' Webpack '); Module.exports={entry:Path.resolve (__dirname, ' ... /src/index.js '),//Specify the portal file, where the program starts compiling, __dirname the current root directory, ... /indicates the previous level of the directory,./Sibling Directoryoutput: {path:path.resolve (__dirname,‘.. /build '),//path to OutputFileName: ' Bundle.js '//post-compilation files}, module: {rules: [{test:/\. (JS|JSX) $/, loader: ' Babel-loader ',Exclude:/node_modules/ } ] }}
Create a new app.js under SRC.
Import React, {Component} from ' React 'default class App extends Component { render () { return ( <div>hello react!</div> ); }
Edit Package.json, add a custom script, execute npm run dev at the project root to achieve the same effect.
"Scripts": { "dev": "Webpack--config webpack/webpack.config.js" }It can be found that every time you have to rebuild and refresh the index.html to get the latest results, the development efficiency is very low. Fortunately Webpack-dev-server can help us solve this problem, Webpack-dev-server is a small static file server that provides Web services for Webpack packaged resource files. It also provides automatic refresh and Hot module replacement (Block thermal replacement: The front-end code changes without having to refresh the entire page, replacing only the changed parts). OK, let's start installing and configuring Webpack-dev-server.
NPM Install Webpack-dev-server--save
Create the Bin directory under the project root directory, enter the bin directory, create the Devserver.js file, and edit the following
' Use strict 'Const Webpackdevserver= Require (' Webpack-dev-server '); Const config= require ('.. /webpack/webpack.config '); Const Webpack= Require (' Webpack '); Const path= Require (' path '); Const compiler=webpack (config); Const server=Newwebpackdevserver (compiler, {contentBase:path.resolve (__dirname,‘.. /build '),//The local server is provided by default in the root folder, where the folder is specifiedHistoryapifallback:true,//very useful when developing a single page application, it relies on the HTML5 history API, and if set to true, all jumps will point to index.htmlport:9090,//if omitted, the default 8080Publicpath:"/"}); Server.listen (9090, ' localhost ',function(err) {if(ERR)Throwerr})
Edit Package.json, create a script
"Scripts": { "dev": "Node Bin/devserver" }Finally, separate the terminal from the project root directory, execute npm run dev, and access http://localhost:9090 after successful startup. If you see Hello react!, congratulations. Finally, do a simple test, the App.js modified as follows to save, you can find that the project will automatically recompile run, refresh the browser to see the latest changes. Well, let's write so much for the time being.
Import React, {Component} from ' React 'default class App extends Component { render () { return ( <div> </div> );} }Construction of react project based on Webpack (I.)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
