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.
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.
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.
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.
Awesome, we've built our first component. Now let's get a bit fancier and start building a more complex interface.
Driving Components Through Data
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.
Today we're getting started on how stateful components work in React and look at when and why we'll use state.
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.
We're looking at how to make reusable React components today so that not only can we share our components across apps and teams.
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.
Today we'll walk through how to add interactivity to our applications to make them engaging and dynamic.
React offers several different methods for creating components. Today we'll talk about the final method of creating components, the function stateless pure component.
Today, we're going to add a build process to store common build actions so we can easily develop and deploy our applications.
Today we're going to work through how to display multiple components in preparation for pulling in external data into our app.
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.
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 our applications using this incredibly useful concept.
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.
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.
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.
Data Management with Redux
With the knowledge of flux and Redux, let's integrate Redux in our application and walk through connected applications.
Live-updating Our Redux Stores
With Redux in place, let's talk about how we actually modify the Redux state from within our applications.
Today, we're looking at the Redux method of managing complex state changes in our code using Redux middleware.
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.
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.
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.
Better Testing with Enzyme
Today, we'll look at an open-source library maintained by Airbnb called Enzyme that makes testing fun and easy.
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.
Today, we'll explore the different pieces involved in deploying our application so the world can use our application out in the wild.
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.
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.
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.
- What is this?
- What if I get stuck?
- Who wrote this?
- This course is a series of articles which teach you how to use React from the ground up. The series provides a step-by-step process you can use to learn React from an empty folder to a deployed React app.
- Just send us an email and we'll be happy to help you get unstuck
- We're the authors of the Fullstack React Book