React.js Tutorial Pt 1: A Comprehensive Guide to Building Apps with React.js

This post was last updated on 11/21/2015 and is using React 0.14

Table of Contents:
Pt I: A Comprehensive Guide to Building Apps with React.js.
Pt 1.5 (BONUS): Utilizing Webpack and Babel to build a React.js App
Pt II: Building React.js Apps with Gulp, and Browserify.
Pt III: Architecting React.js Apps with Flux.
Pt IV: Add Routing to your React App with React Router. (Coming Soon)
Pt V: Add Data Persistence to your React App with Firebase. (Coming Soon)
Pt VI: Combining React.js, Flux, React Router, Firebase, Gulp, and Browserify. (Coming Soon)

React.js The Bigger Picture:

By now you’ve probably heard about facebook’s React. You’ve probably even heard really good things. There has never been a better time to take the leap and start learning React. The difficulty starting out with React isn’t React itself. It’s important to remember React is “just the V in MVC” or “just the view layer”. Comparing React to Angular or React to Ember is unfair because React isn’t trying to be a full fledged framework. It’s just trying to be the view layer, which it’s really good at. This brings up issues for developers who are trying to learn React. React isn’t difficult to learn; putting all of the pieces together to build a full web application in React is.

As you’ve started to learn React you’ve probably ran into this problem. You read facebook’s documentation, read a few tutorials, maybe even watched some Egghead videos. You started feeling pretty comfortable with React. Then you realized “I feel comfortable with React, but I still don’t think I can actually build anything meaningful with it”. I think that’s a thought that everyone learning React has. This goes back to the point of React. If you just learned the “V” in MVC, you would still feel pretty worthless. This React.js tutorial series is going to focus on addressing that concern. We’re going to first start off learning about the fundamentals of React. You’ll get comfortable with React itself from props to state to JSX and everything in between. After learning about the fundamentals of React we’re going to jump into all of the other components (pun slightly intended) that are needed to build a full web application using React.js. We’ll cover how to use Gulp to set up a nice build process for converting React’s HTML like syntax called JSX to JavaScript. We’ll talk about using Browserify to tie all of our components together. We’ll then dive into the Flux architecture and see how Flux can help us structure and architect our React application in an efficient manner. Next we’ll talk about persisting our data with Firebase and using React Router for, you guessed it, introducing routing into our app. After that, we’ll put it all together and build a “Github Note Taker” app, an app that allows you to save notes and see a snapshot of a developers Github account (potentially useful for tech interviews where you want to take notes on a particular candidate). I realize this is a lot, but when I first started learning React I was frustrated with the lack of tutorials focused on putting all the pieces of React together. This tutorial series hopes to fill that gap.

As mentioned above, this blog series will have six parts.
Pt I: A Comprehensive Guide to Building Apps with React.js.
Pt II: Building React.js Apps with Gulp, and Browserify.
Pt III: Architecting React.js Apps with Flux.
Pt IV: Add Routing to your React App with React Router. (Coming Soon)
Pt V: Add Data Persistence to your React App with Firebase. (Coming Soon)
Pt VI: Combining React.js, Flux, React Router, Firebase, Gulp, and Browserify. (Coming Soon)

React.js Fundamentals:

Components are the building blocks of React. If you’re coming from an Angular background, components are very similar to Directives. If you’re coming from a different background, they’re essentially widgets or modules. You can think of a component as a collection of HTML, CSS, JS, and some internal data specific to that component. I like to think of React components as the Kolaches of the web. They have everything you need, wrapped in a delicious composable bundle. These components are defined either in pure JavaScript or they can be defined in what the React team calls “JSX”. If you decide to use JSX (which you most likely will, it’s pretty standard – and it’s what we’ll use for this tutorial), you’ll need some compile stage to convert your JSX to JavaScript, we’ll get to this later.

What makes React so convenient for building user interfaces is that data is either received from a component’s parent component, or it’s contained in the component itself. Before we jump into code, let’s make sure we have a high level understanding of components.

Reactjs Component Example

Above we have a picture of my Twitter profile. If we were going to re-create this page in React, we would break different sections up into different components (highlighted). Notice that components can have nested components inside of them. We might name the left component (pink) the “UserInfo” component. Inside the UserInfo component we have another component (orange), that we could call the “UserImages” component. The way this parent/child relationship works is our UserInfo component, or the parent component, is where the ‘state’ of the data for both itself and the UserImage component (child component) lives. If we wanted to use any part of the parent component’s data in the child component, which we do, we would pass that data to the child component as an attribute. In this example, we pass the UserImage component all of the images that the user has (which currently live in the UserInfo component). We’ll get more into the details of the code in a bit, but I want you to understand the bigger picture of what’s happening here. This parent/child hierarchy makes managing our data relatively simple because we know exactly where our data lives and we shouldn’t manipulate that data anywhere else.

