Intro to JSX Build with Browserify and Webpack

My talk at the first ReactJS meetup hosted by Hubspot at the Spencer hotel, Dublin, on November 25, 2015.

The talk covers JSX fundamentals, the compilation transform, the Babel compiler, and its integration with popular build and workflow tools: Browserify, Webpack, and Gulp.

Please rate my talk! Feedback is much appreciated :-) http://speakerrate.com/talks/64961-intro-to-jsx-build-with-browserify-and-webpack

Event: http://www.meetup.com/ReactJS-Dublin/events/225506994/
Recording: https://www.youtube.com/watch?v=-fTS6_37yZ4

Transcript

1. BUILDING REACT INTRO TO JSX BUILD WITH BROWSERIFY AND WEBPACK Claudio Procida @claudiopro
2. 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
3. JSX AT A GLANCE // Declaration of a class var Avatar = React.createClass({ render: function() { return ( ; } }); // Call to render a component ReactDOM.render( <div> <img src={'https://graph.facebook.com/' + this.props.userid + '/picture'} /> </div> ) <Avatar userid="claudiopro" />, attachPoint);
4. 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
5. 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 = <Avatar userid="claudiopro" />; // Output (JS): var app = React.createElement(Avatar, { userid : "claudiopro" });
6. NESTED TRANSFORM JSX also allows specifying children using XML syntax: var Avatar = require('./Avatar'), Nav = require('./Nav'); // Input (JSX): var app = <Nav><Avatar userid="claudiopro"/></Nav>; // Output (JS): var app = React.createElement(Nav, null, React.createElement(Avatar, { userid : "claudiopro" }) );
7. BUILD TOOLS Babel Browserify Webpack
8. BABEL A JavaScript compiler Built out of composable plugins to create your own transformation pipeline Ships with built-in support for JSX
9. 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
10. BABEL PRESETS Groups of plugins for common build profiles e.g. React ES6 Experimental syntax, grouped by stage
11. BABEL CONFIG FILE A .babelrc file at top level in your project Supports all flags accepted by the babel binary
12. 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"] }
13. BABEL TRANSFORMS In browser transform CLI Build babel-node Self-service REPL
14. 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: <script src="node_modules/babel-browser/browser.js"></script> <script type="text/babel"> class Test { test() { return "test"; } } new Test().test(); // "test" </script>
15. 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
16. 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.
17. SELF SERVICE REPL Try out JSX on the online Babel REPL
18. 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: <Nav userid="claudiopro"/>; babel script.js # Outputs: dom(Nav, { userid: "claudiopro" });
19. 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)
20. BABELIFY Babel transform for Browserify Requires plugins or presets https://github.com/babel/babelify
21. BABELIFY: CLI Pass babelify as value of the -t option Accepts subarg's browserify app.js -o bundle.js \ -t [ babelify --presets [ es2015 react ] ]
22. 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')); });
23. REACTIFY React transform for Browserify Based on the deprecated react-tools https://github.com/andreypopp/reactify
24. REACTIFY: CLI Pass reactify as value of the -t option Accepts subarg's browserify app.js -o bundle.js -t reactify
25. 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')); });
26. 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
27. 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
28. 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' } ] } };
29. 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(); }); });
30. 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(); }); });
31. 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
32. FURTHER READING Babel blog - React blog - http://babeljs.io/blog/ http://facebook.github.io/react/blog/
33. THANK YOU! Claudio Procida @claudiopro