MVC is a very popular paradigm in web development and has been around for quite some time. The React framework is an powerful part of that Model-View-Controller trinity, because it focuses purely on the View alone. React is written in JavaScript and created by the Facebook and Instagram development teams.

React is being used all over the web to create rapid web applications that are easy to maintain due to the way the React framework structures the view layer code.

This example will render ‘Hello John’ into a <div> container. Take notice of the XML/HTML-like syntax that is used on lines 3 and 8. This is called JSX.

What’s JSX?

JSX is an XML/HTML-like syntax which is used to render HTML from within JavaScript code. React transforms JSX into native JavaScript for the browser, and with the tools provided you can convert your existing sites’ HTML code into JSX!

JSX makes for easy code-mingling as it feels just like writing native HTML but from within JavaScript. Combined with Node, this makes for a very consistent workflow.

JSX is not required to use React—you can just use plain JS—but it is a very powerful tool that makes it easy to define tree structures with and assign attributes, so I do highly recommend its usage.

To render an HTML tag in React, just use lower-case tag names with some JSX like so:

Installing React

There are several ways to use React. The officially recommended way is from the npm or Facebook CDN, but additionally you can clone from the git and build your own. Also you can use the starter kit or save time with a scaffolding generator from Yeoman. We will cover all of these methods so you have a full understanding.

Using the Facebook CDN

For the fastest way to get going, just include the React and React Dom libraries from the fb.me CDN as follows:

Installation From NPM

The React manual recommends using React with a CommonJS module system like browserify or webpack.

The React manual also recommends using the react and react-dom npm packages. To install these on your system, run the following at the bash terminal prompt inside your project directory, or create a new directory and cd to it first.

To activate nvm with this method, you need to source it from shell with:

. ~/.nvm/nvm.sh

Note: Add this line to your ~/.bashrc, ~/.profile, or ~/.zshrc files respectively to have it automatically sourced upon login.

Using NVM

With nvm now installed, we can get any version of node we require, and can check the list of installed versions with node list and the ones available with node ls-remote. We need a version higher than 4.0.0 to work with React.

Install the newest version and set it as the default version with the following:

So to recap, with babel we can load JSX directly inside a script tag via the text/babel type attribute. This is good for development purposes, but for going to production we can provide a generated JavaScript file which can be cached on the user’s local machine.

Generation of this copy is done on the command line, and as this is a repetitive task I highly recommend automating the process via using the --watch flag. Or you can go a step further and utilize webpack and browsersync to fully automate your development workflow. To do that in the easiest path possible, we can automate the setup of a new project with a Yeoman generator.

Installing With Yeoman Scaffolding

Yeoman is a very useful tool for starting projects quickly and with an optimal workflow and tool configuration. The idea is to let you spend more time on development than configuration of the project’s work area, and to minimize repetitive tasks (be aware of this—RSI is the number one reason coders stop coding). So as a best practice, saving time with tools and implementing D.R.Y (Don’t Repeat Yourself) in your day-to-day life will boost your health and efficiency, and let you spend more time doing actual code rather than configuration.

There are a lot of scaffoldings out there, coming in many flavours for different scales of project. For this first example we will be using the react-fullstack scaffolding from the Yeoman generators; you can see a demo of what the end result looks like.

Note: This is a fullstack configuration, which is probably overkill for any small projects. The reason I select this scaffolding is to give you a fully set-up environment, so you can see how the starter kit fleshes out into a larger app. There’s a header and footer, and you can see where a user login and register feature will go, although they are not coded yet in the example.

Usage

To use yeoman, first install it, and if you do not have yeoman’s required counterparts gulp, bower and grunt-cli, install them as so:

$ sudo npm install -g yo bower grunt-cli gulp

Now install the React scaffolding with:

$ sudo npm install -g generator-react-fullstack

Now create a directory for your project and cd to it:

$ mkdir react-project
$ cd react-project

Finally use the yo command with the React-fullstack scaffolding generator to create your react app inside the directory:

$ yo react-fullstack

Yeoman will now create the directories and files required; you will be able to see updates about this in the command line.

With the scaffolding now set up, let’s build our project:

$ npm start

By default we start in debug mode, and to go live we just add the -- release flag, e.g. npm run start -- release.

You will now see the build starting and webpack initializing. Once this is done, you will see the webpack output telling you detailed information about the build and the URLs to access from.

Access your app via the URLs listed at the end of the output, with your browser by default at http://localhost:3000. To access the browser sync admin interface, go to http://localhost:3001.

Note: You may need to open the port on your server for the development port. For ubuntu / debian users with ufw, do the following:

$ ufw allow 3001/tcp
$ ufw allow 3000/tcp

Converting Your Existing Site to JSX

Facebook provides an online tool if you need to just convert a snippet of your HTML into JSX.

For larger requirements there is a tool on npm for that named htmltojsx. Download it with:

npm install htmltojsx

Using it via the command line is as simple as:

$ htmltojsx -c MyComponent existing_code.htm

Because htmltojsx is a node module, you can also use it directly in the code, for example:

Note: the latest version of linter-eslint was making my MacBook Pro very slow, so I disabled it.

Once that is done, we can get going on creating a basic list within the scaffolding we made in the prior step with Yeoman, to show you a working example of the data flow.

Make sure your server is started with npm start, and now let’s start making some changes.

First of all there are three jade template files provided in this scaffolding. We won’t be using them for the example, so start by clearing out the index.jade file so it’s just an empty file. Once you save the file, check your browser and terminal output.

The update is displayed instantly, without any need to refresh. This is the webpack and browsersync configuration that the scaffolding has provided coming into effect.

Next open the components directory and create a new directory:

$ cd components
$ mkdir UserList

Now, inside the UserList directory, create a package.json file with the following:

Now when we save, the webpack will rebuild and browsersync will display the changes in your browser. Take a look at the source code to see how it was rendered.

Summary

We have used the Yeoman scaffolding generator react-fullstack to start a React web app based on the starter kit. For a further explanation of the file and directory layout, check out the readme in the react starter kit git repo.

From here we edited the index.jade file so it was nulled out and began creating our own display view, making a new component named UserList.

Inside components/UserList/UserList.js we define how the list will be rendered with:

Inside ContentPage.js we call the UserList component with the JSX <UserList data={listData} />.

Now the UserList component can access the data attribute via this.props.data.

Any time we pass a value with an attribute of a component, it can be accessed via this.props. You can also define the type of data that must be provided by using the propTypes static variable within its class.

Extended Components vs. React.createClass Syntax

Finally, an important point to note is that this example made use of extended components. This has a lot of benefits for semantically structuring your code. But you may wish to access a more bare-bones approach, as many other examples do.

So instead of class ComponentName extends Component that you have seen before in this tutorial, you create a React class with the following syntax for example:

Well that wraps us up for this introduction to React. You should now have a good understanding of the following:

getting React

how to use Babel with React

using JSX

creating a component via extend method

using your component and passing it data

In the coming parts, we will discuss how to use JSX further, how to work with a database as a persistent data source, and also how React works with other popular web technologies such as PHP, Rails, Python and .NET.