From the course: React: Design Patterns

What are design patterns? - React.js Tutorial

From the course: React: Design Patterns

Start my 1-month free trial Buy for my team

What are design patterns?

“

- [Instructor] So in this course, we're going to be learning quite a few different React design patterns. But before we get into that, I want to talk a little bit about what design patterns are in the first place. So the definition that I've come up with here for design patterns is that design patterns are effective solutions to common application development challenges, and notice here that I have the word effective in italics because the fact is that there are just a lot of solutions to different problems that are not effective and lead to more brittle code down the line, and ultimately just make your apps less performant and less maintainable. And these are generally referred to as anti-patterns, these bad kind of patterns that you find. So design patterns are essentially the positive equivalent of these. And in other words, they're the most effective solutions to a given development challenge. Now, we'll see what I mean by this later on in the course, but one caveat before we move on is that many of you have probably heard of design patterns used in a slightly different context, such as object-oriented programming. Well, the design patterns that we're going to be talking about here in this course are not the same thing as those. They do share some similarities, but they're not quite the same thing. In other words, they're not the so-called Gang of Four object-oriented programming design patterns such as creation patterns, behavioral patterns, and so on. There's something a little bit different. Basically, the patterns that we're going to be covering here are things that I've personally run into time and time again in basically every React application that I've worked on. And some of these challenges that these design patterns are solutions to include things like creating reusable layouts to put our components into, right? That's a pretty common thing that you'll run into in React, and we'll also see later on how to make things like split screens and modals and create them in a very reusable way. Another challenge is how do we reuse complex logic between our components? In other words, if we have two or more components that need to do the same complex things, such as, say, loading data from a server, how do we best represent that in our React apps so that we can share that code between those components instead of having to copy and paste it and have it duplicated? All right, now, another extremely common challenge is working with forms in React. The fact is that this is something that despite hundreds of articles out there on how to do this correctly, I still see forms done incorrectly in React quite frequently. So we'll be discussing how to do that. And finally, we're going to see how to incorporate some concepts from functional programming into our React apps. This is something that I've been asked about very frequently since my functional programming courses, and I'm really excited to share it with you in this course. Well, those are some of the most common challenges that we're going to be taking a look at how to use design patterns to solve in this course. So let's jump right into the first pattern.

Contents