Written by Simon Bailey

Over the xmas holidays I had a look at React and was very impressed with the library from the facebook engineers. React is offered as the V in MVC specifically focusing on DOM manipluation. What makes React stand out from the crowd is its simplicity and a virtual DOM to increase performance with an added bonus that it can also render on the server using Node.js. I found its priniciple easy to grasp and was up and running in no time at all. I suggest running through the React tutorial to gain a quick understanding of how to get started building a simple app and understand component based logic.

Being a huge fan of automation using Yeoman and Grunt, I was keen on building a generator to scaffold out a React app. In this post I will go through the steps of how to build a simple React application using the Yeoman generator-react-webpack I wrote.

Module Loading

As you may notice the react-webpack generator includes Webpack. The React team recommend that each component should be an individual module and Webpack was my personal choice for module loading. The Webpack repository states:

Packs CommonJs/AMD/Labeled Modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jade, coffee, css, less, … and your custom stuff.

So basically you can have that Node.js module loading niceness in the browser. It’s well known there are other alternatives out there but it’s worth noting that Webpack offers some nice additional features in comparison. Its loaders mean file types such as CSS can also be used with the same require syntax. Sold!

Create The App

Install global dependencies

If you have not yet installed Yeoman, Grunt and Karma then go ahead and do that now:

sudo npm install -g yo grunt-cli karma

Install the generator-react-webpack:

sudo npm install -g generator-react-webpack

Generate the React app

mkdir react-grunt-example && cd $_
yo react-webpack

Run it

grunt serve

A browser should launch with the url localhost:8000 and display a page with the Yeoman logo :)

Included in the generated project is an example of animating in React using ReactTransitionGroup which is so nicely implemented by React engineers. For further insight to what’s going on with this scaffolding please refer to the README.

Create A Component

Let’s move the Yeoman image into its own image component. Using the react-webpack generator run:

Generate the component

yo react-webpack:component imagebox

Test it

grunt test

The output should show your first passing test :)

Add Imagebox to the main app

In ReactGruntExampleApp.js under the React require line of code add the following to import the Imagebox component:

var Imagebox = require('./Imagebox');

Next replace <img src={imageURL} /> with <Imagebox imageURL={imageURL}/>

Add the image

The aim is to load the Yeoman image into the new Imagebox component. The URL of the image is passed from parent to child e.g. ReactGruntExampleApp > Imagebox and data passed in this manner using React is called props.

In Imagebox.js replace <p>Content for Imagebox</p> with <img src={this.props.imageURL} />

Run the app

grunt serve

If all went well the app should render the exact same but now with the addition of our image refatored into it’s own component. This is a super simple example and we separated the image out for example purposes. Hopefully the react-webpack generator and this post should help get you started with React. If you have any suggested for the react-webpack generator please feedback via the repos.

Example Project

The react-webpack generator was based on an example project I wrote here. The project highlights some other small additions of functionality to the code above to take things a little further.