In this lesson we'll setup a simple build process for converting our ES6 React components into ES5 using Babel and Webpack
Install:
NPM I--save react react-dom
NPM i-d babel-loader babel-core babel-preset-es2015 babel-preset-react
NPM i-g Babel Webpack webpack-dev-server
Create files:
Touch App.js main.js Webpack.config.js
Webpack.config.js:
Module.exports ={entry:'./main.js', Output: {path:'./', FileName:"Index.js"}, Devserver: {inline:true, Port:3336}, module: {loaders: [{test:/\.jsx?$/, exclude:/(node_modules|bower_components)/, Loader:'Babel', query: {presets: ['es2015','react'] } } ] }};
Index.html
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Setup</title></Head><Body><DivID= "App"></Div><Scriptsrc= "Index.js"></Script></Body></HTML>
App.js:
Import React from ' React 'default class App extends React.component { render () { return ( <span>hello react</span> ) }}Main.js:
Import React from ' React 'react-dom'./app '; Reactdom.render (<app/>, document.getElementById (' App '));Run:
Webpack-dev-server
[React Fundamentals] Development environment Setup
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
