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:

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):

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:

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:

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.

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