In this lecture, we're going to create the pages we're going to need for our application. So let's say we have a page, an about page, and then we have another page with some product listed. So let's first create those components for each page, and then after that, in the next lecture, we're going to start hooking up React Router to allow us to switch between pages using the URL. Okay, so let's get started. Let's create first the about page. Let's go to our project. I'm going to open up my text editor here, Adam. After the directory SRC, I am going to create a new file called about.js. So let's keep it simple and just create a stateless functional component. Let's go. So first we're going to need React, import React from React, because we're going to be using JSX. So let's make a variable and call it about. This is going to hold our stateless functional component. For stateless functional components, all we need to do is to define a function that takes a parameter that is R to props passed to this component. So let's use an arrow function for that. And I'm just going to do it like this and return a template like this. So let's put a, let's say a div. And inside this div, if you can see from the sketch there, we just have the heading about and the content. This is the about page. So let's do just that. Let's get started. Just put an h1 there about and just some text. This is the about page inside a p tag. How about that? So now we have the about component and this component represents the about page. Okay. Let's then export the file about. So we can use it from another file. With this, let's go ahead and create the next component that's products. How about you do it yourself and then pause the video. After you do it, let's check answers. How did it go? So let's go create products.js. Let's import react from react because we're going to need the JSX. Let's create a stateless functional component. Let's keep it simple. Let's call it products. The component takes a dysfunction takes the props parameter and then we're going to return the template that's going to be rendered. Let's put a div and inside the div. Let's make a list after doing the heading h1 products and let's make an unordered list UL and then let's add some allies. First one product one and just copy and paste. I'm going to duplicate the lines and just make it product two and three. Okay. Let's not forget to export the file at the end so we can use this component for an external file. Okay. So this is the product component that's going to represent the product's page. Now just to review what we did, first we created the about.js file to hold the about component. We're doing stateless functional component here. So all we have to do is export a function whose first argument are the props. We're not using it here but we didn't really have to write it but just so you know that's the props parameter and then we return a template from this function. Here I'm using implicit return from ES6. So this is the same thing as doing this. So if you are not familiar with this syntax just yet then get familiar. This is the same thing. Okay. So I didn't want to write return explicitly so what I had to do is just remove the return and remove the braces that define the function block. This is going to be the same thing. So I'm returning this JSX block here. Okay. Then we went on to create the product's page the same manner in the same manner. Okay. Now let's test this out to see if it's really working just one by one. From your app.js this is the app. This is the component that gets rendered into the screen initially. So what I want to do is I'm going to delete all these unnecessary stuff. Okay. So actually I'm going to delete everything so we're going to start from scratch so to see what's going on. So let's start from scratch app.js. First we're going to do react and then we're going to need what? We're going to need to define the component. The way it was defined before was using a class component. We can do that just as well. So let's do it. Class app extends what? Extends react component. Okay. And then since it's a class component we need a function render. Every react component has the function render and this function always returns the template. Okay. So this is what's going to appear in the screen. In this case we want to test out if we say about here if it's going to show up or if we say products if it's going to show up. So that's what we want to do. Before we do that let's leave it at that and export default the app down there. Okay. Now since we're using about here we need to import it otherwise we cannot use it. So let's do an import. What's the name of the component? We want to call it about. We want to call it from same directory. Dot slash the name of the file about.js except we don't need to say .js. It's okay to omit it. Okay. Now let's save this and then go to the terminal. Let me clear the screen. We're going to start our app using one of the npm scripts that's defined in package.json and that's npm start. This guy is going to power up this react application and open up your browser window with the page. I'm going to open here the console just in case I want to see any error messages. So as we can see about this is the about page everything is working just fine. So let's test out the product. So let's go to the terminal. What do we have to change? We have to change this part. We want to test out products. So in the same way just change this about import the products from products and then save it and see if it changes in the browser. Please we're using npm start. This script already includes the hot reloading, live reloading for you so as you make changes to your files and save them it automatically reloads the react app here. So as you can see products, product one, two and three they are appearing here correctly. So everything is good. We're all good. We have created the pages for our project. Now next we're going to look at how to set up the routes using react router in the next lecture. Until then, see ya.