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> <html lang="en"> <head> <meta charset="UTF-8"> <title>Setup</title> </head> <body> <div id="app"></div> <script src="index.js"></script> </body> </html>
App.js:
import React from 'react'; export default class App extends React.Component { render() { return ( <span>Hello React</span> ) } }
main.js:
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('app'));
Run:
webpack-dev-server