The topics below are what I believe to be the fundamental aspects of React. If you understand all of them and their purposes, you’ll be at a very good spot after reading this tutorial.

JSX – Allows us to write HTML like syntax which gets transformed to lightweight JavaScript objects.
Virtual DOM  – A JavaScript representation of the actual DOM.
React.createClass – The way in which you create a new component.
render (method) – What we would like our HTML Template to look like.
ReactDOM.render – Renders a React component to a DOM node.
state – The internal data store (object) of a component.
getInitialState – The way in which you set the initial state of a component.
setState – A helper method for altering the state of a component.
props – The data which is passed to the child component from the parent component.
propTypes – Allows you to control the presence, or types of certain props passed to the child component.
getDefaultProps – Allows you to set default props for your component.
Component LifeCycle
componentWillMount – Fired before the component will mount
componentDidMount – Fired after the component mounted
componentWillReceiveProps – Fired whenever there is a change to props
componentWillUnmount – Fired before the component will unmount
Events
onClick
onSubmit
onChange

I know it seems like a lot, but you’ll soon see how each piece is fundamental in building robust applications with React (and I also wasn’t kidding when I said I wanted this to be a comprehensive guide).

At this point you should understand, on a very high level, how React works. Now, let’s jump into some code.

Creating your First Component (JSX, Virtual DOM, render, ReactDOM.render)

First, let’s go ahead and create our very first HelloWorld component so you can visualize how we use createClass to create a component. createClass takes in an object. This object is what will specify the different properties (render, getInitialState, propTypes) of the component.

Hello World Component Fiddle

var HelloWorld = React.createClass({
  render: function(){
    return (
      <div>
        Hello World!
      </div>
    )
  }
});

ReactDOM.render(<HelloWorld />, document.getElementById('app'));

Notice that the only method on the object we’re passing to createClass is the render method. Every component is required to have a render method. The reason for that is render is essentially the template for our component. So in this example the text that will show on the screen where this component is rendered is Hello World! A few more things about the code above. We’ve saved the result of calling our React.createClass constructor into a variable called HelloWorld. We do this because later on we’ll need to tell React to which element our component should be rendered. This is where ReactDOM.render comes into play. ReactDOM.render takes in two arguments. The first argument is the component you want to render, the second argument is the DOM node where you want to render the component. (Notice we’re using ReactDOM.render and not React.render. This was a change made in React .14 to make React more modular. It makes sense when you think that React can render to more things than just a DOM element). In the example above we’re telling React to take our HelloWorld component and render it to the element with an ID of app. Because of the parent/child child relations of React we talked about earlier, you usually only have to use ReactDOM.render once in your application because by rendering the most parent component, all child components will be rendered as well. If you want your whole app to be React, you would render the component to document.body.

Now at this point you might feel a little weird throwing “HTML” into your JavaScript. Since you started learning web development, you’ve been told that you should keep your logic out of the view, AKA keep your JavaScript uncoupled from your HTML. This paradigm is strong, but it does have some weaknesses. I don’t want to make this tutorial longer trying to convince you that this idea is a step in the right direction, so if this idea still bothers you you can check out this link. As you learn more about React, this uneasiness should quickly subside. The “HTML” that you’re writing in the render method isn’t actually HTML but it’s what React is calling “JSX”. JSX simply allows us to write HTML like syntax which gets transformed to lightweight JavaScript objects. React is then able to take these JavaScript objects and from them form a “virtual DOM” or a JavaScript representation of the actual DOM. This creates a win/win situation where you get the accessibility of templates with the power of JavaScript.

Looking at the example below, this is what your JSX is transformed to once React runs its transformation process.

Hello World Component in JS

var HelloWorld = React.createClass({
  displayName: "HelloMessage",
  render: function() {
    return React.createElement("div", null, "Hello World");
  }
});

Now, you can forgo the JSX -> JS transform phase and write your React components like the code above, but as you can imagine, that would be rather tricky. I’m unaware of anyone who is not using JSX.

Up until this point we haven’t really emphasized the importance of this new virtual DOM paradigm we’re jumping into. The reason the React team went with this approach is because, since the virtual DOM is a JavaScript representation of the actual DOM, React can keep track of the difference between the current virtual DOM (computed after some data changes), with the previous virtual DOM (computed befores some data changes). React then isolates the changes between the old and new virtual DOM and then only updates the real DOM with the necessary changes. In more layman’s terms, because manipulating the actual DOM is slow, React is able to minimize manipulations to the actual DOM by keeping track of a virtual DOM and only updating the real DOM when necessary and with only the necessary changes. (More info here). Typically UI’s have lots of state which makes managing state difficult. By re-rendering the virtual DOM every time any state change occurs, React makes it easier to think about what state your application is in.

