React is a wonderful front-end framework and has made front-end development significantly easier for many developers. In code examples and small applications, React may appear to be nearly perfect and include all the functionality a front-end developer would ever need. However, as React applications get larger, many developers begin to see the limits of React. The solution to this problem is to incorporate concepts, such as Redux, selectors, and effects, which are designed to help React developers keep their code clean and maintainable as project size and complexity increase.
- [Tutor] Before we get started learning all about the tools in the React ecosystem, it will be helpful for us to take a good hard look at why we might want to make use of these tools in the first place. After all, these tools do have a bit of a learning curve and to some developers, it might seem like they make the development flow well, a bit more cumbersome than usual. So as I mentioned at the beginning of this course, Vanilla React, and when I say Vanilla React again, I'm just referring to Basic React without any of the additional tools that we're going to cover in this course. Vanilla React was designed as an effective way to create modular performing user interfaces. And as I mentioned before, if we're talking about the model, view, controller pattern, React's main concern falls squarely into the view portion. That is, it provides a straight forward and powerful way to take some data and display it in the user's browser, as well as efficiently update what the user sees whenever the data changes. However, when it comes to how we load, store and manipulate that data that we're displaying, React doesn't really provide us with much guidance. And this is actually somewhat on purpose. The idea behind this lack of opinion is that it allows React developers to make their own decisions with respect to the best way to load and manage data in their application, and tailor React to their exact use case. The problem with this though is that it requires a lot of thought and experimentation to get it right. And in practice, developers rarely put that much thought in to making these decisions. The end result is that all this logic ends up getting crammed straight into the components themselves. This means that what we usually end up with in a Vanilla React application, are these huge tangled components that contain all the logic for loading and managing their own data. And this can make your React projects very hard to expand and maintain. So if you've already put a lot of thought into organizing the code in your React project, and you found something that works for you and your team, then you probably don't need all the tools we'll talk about in this course. However, if any of what I've mentioned so far in this video sounds familiar, and I've been at many companies where this is the case so you're not alone, you'll probably benefit a lot from learning about the React ecosystem tools and incorporating them into your code base. So then, as you may have gathered so far, the name of the game when trying to organize a React application is separation of concerns. In other words, if we can find a way to effectively identify and organize the many different types of concerns in an application, this goes a long way toward making our code base more maintainable. This thinking of course is the basis behind patterns such as MVC which I've mentioned already. And fortunately for us, a lot of thought has already been put into identifying and separating the concerns in React applications. And this has led to many of the ecosystem tools we'll be covering in this course. In fact, for most of the tools we'll look at, the underlying purpose for their existence will be the separation of concerns.
- Building more maintainable and robust React applications
- Installing React and other tools
- Adding Redux
- Dealing with side effects
- Libraries for dealing with side effects
- Styling React apps more effectively with styled-components
- Using React hooks
- React fragments
- Testing Redux, Redux-Thunk, Reselect, and styled-components