Building Scalable React Apps

In this course, you will learn how to scale your React application using the ready-made React-Boilerplate stack.
Course info
Rating
(164)
Level
Intermediate
Updated
Oct 27, 2016
Duration
3h 48m
Table of contents
Course Overview
Getting Started
An Introduction to Building Components with react-boilerplate
Loading Data from the Server with Redux-saga
Handling Events with Redux-saga
Styling Your Components with CSS
Adding Routes to your Application
Building Forms to Gather User Input
Achieving Component Reuse
Tackling a Realistically Complex Feature with Your New Skills
Description
Course info
Rating
(164)
Level
Intermediate
Updated
Oct 27, 2016
Duration
3h 48m
Description

In this course, Building Scalable React Apps, you will remove the guesswork with the React-Boilerplate stack so that you can keep on delivering features, without needing to evolve your stack with every new addition. First, you'll learn how to use redux-saga to elegantly attach side effects to your app. Next, you'll focus on learning how to use reselect to compute values on top of your redux store. Finally, you'll learn how to design your components to keep them as simple, portable, and testable as possible. After watching this course, you'll be able to tackle large React applications alone, or with a team.

About the author
About the author

In his day job Hendrik is a full stack coder from Cape Town. For a large part of his career he worked with .NET, but the last few years he spent most of his time with JavaScript.

More from the author
React Native: Getting Started
Beginner
1h 49m
20 Jun 2018
Using Redux to Manage State in Angular
Intermediate
1h 21m
20 Mar 2017
More courses by Hendrik Swanepoel
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone. My name is Hendrik Swanepoel, and welcome to my course, Building Scalable React Apps. I'm a freelance Full Stack Developer from Cape Town, South Africa where I work in the FinTech industry on complex cross-platform products. React is very useful, no doubt about it, but setting up a project around it, and constantly tweaking a custom stack can be detrimental to any project, especially when you use it within a team. With the stack you'll learn in this course you'll be able to focus on building complex apps instead of worrying about your foundations all the time. In this course you'll learn how to set up the very popular React-boilerplate stack on your machine. You'll learn the basics of how to work with redux-saga, and you'll use reselect to compute values on top of a redux store. By the end of this course you'll be in a good position to deliver a highly complex and large React app without even having to go near a Webpack configuration file. Before beginning this course you should be familiar with React, a bit of Redux, and JavaScript. I hope you'll join me on this journey to learn to scale React apps with the Building Scalable React Apps course at Pluralsight.

Getting Started
Welcome to this course on Scaling React apps. What do I mean with scaling? Well firstly, it means that you can easily add new features to your app without the need to go and change the stack. It also means that you can add new team members onto your team, and they'll know what to go and do. With the proper scalable stack it will eliminate a lot of debating within your team on what technologies to go and use. You want to focus on features, and not be caught in constant debates on technology. Talking about teams, it will also be easier for new team members to join and start working on the stack rolling out features. If you're serious about your application it means that it's probably going to be more than one person working on it, so you need a stack to support that, and lastly, it should also be quick and easy to deploy your app. Let's go and have a look at everything that's involved in this stack. I would just like to extend a special thanks to my colleague and friend, Stewart Scott, who helped me in the preparation for this course. I ran a lot of ideas around him, and he gave very good feedback. He also helped to test out the material. Thanks a lot Stewart.

Styling Your Components with CSS
We've done some pretty advanced stuff so far in this course, but our app looks a bit ugly, but don't worry. We're going to sort that out now by adding some CSS to the mix, and we're also going to bolster our components to cater for a bit more interaction for the user. At the end of this module we'll have something that looks like this. As you can see, it looks much better than what we've got now. You can also click on the icon in the app bar and it slides a drawer containing the topics in with a nice transition. When you select a topic it goes away, again, with a nice transition.

Adding Routes to your Application
In this module we're going to introduce routing to our app. I'm sure I don't need to sell you on routing. All developers love it, and users too. There's nothing as irritating as pressing the back button and be thrown out of the app, and we're going to be doing routing the redux way, meaning that all our route changes will go through the dispatcher. This has got some benefits in testing because you can time travel. You can go and undo actions and go back to the previous route. It's pretty cool. You'll see. Let's have a quick overview of what we'll be doing in this module. What we're going to do in our app is trigger an action, SELECT_TOPIC, from the NavigationContainer. We're already doing this at the moment, but what we'll do differently is we'll intercept this action in the saga, and trigger another action in state using the push function that we get from React router, which will result in this @@router/LOCATION_CHANGE action. We're going to set up a route that will go and render the LinkListContainer. The LinkListContainer will go and trigger an action, REQUEST_LINKS, to go and get the links for the topic currently on route. The sagas will intercept this action, and go and fetch the links associated to the topic from the server. It will then dispatch another action, REQUEST_LINKS_SUCCEEDED, which then gets reduced, and the state gets updated. In the end our LinkListContainer gets its links that it should display. Great. Let's go and do this in code now.

Achieving Component Reuse
In this module we're going to take even more input from the user, and we're going to do this so that the user can add a new link to the app. We'll achieve this by refactoring the code from the previous module and making it more generic. Let's have a look at what we'll work towards in the rest of this module. We're going to add a new route to our app. When you add /add onto the URL you'll be presented with this form. The interesting part is that you can still see the links in the background, so we're showing this new form component in an overlay while we've still got a bit of context in the background. We achieve this by using nested routes. When I press on the Add button you can see that our validation kicks in. We're going to create a new component called TextInput and we're going to reuse it inside of this Add form, and we're going to make it take props for validation messages and style overrides. We're also going to refactor the existing Login component to use this new TextInput component. Okay, let's go and do it in code.

Tackling a Realistically Complex Feature with Your New Skills
Now we're going to tackle the rest of the work to allow the user to add a new link to our app. First, we're going to code up another generic component, an IconButton component. We'll use this to allow the user to start the process to add a new link. We'll also use this new component inside of our AppBar component to show the drawer icon. In the end, we'll link our form up to redux, and ensure that the links make their way all the way to the server, and immediately show inside of our app. See this button over here? When I click this we'll get presented with an overlay form, meaning you can still see the links in the background, and you've now got a form that allows you to add in your link. What's interesting is that you can see that this is a nested URL, so that's how we're getting the links to stay in the background with this form showing over it with a different route. If I click the Add button without providing input you can see that we've got validation similar to the previous module, but we're actually going to make these textInputs reusable, making them work with validation, and taking some override style. When I provide some valid input into these fields we immediately see the newly added link inside of the LinkList, and what's interesting is when I hard reload the page you can see that the new link is still being displayed. That means we actually spoke to the server to go and save this new link. Let's go and do this in code now.