React

Getting Started with React

An end-to-end guide on how to build widgets and applications powered by React.

Eric Simons Up to date (Aug '17) React

Introduction

When compared to other frontend frameworks available today, React's existence seems a bit weird. React claims to be the "V" in MVC, but other frameworks like Angular, Backbone, and others already have a view layer that seems to work just fine. So why should we ever need to use React? It's a great question, and by the end of this course, you'll have a very firm understanding of the answer: React doesn't want to replace your view layer it wants to augment it. And React does an absolutely amazing job of this. Using React will very likely increase the speed and stability of the software you ship as well as completely change how you think about building frontend software.

What we'll be learning

Many other Javascript frameworks are easy to jump into but become exponentially more complex as you build larger applications. Learning React is the exact opposite: it can be initially hard to learn, but once you go from 0-60 you're pretty much good to go. The graph below does a good job of visually explaining this:

We've solved this initial learning hump by breaking the course down into small pieces that are easy to consume. We'll go through every major concept that React is comprised of and build interactive examples to cement your learnings.

The first part of this course will introduce you to React components, how they work, and how to use the knobs & switches they expose to you (aka "Component Specs and Lifecycles"). Once you have a firm understanding of React's inner workings, we'll create our first real React component: a tool for scientists to determine the state of any given piece of matter (water, liquid, or gas) based on its temperature.

In future lessons, we'll also show you how you can use the Flux architecture with React to build larger and more complex applications. If this all sounds a bit overwhelming right now, don't worry! It will start making sense once we begin the actual course.

With all of that said, welcome to what many consider the future of web and mobile development the wonderful world of React. In this course we will teach you everything you need to know to start building fully fledged widgets & applications powered by React.

Prerequisites

Throughout this course we'll link to relevant resources to help fill potential gaps in your knowledge as well as supplementary material that can help you gain insight into the technology and its various components. However, we highly recommend that you have a firm understanding of the following before starting:

Basic programming / JavaScript knowledge. React's design principles closely follow Javascript's. As such, this course is geared towards folks who have a firm understanding of Javascript fundamentals. If you don't know JavaScript particularly well, this guide is a good place to start.
Solid understanding of how scopes work in Javascript. Specifically, you'll need to be familiar with the this keyword and how/when to use apply, call, and bind.
Type out all code instead of copy+pasting it. We're firm believers in actually writing code while learning a new language or framework, as it ensures you're not falling into the trap of "fake" learning.
If you have any questions, Google and Stackoverflow are your best bet but if you're unsure about something specific to this course, feel free to tweet me @ericsimons40.

With that out of the way, lets get started!

React fundamentals

Before we dig into any code examples, it's important that we first fully understand the purpose of React's existence in web development. As such, in this first section we'll be learning what React is (and what it is not). This post gives a good high level overview:

For more detail, this blog post from Andrew Ray is quite good (and humorous):

ReactJS for Stupid People (PS - don't worry, you're not stupid :)

To recap, React components allow you to create HTML tags that can contain custom functionality. Because reusing components is a key idea behind React, it's worth mentioning that each instantiated component receives it's own scope. This allows you to reuse your components as many times as you'd like without worrying about variable collisions and other typical scope-sharing conflicts.

Enough with abstract examples & explanations though -- lets start building React components!

Getting started with components

Now that you're armed with the high level concepts behind components, lets figure out how to actually build one. We'll start off by creating a variation of the infamous "Hello, world!" example. In this post, we'll learn the basics of how React components work and how JSX improves our development workflow:

Common code patterns

Before we can move on to the more complex parts of React, there are a few common code patterns for writing components that you'll need to be aware of. We'll be using this frequently in the next few sections of the course, so take the time to fully understand them!

Using "state" to create interactive components

Now we're getting into the meat of what makes React really great. While "state" might take a bit to wrap your mind around, it will likely forever change the way you think about writing user interface components. This post thoroughly teaches the big ideas behind state and walks us through creating a state-ful React component:

Now that you understand how state works, you're probably wondering how you can modify it programmatically. This post explains how simple updating state is:

Building highly reusable components with "props"

One of the key selling points behind React is the ability to create "reusable components". This doesn't just mean that you can initialize a component an arbitrary number of times; it also means that you can preconfigure components before they're even initialized. This is precisely what "props" allows us to do. In this post, we'll turn our <Water /> component into a reusable component called <Liquid /> that works with any liquid in the universe (including water):

However, the power of props isn't limited to configuring a single component -- you can also configure & instantiate an arbitrary number of components programmatically:

Advanced readings

There's a lot more to learn regarding how you can use props! Here are a few of the most important methods you should know about:

getDefaultProps -- It's like getInitialState, but for props
propTypes -- Allows you to do type checking for your properties

Component lifecycle methods

At this point you should now understand a majority of the big ideas behind building React components! In this section we're going to introduce you to the lifecycle methods you can hook into. This post is provides a very thorough overview:

While there are a handful of methods available to us in the lifecycle, it's worth noting that these are the two you'll probably be using the most:

componentDidMount = Where you do DOM manipulation & AJAX requests. Kind of like a boot loader for your react component. AJAX requests should be done here, and NOT in componentWillMount
componentWillUnmount = Clean up after your React component gets destroyed This is where you remove event listeners, DOM changes, etc that you likely defined in componentDidMount

Frequently used component methods

In this section we're going to cover a handful of the other frequently used methods that React exposes to you.

refs = How to access DOM nodes within your component
mixins = Reuse methods across multiple components

Building a real React app

You now possess all of the skills required to build widgets and applications with React. The next tutorial will show you how to actually build a real world codebase using React and its popular companion library Redux.

Build a Real World App with React & Redux