Learn about the key technologies of Facebook's React framework by building a comment component.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Class: Getting Started With React

Get Started

The React UI framework from Facebook allows us to make reactive user interface components that render in the browser or on the server. You can create components using a combination of html markup and JavaScript by using something called JSX. In this class you'll get a tour of the React framework by building a simple comment system. The tutorial is similar to the one found on the official React tutorial page with a few differences. First, you'll be building the comment system using ES6 ("Harmony"), the next major release of JavaScript. I'll also carefully explain each of the critical concepts as we build each component and add features.

What's in this class?

  • What Is React? - React is a user interface framework built by Facebook to build reactive user interfaces in JavaScript. These UI components can be rendered on the server or in the browser. In this introduction you'll get a quick tour of the React technologies by building a counter component. You'll see how to build a component by inheriting from React's base class. Then you'll see how to render the component and update its state, making the minimum number of DOM changes to update the UI. Finally, you'll see how the React diffing strategy works using a virtual DOM.

  • Getting Set Up - To follow along in this class you'll need to install NodeJS and clone the class project repository from Github. Then you'll get a tour of the project and see how React is loaded on the browser. Finally, you'll make sure the web app loads in the browser and you'll install the Chrome React debug tools.

  • Creating Components - Learn how to create and render React components by creating the comment box components. You'll start off by creating the CommentBox component by inheriting from React.Component. Then you'll see how to use JSX markup and the className property to describe how the component looks. Finally you'll create the other components used by the CommentBox to complete the comments system.

  • Component Properties - You can pass any number of property variables to a component during instantiation time. In this lesson you'll enhance the Comment component to include an author and text property. You'll see how to access property values from within a component function, and how the special "children" property works.

  • Rendering Lists - One of the core tenants of React is to keep the view logic and view close together to make it easier to reason about. In this lesson you'll see how to use plain JavaScript and JSX to iterate over the comments and dynamically build a comment list.

  • Reactive State - In React you can use a special object called "state" to store values that change over time. When you change the "state" of a component it re-renders itself based on the changes. In this lesson you'll make the comments array a state variable and see how the browser page updates when we change the comments list.

  • Lifecycle Methods - Lifecycle methods let us run some code at certain times in a component's lifecycle. For example, you can use the componentDidMount method to run some code after a component has been mounted in the DOM. In this lesson yo'll use the componentDidMount method to dynamically load comments from the server using AJAX.

  • Event Handlers - React allows us to define event handlers directly in JSX markup making it easy to see how behavior is wired up to components. In this lesson you'll add a submit event handler to the CommentForm component. You'll use the ES6 ("Harmony") fat arrow syntax to bind the event handler to the correct value of "this". You'll see how we can refer to children components by name using something called a "ref". Finally, you'll pass the submit handler as a callback property for better code organization.

  • What's Next? - Congratulations! You should now have a much better understanding of what React is and how you can use it. Next up you can dive into some of the deeper React concepts. This lesson will show you around some of the most important React resources.