The process looks something like this,

Signal to notify our app some data has changed→ Re-render virtual DOM  -> Diff previous virtual DOM with new virtual DOM -> Only update real DOM with necessary changes.

Because there’s this transformation process from JSX to JS, you need to set up some sort of transformation phase as you’re developing. In part 2 of this series I’ll introduce using Gulp with React and how to have your Gulp process include this JSX to JS transformation and more. For now, we’ll just stick with JSFiddle. If you’re interested in getting started without Gulp, check out the getting start guide here.

Let’s take a look back at our “Most Important Parts of React” checklist and see where we’re at now.

JSX – Allows us to write HTML like syntax which gets transformed to lightweight JavaScript objects.
Virtual DOM  – A JavaScript representation of the actual DOM.
React.createClass – The way in which you create a new component.
render (method) – What we would like our HTML Template to look like.
ReactDOM.render – Renders a React component to a DOM node.
state – The internal data store (object) of a component.
getInitialState – The way in which you set the initial state of a component.
setState – A helper method for altering the state of a component.
props – The data which is passed to the child component from the parent component.
propTypes – Allows you to control the presence, or types of certain props passed to the child component.
getDefaultProps – Allows you to set default props for your component.
Component LifeCycle
componentWillMount – Fired before the component will mount
componentDidMount – Fired after the component mounted
componentWillReceiveProps – Fired whenever there is a change to props
componentWillUnmount – Fired before the component will unmount
Events
onClick
onSubmit
onChange

We’re making good pace. Everything in bold is what we’ve already covered and you should at least be able to explain how those certain components fit into the React ecosystem.

Adding State to your Component (state)

Next on the list is “state”. Earlier we talked about how managing user interfaces is difficult because they typically have lots of different states. This area is where React really starts to shine. Each component has the ability to manage its own state and pass its state down to child components if needed. Going back to the Twitter example from earlier, the UserInfo component (highlighted in pink above) is responsible for managing the state (or data) of the users information. If another component also needed this state/data but that state wasn’t a direct child of the UserInfo component, then you would create another component that would be the direct parent of the UserInfo and the other component (or both components which required that state), then you would pass the state down as props into the child components. In other words, if you have a multi component hierarchy, a common parent component should manage the state and pass it down to its children components via props.

Let’s take a look at an example component using it’s own internal state.

Hello {name} With State

var HelloUser = React.createClass({
  getInitialState: function(){
    return {
      username: '@tylermcginnis33'
    }
  },
  render: function(){
    return (
      <div>
        Hello {this.state.username}
      </div>
    )
  }
});

We’ve introduced some new syntax with this example. The first one you’ll notice is the getInitialState method. From the definition above, the getInitialState method is “The way in which you set the state of a component”. In other terms, getInitialState returns an object which contains the state or data for our component. In the code above we’re telling our component that we want it to keep track of a username. This username can now be used inside our component by {this.state.username}, which is exactly what we do in our render method.

The last thing to talk about with state is that our component needs the ability to modify its own internal state. We do this with a method called setState. Remember earlier when we talked about the re-rendering of the virtual dom whenever the data changes?

Signal to notify our app some data has changed→ Re-render virtual DOM  -> Diff previous virtual DOM with new virtual DOM -> Only update real DOM with necessary changes.

That “signal to notify our app some data has changed” is actually just setState. Whenever setState is called, the virtual DOM re-renders, the diff algorithm runs, and the real DOM is updated with the necessary changes.

As a sidenote, when we introduce setState in the code below, we’re also going to introduce a few events that are on our list. Two birds, one stone.

So in the next code sample, we’re going to now have an input box that whenever someone types into it, it will automatically update our state and change the username.

Hello {name} with Ability to Change State Fiddle

var HelloUser = React.createClass({
  getInitialState: function(){
    return {
      username: '@tylermcginnis33'
    }
  },
  handleChange: function(e){
    this.setState({
      username: e.target.value
    });
  },
  render: function(){
    return (
      <div>
        Hello {this.state.username} <br />
        Change Name: <input type="text" value={this.state.username} onChange={this.handleChange} />
      </div>
    )
  }
});

Note we’ve introduced a few more things. The first thing is the handleChange method. This method is going to get called every time a user types in the input box. When handleChange is called, it’s going to call setState to re-define our username with whatever was typed into the input box (e.target.value). Remember, whenever setState is called, React creates a new virtual DOM, does the diff, then updates the real DOM.

Now let’s look at our render method. We’ve added a new line that contains an input field. The type of the input field is obviously going to be “text”. The value is going to be the value of our username which was originally defined in our getInitialState method and will be updated in the handleChange method. Notice there is a new attribute you’ve probably never seen before, onChange. onChange is a React thing and it will call whatever method you specify every time the value in the input box changes, in this case the method we specified was handleChange.

