BUILDING REACT INTRO TO JSX BUILD WITH BROWSERIFY AND WEBPACK Claudio Procida @claudiopro 

WHAT IS JSX? It's an XML-like syntax to describe components It is embedded into JavaScript code It's syntactic sugar for React primitives 

JSX AT A GLANCE // Declaration of a class var Avatar = React.createClass({ render: function() { return ( ; } }); // Call to render a component ReactDOM.render( ) , attachPoint); 

GOTCHAS React has a whitelist for HTML element names and attributes. If you pass elements or attribute names that are not in the list, React will not render them You can pass JavaScript strings as content or attribute values. Note that React performs escaping on dynamic content 

SIMPLE TRANSFORM React JSX transforms from XML-like syntax into JavaScript. XML elements, attributes and children are transformed into arguments passed to React.createElement var Avatar = require('./Avatar'); // Input (JSX): var app = ; // Output (JS): var app = React.createElement(Avatar, { userid : "claudiopro" }); 

NESTED TRANSFORM JSX also allows specifying children using XML syntax: var Avatar = require('./Avatar'), Nav = require('./Nav'); // Input (JSX): var app = ; // Output (JS): var app = React.createElement(Nav, null, React.createElement(Avatar, { userid : "claudiopro" }) ); 

BUILD TOOLS Babel Browserify Webpack 

BABEL A JavaScript compiler Built out of composable plugins to create your own transformation pipeline Ships with built-in support for JSX 

BABEL PLUGINS Syntax parsers for new or experimental syntax e.g. Object rest/spread operators Transforms e.g. ES6 modules to RequireJS or AMD Miscellaneous e.g. undeclared variable check 

BABEL PRESETS Groups of plugins for common build profiles e.g. React ES6 Experimental syntax, grouped by stage 

BABEL CONFIG FILE A .babelrc file at top level in your project Supports all flags accepted by the babel binary 

GETTING STARTED Install Babel and React preset to your project Configure .babelrc # Install with npm npm install babel-cli -g # Install the react preset and save to package.json npm install babel-preset-react --save-dev { "presets": ["react"] } 

BABEL TRANSFORMS In browser transform CLI Build babel-node Self-service REPL 

IN BROWSER TRANSFORM Not for production use! Use browser.js version that can run in a browser Available as babel-browser npm module, or from a CDN Transforms and runs scripts with type text/ecmascript-6 and text/babel: class Test { test() { return "test"; } } new Test().test(); // "test" 

CLI BUILD # Compile a file script.js and write to script-compiled.js babel script.js --out-file script-compiled.js # Watch an entire directory src for changes, and write to dist babel src --watch --out-dir dist # Uses the transform-react-jsx plugin babel --plugins transform-react-jsx script.js # Uses the react and es2015 presets babel --presets es2015,react script.js 

BABEL-NODE Comes with babel-cli Do not use in production: very heavy because it stores the cache in memory Compiles code on the fly before executing with node. 

SELF SERVICE REPL Try out JSX on the online Babel REPL 

BEYOND JSX Psst: babel can compile to any Virtual DOM library e.g. Yolk, Riot, ... Use the pragma setting in .babelrc: Compiles to the desired library: { "plugins": [["transform-react-jsx", { "pragma": "dom" }]] } # script.js: ; babel script.js # Outputs: dom(Nav, { userid: "claudiopro" }); 

BROWSERIFY Compiles node modules to run in the browser Aggregates CommonJS modules Allows composible transforms, e.g. brfs, amdify Generates source maps (with -d option) 

BABELIFY Babel transform for Browserify Requires plugins or presets https://github.com/babel/babelify 

BABELIFY: CLI Pass babelify as value of the -t option Accepts subarg's browserify app.js -o bundle.js \ -t [ babelify --presets [ es2015 react ] ] 

BABELIFY: GULP var gulp = require('gulp'), browserify = require('browserify'), babelify = require('babelify'), source = require('vinyl-source-stream'); gulp.task('build', function() { browserify('./app.js') .transform(babelify, {presets: ['es2015', 'react']}) .bundle() .pipe(source('main.js')) .pipe(gulp.dest('./dist')); }); 

REACTIFY React transform for Browserify Based on the deprecated react-tools https://github.com/andreypopp/reactify 

REACTIFY: CLI Pass reactify as value of the -t option Accepts subarg's browserify app.js -o bundle.js -t reactify 

REACTIFY: GULP var gulp = require('gulp'), browserify = require('browserify'), reactify = require('reactify'), source = require('vinyl-source-stream'); gulp.task('build', function() { browserify('./app.js') .transform(reactify) .bundle() .pipe(source('main.js')) .pipe(gulp.dest('./dist')); }); 

WEBPACK Extensible module bundler Works with AMD, CommonJS, ES6 modules, etc. Bundles not just JavaScript, but also CSS, HTML templates, images, fonts, ... Loaders trasform everything to JavaScript Extensible via plugins Splits code in chunks loadable on demand 

WEBPACK: CLI Accepts several command line options # Install with npm: npm install -g webpack # Use the default webpack.config.js # if exists, and watches files: webpack app.js --watch # Uses a different config file: webpack app.js --config other.config.js 

WEBPACK: CONFIG Controls entry points, chunks, loaders, plugins, ... Pure JS object, file must export it module.exports = { entry: './app.js', output: { path: './dist', filename: '[id].bundle.js' }, module: { loaders: [ { test: /\.jsx?/, exclude: /node_modules/, loader: 'babel-loader' } ] } }; 

WEBPACK: GULP The short way: var gulp = require('gulp'), util = require('gulp-util'), webpack = require('webpack'), config = require('./webpack.config.js'); gulp.task('build', function(callback) { // run webpack webpack(config, function(err, stats) { if (err) throw new util.PluginError('build', err); util.log('build', stats.toString({ colors: true })); callback(); }); }); 

WEBPACK: GULP The long way: var gulp = require('gulp'), util = require('gulp-util'), webpack = require('webpack'), config = require('./webpack.config.js'); gulp.task('build', function(callback) { // returns a Compiler instance var compiler = webpack(config); compiler.run(function(err, stats) { callback(); }); // or compiler.watch({ // watch options }, function(err, stats) { callback(); }); }); 

DEPRECATED JSXTransformer.js - Legacy script for in-browser transform, transforms and run scripts with type text/jsx - A set of complementary tools to React, including the jsx transformer - A simple utility for pluggable JS syntax transforms using the Esprima parser react-tools jstransform 

FURTHER READING Babel blog - React blog - http://babeljs.io/blog/ http://facebook.github.io/react/blog/ 

THANK YOU! Claudio Procida @claudiopro