Split-screen components - React.js Tutorial

- [Instructor] Alright, 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 Vite React application. So if you don't already have something in there, and if you're using the exercise files, you won't. What you're going to need to do is you're going to need to open up a new terminal in code spaces. You can do that with this little thing in the top left hand corner. Just do terminal new terminal. And I already have one up here actually. Oops, let's try that again. There we go. And first of all, I guess make sure that you have npm installed as well as node. And if you have similar versions to what you see here or beyond, everything should be good to go for using Vite. So we're going to use vite here just by saying npm create, and I'm going to say vite at a specific version number here. The reason I'm going to do that is just so that you can be sure that your code will work in the same way as mine will. If you want to do vite at latest and be, you know, sort of on the cutting edge, feel free to do that. But the version that I'm currently using here is 6.2.1. Alright, so this is going to walk us through a number of prompts. You may be familiar with this process already, but I'm just going to show you my options. We're going to say yes to okay to proceed. Next thing it's going to ask us for the project name. What I'm going to do here is create a new vite project for each sort of pattern that we're going to be taking a look at here, right? This will just make it a little bit more self-contained and easy to tell what's going on. Alright, so the project name here, since we're going to be talking about layout components should be layout components. And then it's going to ask what library or framework we want to use. We're going to select react, and just to keep things as simple and straightforward as possible so that we can focus on the patterns instead of the specifics of things like TypeScript, I'm going to choose just plain old JavaScript here and that will create this layout components folder for us. So let's just change directories into there, cd layout-components/. And we're going to need to run npm install. You'll need to do the same process for pretty much every other project that we create. This maybe the only time that I'll show you, just because it would be a little bit repetitive to do this over and over again. Cool. So that's going to install all of the dependencies for this project. And once that finishes, we'll just clear that out. And you can run this by doing npm run dev and that will open up the project that we just created on a port. So you can go to local host 5173. If you're doing this in code spaces, you're going to need to actually go into this ports tab in your terminal or in the bottom pane here. And you're going to need to make sure that visibility, well, you can leave visibility left on private, but you're just going to need to click on this forwarded address here in order to see it. Actually, you can click on this little open in browser button, a little globe icon, and that will open that up in a browser for you. Okay, cool. And there we see our Vite and React application. So let's get back to the example that we're going to go through here. We're going to create a split screen component, as I said. So we'll start off here by going into layout components and into source. And we're going to create a new file called splitscreen.jsx. And actually, since this is going to be a React file, we'll say .jsx. And inside here, this is where we're going to create our component to demonstrate this concept. Now we are going to be using just for styling purposes, a library called styled components. You may have seen this library before. I have a course that incorporates styled components in quite a bit of detail, so feel free to explore some of my other React courses if you want to learn more about that. So let's open up our terminal, and actually we're just going to stop this temporarily and we'll say npm install styled-components. Alright, so we'll run that and that will install that package for us. Okay, so here's what this is going to look like now, this split screen component. We're going to start off by defining the component itself. So we'll just say export const SplitScreen. And this is going to take two props. These are going to be called left and right. I'll explain why we're calling it that in a minute. And we'll also rename these things here so that they actually, you know, have the same sort of casing as components do. As you'll see, we're actually going to be able to pass react components through, you know, using these props. So now that we've done that, the next thing that we're going to do is define the body of our component. And for now, it's going to be fairly simple. What we're going to do is we're going to return a div, and inside that div we're going to have two other divs, right? So this first one here, there we go. And another one down here, div. And inside each of those divs, we're just going to take these props that we defined up at the top and put them inside. So we're just going to say inside this first div here, we're just going to say left. And here we can actually define that just as a single tag right there. And then in this one here, we're going to do right like that. And these two divs are essentially going to be the left and right hand sides of our split screen. So now that we've created this component, we're going to need to actually add a little bit of styling and we can do that by using that styled components library that we installed. So we'll say import styled from styled components. And now that we have that, what we're going to do is we're going to define two styled components. The first one's going to be called container. So that's going to look like this. We'll say styled.div. And then we have this somewhat strange syntax with the back ticks after styled.div. Feel free to again, check out one of my courses about style components to find out why that is. And for this container we're just going to say display flex inside of there, there's other styles that you could add as well, but we'll just leave it at that for now. And then we're going to say const Pane and this is going to represent the two divs that are inside that that actually make up the left and right hand sides of this split screen. So we're going to say flex 1, oops, here, we need styled.div first. And then inside there we're going to say, there we go, flex 1. Okay, so now that we have these two styled components, we're just going to put those inside split screen. We're going to replace this outermost div. And here, let me just add some parentheses there like so just to keep it a little bit more organized. And this outermost div, that's going to be the container. Alright, so we'll change that to container and container and these innermost divs, we're going to change those to pane. Alright and here we'll just do that same thing with these other ones. All right, so pane, pane, pane and pane. Cool. So now here's what we can do with this split screen component. Let's go back to our app component here, right? This is just the sort of highest level component in the React application. And we're going to remove all of the boilerplate code that they gave us here. And in its place, we're going to use a split screen, right? The split screen component that we just created to display two other components side by side. Alright, so let's just clean this up a little bit here. We don't need those anymore. We don't need this anymore, and we also don't need the state anymore. Alright, there we go. And inside here, first of all, let's import the split screen component itself. So we'll start off by saying import SplitScreen. There we go. Split screen from split screen, and then we're going to define the two components that we'll display here. We'll just put these inside the same file as our app component just to keep it so that we can see this entire example right here. So we'll say const, and we'll just call this one LeftHandComponent. This could really be anything, right? So this could be like a menu that you want to display on the left hand side of your application, for example. And that's going to look like this. We'll just create something real simple. And for now, let's actually just say return, we'll say h1. And we'll just give this an inline style like this. We'll say background color, and we'll set that to green. And what we'll do here is we'll have this h1 heading, actually say something like left, and then we'll do the same thing for our right hand component. We'll just say const RightHandComponent = and inside here we're going to say return. And we'll just do a paragraph tag here. We'll say style =, we'll set a different background color here. So we'll say background color, we'll do red perhaps just to provide some contrast. And then inside here we'll say, right, awesome. And oops, let's just correct those tags there, make sure they're all right. Alright, so now that we have these three components, the split screen, which is the higher level layout component, and these two components that we want to display inside that, here's how our layout component allows us to do that. We're just going to say, first of all, we have our SplitScreen, and as props, we can actually just pass the left hand component and the right hand component like this, we're just going to say, here we'll do this on a new line here. We'll say left = LeftHandComponent, right? We're just passing that as a prop, and then we'll say right = RightHandComponent. Cool. So let's take a look and see what this thing looks like. First of all, we just need to add a slash at the end of that. And well, let's take a look. We're going to go over to our browser again, and actually, I think we need to rerun our app. So we'll say npm run dev once more, and then we have to go back to our port and open that up in our browser. And oops, the styling is a little bit off, and that is just because we need to also remove this app.CSS thing that's interfering with it. And we also have to go into main.jsx and delete this index CSS just to, you know, get those things out of the way. And now if we take another look at our app, there we go. Sure enough, we see that we have left and right on the left and right hand sides. And if you inspect this further, alright, if you actually take a look at what's going on there element wise, you'll see that the outermost thing here, this is the div that has that split screen, right? You can see with that dashed line where those things fall. So of course, if you had larger components inside each of the sides of this split screen component, it would be a little bit bigger. But anyway, that's the basic idea of a layout component is that now that we have this thing, we never need to worry about using layout styling again, right? We can just take whatever components we want to put inside this split screen style layout and pass them just like we did over here in our app component as the left and right props to the split screen component, alright? So that is the basics of creating a split screen.