The process for the code above would go something like this.

A user types into the input box → handleChange is invoked → the state of our component is set to a new value → React re-renders the virtual DOM → React Diffs the change → Real DOM is updated.

Later on when we cover props, we’ll see some more advanced use cases of handling state.

 

React.js Program

If you enjoyed this post, check out React.js Program. It’s a program I built to help ease the pain of getting familiar with the React ecosystem (including Redux, ImmutableJS, React Native, Universal React, etc)


 

We’re getting there! If you can’t explain the items in bold below, go re-read that section. *and one tip on REALLY learning React. Don’t let passively reading this give you a false sense of security that you actually know what’s going on and can re-create what we’re doing. Head over to JSfiddle and try to recreate (or create your own) components without looking at what I’ve done. It’s the only way you’ll truly start learning how to build with React. This goes for this tutorial and the following to come.

JSX – Allows us to write HTML like syntax which gets transformed to lightweight JavaScript objects.
Virtual DOM  – A JavaScript representation of the actual DOM.
React.createClass – The way in which you create a new component.
render (method) – What we would like our HTML Template to look like.
ReactDOM.render – Renders a React component to a DOM node.
state – The internal data store (object) of a component.
getInitialState – The way in which you set the initial state of a component.
setState – A helper method for altering the state of a component.
props – The data which is passed to the child component from the parent component.
propTypes – Allows you to control the presence, or types of certain props passed to the child component.
getDefaultProps – Allows you to set default props for your component.
Component LifeCycle
componentWillMount – Fired before the component will mount
componentDidMount – Fired after the component mounted
componentWillReceiveProps – Fired whenever there is a change to props
componentWillUnmount – Fired before the component will unmount
Events
onClick
onSubmit
onChange

Receiving State from Parent Component (props, propTypes, getDefaultProps)

We’ve talked about props a few times already since it’s hard to really do much without them. By our definition above, props is the data which is passed to the child component from the parent component. This allows for our React architecture to stay pretty straight forward. Handle state in the highest most parent component which needs to use the specific data, and if you have a child component that also needs that data, pass that data down as props.

Here’s a very basic example of using props.

Very Basic Props Example

var HelloUser = React.createClass({
  render: function(){
    return (
      <div> Hello, {this.props.name}</div>
    )
  }
});

ReactDOM.render(<HelloUser name="Tyler"/>, document.getElementById('app'));

Notice on line 9 we have an attribute called name with a value of “Tyler”. Now in our component, we can use {this.props.name} to get “Tyler”.

Let’s look at a more advanced example. We’re going to have two components now. One parent, one child. The parent is going to keep track of the state and pass a part of that state down to the child as props. Let’s first take a look at that parent component.

Passing a list to a Child Component

Parent Component:

var FriendsContainer = React.createClass({
  getInitialState: function(){
    return {
      name: 'Tyler McGinnis',
      friends: ['Jake Lingwall', 'Murphy Randall', 'Merrick Christensen']
    }
  },
  render: function(){
    return (
      <div>
        <h3> Name: {this.state.name} </h3>
        <ShowList names={this.state.friends} />
      </div>
    )
  }
});

There really isn’t much going on in this component that we haven’t seen before. We have an initial state and we pass part of that initial state to another component. The majority of the new code will come from this child component so let’s take a closer look at that.

Child Component:

var ShowList = React.createClass({
  render: function(){
    var listItems = this.props.names.map(function(friend){
      return <li> {friend} </li>;
    });
    return (
      <div>
        <h3> Friends </h3>
        <ul>
          {listItems}
        </ul>
      </div>
    )
  }
});

Remember that the code that gets returned from our render method is a representation of what the real DOM should look like. If you’re not familiar with Array.prototype.map, this code might look a little wonky. All map does is it creates a new array, calls our callback function on each item in the array, and fills the new array with the result of calling the callback function on each item. For example,

Array.prototype.map

var friends = ['Jake Lingwall', 'Murphy Randall', 'Merrick Christensen'];
var listItems = friends.map(function(friend){
  return "<li> " + friend + "</li>";
});
console.log(listItems); // ["<li> Jake Lingwall</li>", "<li> Murphy Randall</li>", "<li> Merrick Christensen</li>"];

The console.log above returns [“<li> Jake Lingwall</li>”, “<li> Murphy Randall</li>”, “<li> Merrick Christensen</li>”]. Notice all that happened was we made a new array and added <li> </li> to each item in the original array.

What’s great about map is it fits perfectly into React (and it’s built into JavaScript). So in our child component above, we’re mapping over names, wrapping each name in a pair of <li> tags, and saving that to our listItems variable. Then, our render method returns an unordered list with all of our friends.

