Check out myAngular article series with live demos and Facebook group Angular - Advanced Topics

Converting React jsx files using Webpack

Torgeir "Tor" Helgevold
- JavaScript Developer and Blogger
Published: Sun Mar 29 2015

In this post I will demonstrate how to use Webpack to bundle React jsx files into regular JavaScript code.

A great thing about Webpack is that it allows us to seamlessly automate the jsx conversion, but we can also tell it to refresh the browser to reflect component changes on the page immediately.

I will be using the following React component consisting of two jsx files.

MessageComponent.jsx

'use strict'; var React = require('react'); module.exports = React.createClass({ displayName:'GreetingComponent', render: function(){ var msg = 'Hello, how are you?'; return <div>{msg}</div> } })

index.jsx

'use strict'; var React = require('react'); var GreetingComponent = require('./messageComponent'); React.render(<GreetingComponent />, document.getElementById('content'));

As you can tell I am using CommonJS to import the message component into the jsx file where the rendering is initiated.

I will be relying on npm to add the necessary dependencies, so to get the general setup you may use the following package.json file:

{ "scripts": { "start": "npm run serve | npm run dev", "serve": "./node_modules/.bin/http-server -p 8080", "dev": "webpack-dev-server --progress --colors --port 8090", "build": "webpack --progress --colors" }, "devDependencies": { "jsx-loader": "^0.12.2", "webpack": "^1.4.15", "http-server": "^0.8.0" }, "dependencies": { "react": "0.13.0" } }

Package.json defines all dependencies, but it also defines tasks for creating the JavaScript bundle.

Under scripts I have added a start task that allows us to start two simple web servers for development – one for running the test page and a second one for serving/refreshing the JavaScript bundle realtime.

The final configuration step is to create a webpack.config.js file to tell Webpack how to do the jsx conversion.

module.exports = { entry: {bundle1:['./react_components/index.jsx','./react_components/messageComponent.jsx']}, output: { path: './build', filename: "bundle.js", publicPath: 'http://localhost:8090/assets' }, module: { loaders: [ { test: /\.jsx$/, loader: 'jsx-loader?insertPragma=React.DOM&harmony' } ] }, externals: { 'react': 'React' }, resolve: { extensions: ['', '.js', '.jsx'] } }

Lastly we have to add a sample html page to test the component.

<html> <head> <title>Webpack React component Demo</title> <script src="./node_modules/react/dist/react.min.js"></script> </head> <body> <div id="content"/> <!--Serve assets during development with automatic refresh when JSX files change --> <script src="http://localhost:8090/webpack-dev-server.js"></script> <script type="text/javascript" src="http://localhost:8090/assets/bundle.js"></script> <!--Serve assets in production using a static file --> <!--script type="text/javascript" src="build/bundle.js"></scrip>--> </body> </html> </div>

As you can tell the script reference to the JavaScript bundle comes in two flavors:

Development

During development the bundle is recreated automatically as you are editing the jsx files. In fact it will even refresh the page to instantly reflect the new JavaScript file.

To launch the test page in development mode use: npm run start

Production

Production files will be static and included using traditional script tags (shown commented out in the sample above).

To trigger a static build of your bundle use: npm run build

If you liked this article, share it with your friends on social media:

We also have a new Facebook group about advanced Angular topics.

I invite you to follow me on twitter