Interested in Learning React but having trouble getting started?

We'll teach you how it all works - for free

Over the next 30 days, we'll walk through everything you need to know to work with React. From the very beginning through testing and deployment of our first app.

Download the free 300+ page PDF

What is React?

Today, we're starting out at the beginning. Let's look at what React is and what makes it tick. We'll discuss why we want to use it.

Day 1

What is JSX?

Now that we know what React is, let's take a look at a few terms and concepts that will come up throughout the rest of the series.

Day 2

Our First Components

The first two articles in this series were heavy on discussion. In today's session, let's dive into some code and write our first React app.

Day 3

Complex Components

Awesome, we've built our first component. Now let's get a bit fancier and start building a more complex interface.

Day 4

Data-Driven

Hard-coding data in our applications isn't exactly ideal. Today, we'll set up our components to be driven by data to them access to external data.

Day 5

State

Today we're getting started on how stateful components work in React and look at when and why we'll use state.

Day 6

Lifecycle Hooks

NOTE: This post is about classic React Lifecycle hooks.
If you're looking to learn about the new Hooks API then click here

Today, we'll look through a few of the most common lifecycle hooks we can use with React components and we'll discuss why they are useful and when we should each one.

Day 7

Packaging and PropTypes

We're looking at how to make reusable React components today so we can share our components across apps and teams.

Day 8

Styles

No application is complete without style. We'll look at the different methods we can use to style our components, from traditional CSS to inline styling.

Day 9

Interactivity

Today we'll walk through how to add interactivity to our applications to make them engaging and dynamic.

Day 10

Pure Components

React offers several different methods for creating components. Today we'll talk about the final method of creating components, the function stateless pure component.

Day 11

create-react-app

Today, we're going to add a build process to store common build actions so we can easily develop and deploy our applications.

Day 12

Repeating Elements

Today we're going to work through how to display multiple components in preparation for pulling in external data into our app.

Day 13

Fetching Remote Data

We're ready to make an external request to fetch data! Today we're looking at the first step of making a call to an external API.

Day 14

Introduction to Promises

Today, we're going to look at what we need to know to understand Promises from a high-level, so we can build our applications using this incredibly useful concept.

Day 15

Displaying Remote Data

Our front-end applications are only as interesting as the data we display in them. Today, let's actually start making a request for data and get it integrated into our app.

Day 16

Client-side Routing

Most, if not all of our applications will have multiple views in our single-page application. Let's dive right into creating multiple views for our applications using React Router.

Day 17

Introduction to Flux

Handling data inside a client-side application is a complex task. Today we're looking at a one method of handling complex data proposed by Facebook called the Flux Architecture.

Day 18

Data Management with Redux

With the knowledge of flux and Redux, let's integrate Redux in our application and walk through connected applications.

Day 19

Redux actions

With Redux in place, let's talk about how we actually modify the Redux state from within our applications.

Day 20

Redux Middleware

Today, we're looking at the Redux method of managing complex state changes in our code using Redux middleware.

Day 21

Introduction to Testing

Test suites are an upfront investment that pay dividends over the lifetime of a system. Today we'll introduce the topic of testing and discuss the different types of tests we can write.

Day 22

Implementing Tests

Yesterday we examined the different types of tests that we write in React. Today we'll see it in action. We'll install the dependencies required to set up tests as well as write our first assertions.

Day 23

Testing the App

Let's start by looking at one feature of our application and thinking about where the edge cases are and what we assume will happen with the component.

Day 24

Better Testing with Enzyme

Today, we'll look at an open-source library maintained by Airbnb called Enzyme that makes testing fun and easy.

Day 25

Integration Testing

Today we'll write tests to simulate how users interact with our application and will test the entire flow of our app in a live browser.

Day 26

Deployment Introduction

Today, we'll explore the different pieces involved in deploying our application so the world can use our application out in the wild.

Day 27

Deployment

Today, we'll look through some ready-to-go options so we can get our site up and running. By the end of today, you'll be able to share a link to your running application.

Day 28

Continuous Integration

Today we'll look through some continuous integration solutions available for us to run tests against as well as implement one to test our application in the cloud.

Day 29

Wrap-up and More Resources

We've made it! Day 30. Congrats! Now you have enough information to write some very complex applications, integrated with data, styled to perfection, tested and deployed.

Day 30

Course Author

Ari Lerner

Hi, I'm Ari. I'm an author of Fullstack React and ng-book and I've been teaching Web Development for a long time. I like to speak at conferences and eat spicy food. I technically got paid while I traveled the country as a professional comedian, but have come to terms with the fact that I am not funny.

Connect with Ari on Twitter at @auser.

Get started now

Join us on our 30-day journey in React. Join thousands of other professional React developers and learn one of the most powerful web application development frameworks available today.