Let’s look at one more example before we stop talking about props. It’s important to understand that wherever the data lives, is the exact place you want to manipulate that data. This keeps it simple to reason about your data. All getter/setter method for a certain piece of data will always be in the same component where that data was defined. If you needed to manipulate some piece of data outside where the data lives, you’d pass the getter/setter method into that component as props. Let’s take a look at an example like that.

Passing a List to a Child Component with a Setter Method

var FriendsContainer = React.createClass({
  getInitialState: function(){
    return {
      name: 'Tyler McGinnis',
      friends: ['Jake Lingwall', 'Murphy Randall', 'Merrick Christensen'],
    }
  },
  addFriend: function(friend){
    this.setState({
      friends: this.state.friends.concat([friend])
    });
  },
  render: function(){
    return (
      <div>
        <h3> Name: {this.state.name} </h3>
        <AddFriend addNew={this.addFriend} />
        <ShowList names={this.state.friends} />
      </div>
    )
  }
});

var AddFriend = React.createClass({
  getInitialState: function(){
    return {
      newFriend: ''
    }
  },
  updateNewFriend: function(e){
    this.setState({
      newFriend: e.target.value
    });
  },
  handleAddNew: function(){
    this.props.addNew(this.state.newFriend);
    this.setState({
      newFriend: ''
    });
  },
  render: function(){
    return (
        <div>
          <input type="text" value={this.state.newFriend} onChange={this.updateNewFriend} />
          <button onClick={this.handleAddNew}> Add Friend </button>
        </div>
    );
  }
});

var ShowList = React.createClass({
  render: function(){
    var listItems = this.props.names.map(function(friend){
      return <li> {friend} </li>;
    });
    return (
      <div>
        <h3> Friends </h3>
        <ul>
          {listItems}
        </ul>
      </div>
    )
  }
});

You’ll notice the code above is mostly the same as the previous example, except now we have the ability to add a name to our friends list. Notice how I created a new AddFriend component that manages the new friend we’re going to add. The reason for this is because the parent component (FriendContainer) doesn’t care about the new friend you’re adding, it only cares about all of your friends as a whole (the friends array). However, because we’re sticking with the rule of only manipulate your data from the component that cares about it, we’ve passed the addFriend method down into our AddFriend component as a prop and we call it with the new friend once the handleAddNew method is called.

At this point I recommend you try to recreate this same functionality on your own using the code above as a guidance once you’ve been stuck for 3-4 minutes.

Before we move on from props, I want to cover two more React features regarding props. They are propTypes and getDefaultProps. I won’t go into too much detail here because both are pretty straight forward.

propTypes allow you to control the presence, or types of certain props passed to the child component. With propTypes you can specify that certain props are required or that certain props be a specific type.

getDefaultProps allow you to specify a default (or a backup) value for certain props just in case those props are never passed into the component.

I’ve modified our example from earlier to now, using propTypes, require that addFriend is a function and that it’s passed into the AddFriend component. I’ve also, using getDefaultProps, specified that if no array of friends is given to the ShowList component, it will default to an empty array.

Passing a List to a Child Component with a Setter Method with Default Props and Type Checking

var FriendsContainer = React.createClass({
  getInitialState: function(){
    return {
      name: 'Tyler McGinnis',
      friends: ['Jake Lingwall', 'Murphy Randall', 'Merrick Christensen'],
    }
  },
  addFriend: function(friend){
    this.setState({
      friends: this.state.friends.concat([friend])
    });
  },
  render: function(){
    return (
      <div>
        <h3> Name: {this.state.name} </h3>
        <AddFriend addNew={this.addFriend} />
        <ShowList names={this.state.friends} />
      </div>
    )
  }
});

var AddFriend = React.createClass({
  getInitialState: function(){
    return {
      newFriend: ''
    }
  },
  propTypes: {
    addNew: React.PropTypes.func.isRequired
  },
  updateNewFriend: function(e){
    this.setState({
      newFriend: e.target.value
    });
  },
  handleAddNew: function(){
    this.props.addNew(this.state.newFriend);
    this.setState({
      newFriend: ''
    });
  },
  render: function(){
    return (
      <div>
        <input type="text" value={this.state.newFriend} onChange={this.updateNewFriend} />
        <button onClick={this.handleAddNew}> Add Friend </button>
      </div>
    );
  }
});

var ShowList = React.createClass({
  getDefaultProps: function(){
    return {
      names: []
    }
  },
  render: function(){
    var listItems = this.props.names.map(function(friend){
      return <li> {friend} </li>;
    });
    return (
      <div>
        <h3> Friends </h3>
        <ul>
          {listItems}
        </ul>
      </div>
    )
  }
});

