Home > Developer > Web Develop
First configure the next webpack.config.js
module.exports={ entry:{ Demo:'./app/app.js ' }, output:{ path:__dirname+ '/build ', filename:' [name].js ', Library:' game ', librarytarget:' UMD ' }, module:{ loaders:[ { test:/\.js$/, loader:' Jsx-loader ' } ] }}Import file entry, integrated JS output output,loaders: Need to Jsx-loader convert jsx to JS
Create HTML
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title>Title</title> <Metaname= "keywords"content=""> <Metaname= "description"content=""></Head><Body> <DivID= "Out"></Div></Body><Scripttype= "Text/javascript"src= "Build/demo.js"></Script></HTML>
The entry file in the above configuration file./app/app.js
To create this file first
varHead=require ('./app1.js '));varCon=require ('./app2.js '));varFooter=require ('./app3.js '));varReact=require (' React ');varReactdom=require (' React-dom ');vardemo=React.createclass ({render:function(){ return(<div> }}) Reactdom.render (<demo/>,document.getelementbyid (' out '));
Use require to import the dependencies first, then create the components with react
To create a dependent APP1,APP2,APP3 3 JS
var React=require (' React '); var head=React.createclass ({ render:function() { return (<div> Head </div>) } ) module.exports=head;Simple example creation is done, required react,react-dom,jsx-loader, we can use NPM install to create dependencies into the project.
The life cycle of a component
1.
Getdefaultprops------>getinitialstate------>componentwillmount------>render------> Componentdidmount------> Component operation
2. During the operation
Divided into two state states and external props changes
State
Shouldcomponentupdate------> If true------>componentwillupdate------>render------> Componentdidupdate
Props
Componentwillreceiveprops------>shouldcomponentupdate .....
3. Uninstalling components
Componentwillunmount
Simple display of component life cycle in React-webpack,react
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
