Getting started with React the easy way

Tags:

There’s a lot of talk lately about how it’s hard to get started with JavaScript libraries like React. You need ES6, you need Babel, you need this, you need that. If all you want is to try a library, there’s tons of technobabble getting in your way, sometimes involving so many steps it’s easier to just go and do something else instead.

But that should not be the case. Most libraries – React included – don’t require anything fancy to get started. In fact, it’s better to start with a simple setup. You can always add the fancy extras to it later when you need them.

Let me show you the easiest way of getting started with React. Spoiler: it only requires two script tags on an HTML page.

A piece by piece approach

The main issue with packages like React is that they require a lot of individual pieces to be set up.

However, who said we have to install all pieces at the same time?

If we follow React’s getting started guide, Here’s a list of all the things we need to understand to some level:

  • React itself
  • JSX
  • Nodejs and npm
  • Browserify or Webpack
  • Babel

If you just want to try React and see how it works, and maybe decide if you want to use it in your project, who wants to deal with all that?

Instead of all of the above, what you only need is:

  • React itself
  • optionally, JSX, which I do recommend as it is quite convenient and nearly all sample code uses it

Instead of installing everything at once, we can install these piece by piece. This means we can start with plain React, and add JSX if we want. Later once we are more familiar with React itself, we can move on and include the other pieces of the puzzle, such as Browserify.

Step 1: just plain React

OK, so you want to try using React and maybe see if you like it. Let’s skip all the nonsense and simply set up React itself with nothing else.

All you need is an HTML page which looks like this:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      // you can put your code here or include them as another script tag.
    </script>
  </body>
</html>

It doesn’t get any more simpler than that. Just two script tags and that’s it – Ready to React (pretend that was a funny wordplay).

The only limitation of this method is you don’t get JSX. Instead, you need to use React.createElement. We’ll look more at JSX in the next step, but for now, let’s keep things simple and add some React-code.

In the spirit of KISS, let’s put this code into the script tag in the body:

var App = React.createClass({
  displayName: 'App',
  render: function() {
    // The second parameter is an object of attributes for the element (if any)
    return React.createElement('div', { }, 'Something something Dark Side');
  }
});
 
ReactDOM.render(
  React.createElement(App),
  document.getElementById('app')
);

This makes React display the message “Something something Dark Side” on the page. It does this by creating a basic App component, which just renders a div with the message. Lastly, it uses ReactDOM.render to render it into the page.

Here’s an example JSFiddle showing how this would work. Note that it’s slightly different from the example HTML here due to how JSFiddle works.

In most React examples you won’t see React.createElement like here. Instead, they make use of JSX which replaces that with an XML-like syntax. It’s 100% doable to build a React application without JSX, but since most examples use it and it’s quite convenient, the next step is to enable it in our app.

Step 2: Adding JSX into the mix

JSX is React’s special sauce which allows you to embed markup into your JavaScript code. This makes declaring components more intuitive, as the structure is familiar to anyone who knows HTML.

Using JSX requires Babel, a transpiler which takes your JSX code and converts it into plain JavaScript so the browser understands it. As a side-benefit of using Babel, we get the ability to use ES6/ES2015 features in our code. There are a number of useful features available as a result, but using them is completely optional.

If you’re just experimenting with React, you can include Babel in your HTML page. This means the JSX code is changed on-the-fly by the browser. This can make page loads slower than otherwise, so it’s not recommended for production apps.

We can take the earlier HTML page and change it just a little:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      // Code omitted to keep sample short
    </script>
  </body>
</html>

We added a third script tag to include Babel. We also included type="text/babel" into the script tag for our code – this is an important step to remember, as otherwise Babel will not detect it has to transform the code and you’ll end up with an error.

Now you’re ready to use JSX or ES6 in your code, so let’s take our earlier App component and update it to use JSX.

var App = React.createClass({
  render: function() {
    return <div>Something something Dark Side</div>;
  }
});
 
ReactDOM.render(
  <App />,
  document.getElementById('app')
);

Example JSX JSFiddle. Note that in JSFiddle, you can run JSX by making the JavaScript panel use Babel.

You can also include external JavaScript or JSX files as script tags. Just remember to include the type="text/babel" attribute. For example, let’s move the code out of the script tag and into a new file. We’ll remove the old script and put this in its place:

<script src="src/main.js" type="text/babel"></script>

While we can keep our code in a single file as it’s quite simple, it makes sense to split each of your components into its own file. This often makes your code easier to maintain, as each component is in its own file. For example, we would take the app component and put it into src/App.js, and include that on our page before src/main.js.

From this point on, you’re ready to build a React app. You can for example follow the official React tutorial.

This simple script-tag based approach works well for prototyping small applications. However, when you start having a bit more code, it makes sense to continue to the next step below.

Step 3: Pulling everything together

With both React and JSX set up, you can go on your merry way and build your React app. You don’t need to concern yourself with any of the other pieces until you want to.

However there comes a point where you start having a bit more code and including all of it as script tags becomes a chore. You also don’t want to use the on-the-fly JSX transformation for production applications due to the performance issue. At that point, it’s time to start looking into the more advanced tools. Even though these tools need a bit of set up and understanding, ultimately they make the React-experience much better.

For this step, you’ll need to set up:

  • Nodejs and NPM: Follow the instructions on nodejs.org
  • React as an NPM module: with node installed, go to your project’s directory and run npm install react react-dom
  • Browserify: npm install -g browserify
  • Babel: npm install babelify babel-preset-react

This sets up React and the necessary tools in a way that we can bundle everything in a single file. To do so, we’ll use Browserify with the following command:

browserify -t [ babelify --presets [ react ] ] src/main.js -o build.js

Unless you enjoy memorizing complex commands, I recommend putting the command into its own little shell script or using npm scripts, so you don’t have to type all that every time.

The idea is that Browserify combines all our individual script files and libraries like React into a single file – in our case, build.js. We also use the -t flag to run Babelify with the React preset, which converts JSX into plain JS.

The result is that if we install all our libraries via NPM, we only need to include the final build.js file in our HTML page:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div id="app"></div>
    <script src="build.js"></script>
  </body>
</html>

In order to make our scripts work with Browserify, we need to use require to load them, similar to how you would do it in Node.js applications. This means we need to do a couple of small modifications to the script files.

Changes to src/main.js:

var ReactDOM = require('react-dom');
 
var App = require('./src/App');
 
ReactDOM.render(
  <App />,
  document.getElementById('app')
);

Note we are now including ReactDOM and our App component via require.

And lastly, a minor change to src/App.js component:

var React = require('react');
 
module.exports = React.createClass({
  render: function() {
    return <div>Something something Dark Side</div>;
  }
});

Similar to main.js, we’ve added a require for React. In addition, instead of declaring var App, we assign the class into module.exports. This means the value we assign is what we get when the file is required, such as in the main.js file.

In closing

Using a piece by piece approach like this can be applied to many things. I often see developers looking for boilerplates and templates – when they don’t even understand half of what those do. Why not just start with what you need, and add to it later? You’ll end up with less code and less complexity.

Interested in learning more React without all the hassle? I’m writing a series of articles on building a React app. Check out getting started and building a basic prototype!