Alright, we’re on the last stretch for this first tutorial. Let’s take a look at our guide and see what we have left.

JSX – Allows us to write HTML like syntax which gets transformed to lightweight JavaScript objects.
Virtual DOM  – A JavaScript representation of the actual DOM.
React.createClass – The way in which you create a new component.
render (method) – What we would like our HTML Template to look like.
ReactDOM.render – Renders a React component to a DOM node.
state – The internal data store (object) of a component.
getInitialState – The way in which you set the initial state of a component.
setState – A helper method for altering the state of a component.
props – The data which is passed to the child component from the parent component.
propTypes – Allows you to control the presence, or types of certain props passed to the child component.
getDefaultProps – Allows you to set default props for your component.
Component LifeCycle
componentWillMount – Fired before the component will mount
componentDidMount – Fired after the component mounted
componentWillReceiveProps – Fired whenever there is a change to props
componentWillUnmount – Fired before the component will unmount
Events
onClick
onSubmit
onChange

We’re so close!

Component LifeCycle

Each component you make will have its own lifecycle events that are useful for various things. For example, if we wanted to make an ajax request on the initial render and fetch some data, where would we do that? Or, if we wanted to run some logic whenever our props changed, how would we do that? The different lifecycle events are the answers to both of those. Let’s break them down.

Component Life Cycle

var FriendsContainer = React.createClass({
  getInitialState: function(){
    alert('In getInitialState');
    return {
      name: 'Tyler McGinnis'
    }
  },

  // Invoked once before first render
  componentWillMount: function(){
      // Calling setState here does not cause a re-render
      alert('In Component Will Mount');
  },


  // Invoked once after the first render
  componentDidMount: function(){
      // You now have access to this.getDOMNode()
      alert('In Component Did Mount');
  },

  // Invoked whenever there is a prop change
  // Called BEFORE render
  componentWillReceiveProps: function(nextProps){
      // Not called for the initial render
      // Previous props can be accessed by this.props
      // Calling setState here does not trigger an additional re-render
      alert('In Component Will Receive Props');
  },

  // Called IMMEDIATELY before a component is unmounted
  componentWillUnmount: function(){},


  render: function(){
    return (
      <div>
        Hello, {this.state.name}
      </div>
    )
  }
});

componentWillMount: Invoked once before the initial render. If you were to call setState here, no re-render would be invoked. An example of this would be if you’re using a service like firebase, you’d set up your reference to your firebase database here since it’s only invoked once on the initial render.

componentDidMount – Invoked once after the initial render. Because the component has already been invoked when this method is invoked, you have access to the virtual DOM if you need it. You do that by calling this.getDOMNode(). Now it might seem like if you wanted to make AJAX requests you would do that in componentWillMount, but the devs at facebook actually recommend you do that in componentDidMount. So this is the lifecycle event where you’ll be making your AJAX requests to fetch some data.

componentWillReceiveProps – This life cycle is not called on the initial render, but is instead called whenever there is a change to props. Use this method as a way to react to a prop change before render() is called by updating the state with setState.

componentWillUnmount – This life cycle is invoked immediately before a component is unmounted from the DOM. This is where you can do necessary clean up. For example, going back to our firebase example this is the life cycle event where you would clean up your firebase reference you set in componentWillMount.

There are a few more life cycle methods, but the ones I’ve covered are the ones that I’ve seen which are the most useful.

Well, if you stuck with me until this point, great job. I hope this tutorial was beneficial to you and you now feel at least mildly comfortable with React. As I mentioned before, this is just part 1 of a 6 part tutorial series. If you have any suggestions or if this helped you out, let me know in the comments.

 

React.js Program

If you enjoyed this post, check out React.js Program. It’s a program I built to help ease the pain of getting familiar with the React ecosystem (including Redux, ImmutableJS, React Native, Universal React, etc)


 

Below are the remaining tutorials in the series.
Pt 1.5: Utilizing Webpack and Babel to build a React.js App
Pt II: Building React.js Apps with Gulp, and Browserify.
Pt III: Architecting React.js Apps with Flux.
Pt IV: Add Routing to your React App with React Router. (Coming Soon).
Pt V: Add Data Persistence to your React App with Firebase. (Coming Soon).
Pt VI: Combining React.js, Flux, React Router, Firebase, Gulp, and Browserify. (Coming Soon).
Tyler McGinnis
@tylermcginnis33

