How to Build a Login Page in React

[00:00 - 00:09] Now that we're all set up with our global styles and variables, we can get to building and styling. The first page we're going to be working on is the login page. This page is going to be super simple.

[00:10 - 00:16] We'll just put a green login button front and center for our users to click. Very similar to what we have now.

[00:17 - 00:24] So currently our login button lives in our app.js file. Let's move it out to its own file to keep app.js tidy.

[00:25 - 00:40] We'll create a pages directory in our search folder and call the file login.js. And this file is going to look something like this.

[00:41 - 00:58] So all we have here is our styled login container style component, which is a main tag, and our styled login button anchor tag. And all styled login container does is centers the login button with flexbox.

[00:59 - 01:19] The next thing we're going to do is add an index.js file to our pages directory to easily import and export our pages, just like we did for our styles. And all we're going to do here is export our login page.

[01:20 - 01:46] Now all we need to do is head back on over to our app.js file and import that login page. Then we can go down to our JSX and replace our login button with that login page component.

[01:47 - 01:59] Give it a save and it should end up looking something like this. After you're done with that, you can go up and delete the unused style login button style component.

[02:00 - 02:28] [ Silence ]