From the course: React: Design Patterns (2021)
Unlock the full course today
Join today to access over 24,400 courses taught by industry experts.
Split-screen components
From the course: React: Design Patterns (2021)
Split-screen components
- [Instructor] All right. So now that we know what basic layout components are, let's take a look at some good examples of this pattern. The first example we're going to take a look at here is creating a split screen using layout components. So we're going to start off this example with just a basic Create React App application. You can find this in the exercise files. Just make sure to run NPM install before using this. And the first thing we're going to do is for styling purposes, we're going to install a package called styled components. Now, I've talked about styled components in other courses of mine. If you're curious about those, feel free to look around the library for them. Essentially, styled components are just a very easy way to add styles to React components. You'll see what I mean in just a minute. So we're going to start off here by adding a new file that's going to contain our split screen layout component. So…