102 thoughts on “React.js Tutorial Pt 1: A Comprehensive Guide to Building Apps with React.js

  1. This really is one of the best/most complete intros to React I’ve seen. Great work. I’m excited to read the following tutorials.

  2. Awesome tutorial. Thank you.

    Just a small suggestion – would be nice to link to the latest ReactJS starter kit URL somewhere in this doc. I initially downloaded v0.11 and it didn’t work because I think React.render is new in v0.12. In v0.11 it was React.renderComponent.

    But so glad you’re writing up this tutorial using the latest ReactJS as well. Can’t wait for the rest!

  3. Excellent guide ! Wish i had seen it yesterday, then i didn’t have to figure out how to callback to parent components using properties myself 😉 Super, thx !

  4. I started learning REACT several months ago and I’ve never come across a tutorial for the framework, or actually any tutorial on client-side libraries, that is as comprehensive, not dry, and easy to understand enough that I can take your example and really apply the logic to my own app. I’m so thankful to have found this tutorial and I wish that more people wrote like you, so that beginners like me don’t feel so intimidated by building apps with js frameworks.

    I look forward to the other parts of your tutorial and hope that you write more tutorials on the other frameworks !

  5. Great stuff, Tyler! You explained everything extremely well and have me excited about React now. I’m looking forward to React Week next month in Provo.

  6. Fantastic Article. I am very excited to begin learning about this tool set. I run a web app programming club and will be featuring your article in our news letter this month.

  7. This is very helpful, thank you very much for your effort to make this tutorial series!
    Looking forward to all the React tutorials series lined up :)

  8. I’m a .net developer. All React + flux tutorials involve node.js. Any chance you or someone you know can create a tutorial using the Flux pattern and .net? I’d bet that there are a lot of .net developers who are/will be clamoring for this. Currently, there is a good starting point for react and .net (reactjs.net) but there is a complete dearth of info for using Flux on .net …

  9. Great start for me, thanks for the work you put into this! I got stumped when trying it out in jsFiddle, and learned that I had to fork the React Base Fiddle (http://jsfiddle.net/reactjs/69z2wepo/) and that just selecting React from within jsFiddle didn’t work.

    Other than that stumbling block, I found that everything was very well explained. Looking forward to your next articles in the series!

  10. It is really awesome explanation !. I tried to understand React by googling but it is the best article I found ever. Thanks a lot..Waiting eagerly for next articles in series .

  11. I would recommend adding the following so that gulp doesn’t crash when there’s a parse error:

    Adding this method at the bottom of your gulpfile.js

    function errorHandler (error) {
    console.log(error.toString());
    this.emit(‘end’);
    }

    Append every instance of .bundle() in the ‘watch’ task with the following:

    .on(‘error’, errorHandler)

    Giving credit where it’s due: http://stackoverflow.com/questions/24011349/gulp-error-events-js72

  12. Awesome post! I’m in Hack Reactor right now and we’re all passing this tutorial around for use in our thesis projects!

  13. “I realize this is a lot, but when I first started learning React I was frustrated with the lack of tutorials focused on putting all the pieces of React together. This tutorial series hopes to fill that gap” — EXACTLY so. I have the same problem, and your tutorial provides the best step by step intro to the React world. Cant wait for the next parts! :)

  14. This is a very helpful primer for those of us new to React. Really looking forward to reading & learning more about React in part II.

    Thanks!

  15. Hey. This tutorial is the best I have come by so far. I have gone through Part 1 – 3 so far and am looking forward to the rest. Do you have a timeline for when they’ll be available?

    Cheers!

    • Thanks James.

      As far as a timeline goes, not sure. Hopefully I’ll get the next one out in the next few weeks.

  16. This is the very best tutorial series I have ever come across searching online to learn React. Tyler, thumbs up for this great post. Can’t wait for the rest of parts.

  17. I’ve been studying React for about 2 weeks right now. Reading here and there, watching some videos and so on, I wasn’t able to get the big picture. Your tutorial did the trick, is written in such an easy and complete style that makes it a pleasure to learn, even for no english speakers like me. Thanks a lot, please keep up the good work :)

  18. Hi Tyler, best tutorial for beginners, even JS beginners like me!! (bow)
    I was kind of missing the HTML frame. It took me a while to understand to add your examples in my code. Looking forward to follow the second part of you tutorial.

  19. this is beautiful. poetry in code. you break up the subject into such simple parts and then combine them in a way that makes perfect sense. i am amazed by your clarity. i am looking at persistence between pages (once you do a location.href you lose state) and stuck( trying to capture an onClick event with data to next page ). that’s what led me to search more and I found you! i am very very new to reactJS and sooooooo glad i found your website! keep up the good work!

  20. Hey Tyler – just wanted to point out that you currently have 3 articles published but the “Bigger Picture” section still says “Coming Soon” for 2 of those 3 articles. Otherwise, thanks again for the wonderful series!

  21. How do you find the transformed HTML code? Is this somewhere in the developer tools in the browser for the local host?

  22. I have been learning React for a couple of months and I wish I had found your tutorial at the beginning.It’s truly exhaustive and simple at the same time.Thank you so much !!!

  23. This is undoubtedly the best React tutorial in the web so far!!! Please keep em coming. A million thanks!!! Really appreciate it!!!! :)

  24. This indeed is the best React tutorial out there. I am surprised, why would you not publish this as a video lesson?

    There’s a huge dearth of good video course (step-by-step, covering the concepts and implementation) on ReactJS. I don’t like the videos on Egghead and they also don’t seem to have any order.

  25. This is a nice tutorial. However, it’d be much easier to follow if one example is used and then as more materials are introduced the same example is expanded. Plus, adding the HTML section into the tutorial would make it an even more complete, comprehensive tutorial.

  26. Hey Tyler I really enjoyed your post and It has been really helpful. I’m currently attending Hack Reactor and we just started our thesis project. My group and I decided to learn React and I was wondering when the next three parts will be posted. I know this is a time consuming process, just want to know if it will be in the next couple of weeks!

    • I’m currently waiting for React Router 1.0 before I write the next tutorial. So odds are, it won’t be out in time for you guys. Feel free to check out my Egghead series though, that should do the trick.

  27. Spectacular tutorial. Detailed, thorough, clear, concise, and you don’t jump right from “hello world” to “now let’s build an entire blogging platform!” which is often a problem with internet tutorials. I’d already run through some React stuff and had a decent understanding of how to manipulate it, but this really helped me get how the guts of it work. Thanks for taking the time, and I’m looking forward to going through the rest (including those that are still upcoming).

  28. Fantastic tutorial, builds the whole thing from basics. I have just been through Part 1 and I think this is the best and easy to learn tut I have found over internet.
    One recommendation though – If you could include the link to libraries you have used, that will be awesome. I was confused as to which all js files, I need to have, before I figured out.

  29. Thank you very much Tyler for such comprehensive but easy to follow tutorial! If I ever going to write a tech article I now know where to look for an amazing example.

  30. Thanks for this wonderful tutorial, it made the props much more understandable. Bookmarked & looking forward to all the rest of the tutorials. Thank you again.

  31. This is ~*~*~*~AmAzInG~*~*~*~!
    Thank you so much for such a clear, thorough guide to React! It’s made learning much easier — I’m looking forward to reading more from you :)

  32. Tyler – thanks for putting this tutorial together! It was very helpful. The only thing I noticed is that ReactDOM.render() created errors for me and I had to use React.renderComponent() instead.

    Besides that, everything was great! Thanks for putting this together!

    Bob

  33. This is one of the best and lucid tutorials I have come across. This covers a lot of details in the right sequence. At the same time, it is not overwhelming at all. Look forward for more. Thanks for detailed information on React.

  34. You have a great writing style.

    The official ReactJS tutorial was very dry and a somewhat difficult read. Your tutorial is a breath of fresh air

  35. I’ve taken up Meteor and decided to embrace React since that’s the direction the Meteor community is going. Your tutorial is by far the most understandable, intuitive, concise offering I’ve found. A masterly presentation. And so now I’m thinking – if this guy can write so clearly about React and he’s recommending Firebase, Flux, Browserify and React Router, should I be heeding his recommendation? It’s just that I’m already comfortable with Meteor (and mongoDB and Flow Router) and turning toward your recommendations would require another huge learning curve. Is it worth it? What are the advantages? Any ideas about this would be most appreciated. Thanks much.

    • Hi Art! Thanks for the kind words. I try not to speak to things that I’m not confident in. I’ve never used Meteor and so I can’t frame my answer in terms of it, but I can tell you I really enjoy React, Redux, Firebase, Babel, and Webpack. It’s a solid stack and one that is going to be pretty future proof. If you want to get a glimpse of it, check out the React Fundamentals course I made at reactjsprogram.com. It’s free and I think it will be a great intro for you.

  36. I agree with the comments. This is by far the best React tutorial I have found and exactly what I was looking for. Easy to understand, very clear and well written, great step by step intro. I will definitely follow with the rest of the tutorials and the React.js Program.

    I see there is a small code difference on the addFriend method between this page and the JSFiddle sample. On Fiddle you first push the ‘friend’ to this.state.friends and then set the friends’ state to this.state.friends. On this page you use concatenation directly on setState.

    Since setState is the “signal to notify our app some data has changed”, is there a difference in the way both work or it’s exactly the same?

    Thanks and congrats on your tutorials Tyler!

  37. First time I tried going through this tutorial, I didnt know JS. I stopped midway and started on an adventure to know and be comfortable with JS. This time around armed with JS knowledge, I went through this tutorial and finished it…What a gem!!! Simply a masterpiece for beginners like me. God bless you. Keep sharing knowledge and keep up the good work. Now busy with your ReactJS Program…I feel elevated :-)

Leave a Reply

Your email address will not be published. Required fields are marked *