Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds


Free Preview: Modern Web Apps With React and Redux


  • Overview
  • Transcript

React is a JavaScript library for building user interfaces that has taken the web development world by storm. React is known for its blazing-fast performance and has spawned an ecosystem of thousands of related modules on NPM, and many tooling options. However, in a community that favours choice and flexibility, it can be hard to know where to start! Not to worry, some patterns and modules have emerged as best practices—like Redux for managing application state. In this course you'll learn all about how React, Redux and other leading modules fit together for a complete picture of app development.

In this course, Envato Tuts+ instructor Andrew Burgess will get you started building modern web apps with React and Redux. Starting from nothing, you'll use these two libraries to build a complete web application. You'll start with the simplest possible architecture and slowly build up the app, feature by feature. You'll learn about basic concepts like tooling, reducers, and routing. You'll also learn about some more advanced techniques like smart and dumb components, pure components, and asynchronous actions. By the end, you'll have created a complete flashcards app for learning by spaced repetition.

Along the way, you'll get a chance to sharpen your ES6 (ECMAScript 2015) skills and learn the patterns and modules that work best with React and Redux!

Learn JavaScript: The Complete Guide

We've built a complete guide to help you learn JavaScript and learn React, whether you're just getting started as a web developer or you want to explore more advanced topics.

1. Introduction

1.1 Introduction

Welcome to this tuts+ course on building a Web Application with react and Redux. I'm Major Burgess, and I'll be your instructor through these lessons. React and Redux are really really popular libraries these days. And if you haven't had an opportunity to look at them yet, this is your chance in this series of lessons. We're going to build a complete web application using react and redux. We're going to start out very very simply everything we write will be in a single file and we're going to slowly add features to our web application until we have a pretty reasonably sized project that's going to span over a dozen files. If you've found that other tutorials are a little bit difficult for a beginner to follow, I hope you'll find these lessons to be a great way to learn. We're going to assume you know pretty much nothing about react and redux and we're gonna build from there. Before we get started, I want to mention that we're going to be using ECMAScript 6 throughout these lessons. Of course you don't need to use ES6 if you want to use react and redux. However some of the newer syntax in ES6 will make our work a little bit easier. If you're not familiar with the ES6 syntax, don't worry. I try to explain a lot of what we're using along the way. However, there are a ton of great ES6 resources out there that you can use to get started. So if you're ready to get started, let's go.

1.2 Application Demo

Before we begin developing our application, let me give you a quick tour of the final product so that you have a good idea of what we're going to be building. The app we're building is a very basic flash card system. As you can see in the sidebar here on the left, we have a list of decks that we've created, and these are decks of cards. It's very simple to create a new deck of course. We just hit a New Deck, and now I can type in the name of the deck. I might say LISP or something like that, and now we have a new deck of cards. Of course, if I click this deck, you can see that the deck is currently empty. But now that we have selected the deck, we could go ahead and add a new card. So we could go ahead and create a new card by clicking the New Card button. As you can see, we've got a modal window here where I can write in the card front and the card back. So let's create a new card here. I could say, How would you add the numbers 1 and 2? Something super basic, and we can just put the LISP form of addition down here on the back of the card. I'll click Add Card and now you can see we have a new card here. Now we can go ahead and edit the card as well, which includes deleting the card. I'm not gonna make any changes. Instead I can choose to study our deck of cards. And we'll have each card showing up here like this. Once of course you have the answer formed in your mind, you can choose to flip the card and see whether you got the right answer or not. And then the app will ask you, how did you do, and you can choose either Poorly, OK, or Great. And our application will use the answer that you choose to decide when it should next show you this card. So we're doing a tiny bit of ff the learning techniques spaced repetition. And if you're not familiar with spaved repetition, I'll put a link to the Wikipedia page underneath this video. So that is the basic structure. Now if we have a deck with multiple cards, lemme look at my words deck here, you can see we have a bunch of interesting words here that, for the case of this demo, I'm trying to learn. I can go ahead and study through them. And notice that if I choose Great for each one of these, this means I will have done my studying for the day. As you can see now, I have no more cards to study. And if I go ahead and choose to study the deck again, because I've done my studying for the day and I have no due cards, we get the message that there are no cards to study. And I'll have to wait and come back tomorrow before I can actually go ahead and study these cards again. So that's kind of the idea of spaced repetition. Now, one more thing here is the search box here which allows us to filter, and as you can see, this filters on the fly. So if I start spelling words here, you can see that they do filter as you might expect. And that's really it. There's not much more to our application. What you may have noticed as we moved through the app is that the URL did change so that we could bookmark certain decks. For example, if I refresh with this deck/deckid here you can see that we're still on the words deck. We can even bookmark specifically a deck and then /study so that if you have a specific deck that you study often, you can bookmark going right to the study view for that deck. All right, so that's a quick demo of the flash card application that we're going to be building in this course. And so in the next lesson, we're gonna begin by setting up this project.