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.
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.