React Components

Components are the smallest, yet most fundamental part of React. They’re similar, in concepts, to things like widgets and modules. React defines itself as a library for building user interfaces. As such, when you think of a user interface you want to build (with React), you need to think of it in terms of the smallest possible components that you can define.

These components include code which defines how DOM elements are created and how users can interact with them. Components can be defined purely in JavaScript or they can be defined in a superset (or extended variation) of JavaScript called JSX. If you decide to use JSX for your component definitions, you may also need a compiler application, but we’ll get to that in a minute.

We’re going to be referring to pure JavaScript as JS and the React version of JavaScript as JSX.

You can find the accompanying source-code, for this tutorial, at: https://github.com/formativ/tutorial-react-components.

Please post any errors you find, or questions you have as comments on this article or as issues on GitHub.

Thanks to Pete Hunt for helping to improve this!

Embedded HTML

If you’ve been developing websites for a while, you may have flinched when I spoke about using HTML within your JavaScript. For the longest time, a development paradigm has existed which says that you should split HTML and JavaScript. Words like unobtrusive have been repurposed to express this kind of separation. That is exactly how I felt, until I started working with React.

The reason this paradigm exists is to decrease coupling (how much things depend on each other) and increase cohesion (how well different things work together). So we have created an environment in which we try our best to make HTML (and templates) as free of logic as possible. We then need to attach behaviour to this in the form of external scripts.

There are trade-offs with this approach to doing things. For starters, it takes more effort trying to keep these two things separate. There are many template engines and languages. There are also many template parsers to handle them all. And yet these languages (with the exception of HTML) still seem to include a modicum of logical operations…

Additionally, when we need to modify the contents of a web page, via JavaScript, we have to know about HTML and/or templates. How else can we know what to display and where to display it? We could load external templates, via additional HTTP requests, but how would we know where to put it without some knowledge of the DOM? We could load templates embedded within special script tags, but we would first need to fetch the contents of those script tags.

This brings us to the biggest problem with the separation of HTML and JavaScript: The only way we can get elements to attach behaviour to, and read data from, is by knowing about HTML elements in the document. Libraries like jQuery are built around the idea that HTML elements are only a CSS selector away from JavaScript.

These points from from a presentation I found at: http://www.slideshare.net/floydophone/react-preso-v2.

Components

Hopefully you’re willing to try this whole embedded HTML thing. In case not, I will create JS examples along with the JSX examples in this tutorial Let’s look at a simple component, just to get a feel for how one defines them:

/**
 * @jsx React.DOM
 */
  
var HelloWorld = React.createClass({
  render : function() {
    return <div>hello world!</div>;
  }
});

React.renderComponent(
  <HelloWorld />,
  document.body
);

The same code, in pure JavaScript looks much the same:

var HelloWorld = React.createClass({
  render : function() {
    return React.DOM.div({
      children : "hello world!"
    });
  }
});

React.renderComponent(
  HelloWorld({}),
  document.body
);

This is possible because JSX isn’t run directly in the browser. It may look that way in some examples, but there’s a script which converts JSX syntax into JS. For this to work, all the special JSX syntax needs to have a JS implementation. When you’re developing in JSX, you’re really just developing in an extended version of JavaScript.

You may also notice that the comment we began with, which had @jsx React.DOM in it, wasn’t required in the JS implementation. This is because the parser needs to see that in order for it to convert the JSX syntax to JS. Whether you are loading JSX from script elements within the same document, or loading external JSX scripts, you should always include this comment at the top of the script file.

The @jsx directive will allow you to run the parser tool on all your JS and JSX scripts, affecting only the JSX scripts.

Ignoring the React.DOM.div stuff, there’s not a lot to defining a component. Components will most often generate HTML for an interface. This is why we defined a render() method (on the JSON object we passed to the React.createClass() method).

Don’t be confused by the empty JSON object we pass to the HelloWorld() method. This gets handled in a different way, which we’ll see in later tutorials.

When we return, from within a render() method, we’re showing React what we want to component’s generated HTML to look like. There are a few different kinds of data that can be returned from within a render() method, but you will most often see DOM elements (or components) being returned.

You can find more examples of this in the React download, at: http://facebook.github.io/react/downloads.html.

Rendering Multiple Components

Another common question is how to return multiple components from within a single render() method. The trick is that only one component can be returned, at a time. To return multiple, they must be wrapped within a container element. This is because of how the JS methods work. Let’s look at some JSX code:

/**
 * @jsx React.DOM
 */
  
var HelloWorld = React.createClass({
  render : function() {
    return <span>hello</span><span> world!</span>;
  }
});

React.renderComponent(
  <HelloWorld />,
  document.body
);

This looks harmless enough. Instead of returning a single span, we want to return two. Look back to the previous JS implementation to see if you can figure out what’s wrong with this.

If we were to try and imagine what this would look like in JS (because no compiler should allow that), it might look something like this:

var HelloWorld = React.createClass({
  render : function() {
    return React.DOM.span({
      children : "hello"
    })React.DOM.span({
      children : " world!"
    });
  }
});

React.renderComponent(
  HelloWorld({}),
  document.body
);

You see what’s happening with the two calls to the React.DOM.span() method? Without something to wrap those elements, in a sensible manner, all we can expect is an error. So how can we achieve this? We can wrap them in a container element:

/**
 * @jsx React.DOM
 */
  
var HelloWorld = React.createClass({
  render : function() {
    return <div><span>hello</span><span> world!</span></div>;
  }
});

React.renderComponent(
  <HelloWorld />,
  document.body
);

This will work, and translates into a reasonable JS equivalent:

var HelloWorld = React.createClass({
  render : function() {
    return React.DOM.div({
      children : [
        React.DOM.span({
          children : "hello"
        }),
        React.DOM.span({
          children : " world!"
        })
      ]
    });
  }
});

React.renderComponent(
  HelloWorld({}),
  document.body
);

Wrapping the span elements in a container div element equates to them being passed as children in an array.

Hopefully you’re beginning to see the value of JSX over the traditional JavaScript approach. Considering you’re still talking about div’s and span’s, it boils down to the same thing. Only shorter.

Compiling JSX

If you look at the accompanying source-code, you will see how easy it is to embed and use JSX in your web pages. If you plan on using JSX in production systems, you will no doubt consider compiling the JSX files to JS files. There’s a tool you can use for this, and to install it you need to run the command:

npm install -g react-tools

This assumes you already have NodeJS and NPM installed. If not, there are resources to teach you how to do that.

Once that’s done, you should be able to run the following command:

jsx --watch src/ build/

This command will watch for file changes, in the src/ directory, and compile the corresponding .js files into the build/ directory. There are other uses for this command, but that’s a subject for another time!

You can find more information, about the tools available, at: http://facebook.github.io/react/docs/tooling-integration.html.

Conclusion

Components are at the heart of React, and understanding them is essential to understanding how to build solid React interfaces. We’ve taken a brief look at a few examples, but there’s so much more to components. Stay tuned!

If you enjoyed this tutorial; it would be helpful if you could click the Recommend button and share it with other developers.