Home > Developer > Web Develop
The other Third-party open source libraries you need to install depend on the Following:
"dependencies": { "babel-core": "^6.21.0", "babel-loader": "^6.2.10", " babel-preset-es2015 ":" ^6.18.0 ", " babel-preset-react ":" ^6.16.0 ", " React ":" ^15.4.2 " , " React-dom ":" ^15.4.2 " }Because you want to use the import, you need to use the installation babel-preset-es2015, the other libraries are necessary;
2. Configure Webpack.config.jsModule.exports = { + '/app.js ', output: { path: __dirname, ' bundle.js ' }, module: { loaders: [ { /\.js$/, /node_modules/, ' Babel ' , query: { presets: [' es2015 ', ' react '}} ]} }The main is to configure the corresponding loader, in this only need es2015 and react;
3. Create a resource fileIndex.html
<HTML> <Head>HelloWorld</Head><Body> <DivID= "helloworlddiv"></Div> <Scripttype= "text/javascript"src= "bundle.js"></Script></Body></HTML>
There is only one div with ID helloworlddiv in the page, and an external script file referenced, which is generated by the Webpack packaging tool and not manually added;
App.js
Import React from ' React 'react-dom' react-dom ';
// reactdom.render ( Render ();
In app.js, the ' two ' rendering methods are recorded, which is actually the same rendering method;
You can also call the Render method directly through reactdom.render, and you need to be aware of the difference between the two methods: ' Reactdom ' is the entire ' react-dom ' of the direct import, and ' render ' is added when importing with import ' {} ' is decorated, {} decorates the object as a specific known method, without {} adornment is the whole ' react-dom ' that is imported, that is, reactdom, which means that render is a method of Reactdom object;
The Reactdom object structure is found by debugging as Follows:
Object { finddomnode render (nextelement, container, callback) unmountcomponentatnode unstable_ Batchedupdates ... }Just to confirm the above assertion;
4.ComponentIn addition to using
Render (In this way, the HTML fragment can be encapsulated in the form of a component, which renders an organized HTML fragment directly;
React allows the code to be encapsulated as a component (component) and then inserted into a Web page like a normal HTML tag. There are two ways to define a component class:
4.1 react.componentclass HelloWorld extends React.component { render () { return (<div>hello world</ div>); }}render (By inheriting react.component, a newly created component class helloworld, when used, directly passes the component to the Nextelement parameter of the render function;
4.2 React.createclassvar HelloWorld = react.createclass ({ function() { return }});When a template is inserted into Note that the first letter of the component class must be capitalized, otherwise it will be an error, such as HelloWorld cannot be written as Helloworld. In addition, the return of the component class render function can contain only one top-level label, otherwise it will be an Error.
4.3 Stateless componentsCreating a component In addition to the above two methods, you can also create it directly from a Function.
var React = require ("React"); var function (props) { return <div> <button onclick={props.onclick}>new Item</button > </div>; = MyButton; // how stateless components are definedYou need to import the react using require ("react")!
Webpack + React Development HelloWorld
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
