React, Babel, Webpack, oh my! (How to React - Beginner Edition)
Julia Gao @ryoia
About Me
Utah Haskell Meetup
WHY?
I learned ReactJS when I was a junior developer...
Bye bye
Hello
But wait!
What The Babel??
Transpiler: ES6 -> Browser Friendly
var x = [1, 2, 3, 4]
double = x.map(v => v * 2)var x = [1, 2, 3, 4]
double = x.map(function (v) { return v * 2; });var name = "Julia"
var message = "Hello " + name + "!"var name = "Julia"
var message = `Hello ${name}`React with Babel
var BabelIsAwesome = React.createClass({
render: function() {
return <div>I'm using Babel so the browser can understand me!</div>;
}
});var BabelIsAwesome = React.createClass({
displayName: "BabelIsAwesome",
render: function render() {
return React.createElement(
"div",
null,
"I'm using Babel so the browser can understand me!"
);
}
});It's all fun and games
until somebody showed you...
npm install babel-loader babel-core babel-preset-es2015 --save-dev
What The Webpack??
Module Bundler!
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel'
},
{
test: /\.json/,
loader: 'json-loader'
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.jpg$/,
loader: "file-loader"
}
]
}...
entry: [
'./index.js'
],
...
context: __dirname, // absolute path for the base directory
...
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
}, // set this up so Webpack knows how to write files to the disk
...So how do we actually use this file and bundle?
% webpack // in the same directory of your webpack.config.js
webpack-dev-server, oh my!
...
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
}, // set this up so Webpack knows how to write files to the disk
...// index.html
...
<body>
...
<script src="bundle.js"></script>
...
</body>
You Did It!!
webpack-dashboard demo
Thank You!
Julia Gao
@ryoia
react-babel-webpack
By ryoia
