Building Login / Signup pages with react, react-router and styled -components PART 2 FINAL!

In this final part we will go through styling all of our components and making them reusable so that we can use them for all of our pages if necessary!

Let’s Continue!

First things first, let’s set up some global styles that we want consistent across our entire application. Inside of our src folder let’s create a reset.css.js file and place the following code inside:

Now inside of our src/index.js file let’s place the following code:

As you can see, we just simply import our global styles and placed it right above our App component. And now if you refresh your browser, you can see the text look’s a bit prettier!

Next, let’s create all the components we will need, inside of src/components folder, create the following component folders:

The basic folder / file naming structure will be the same for all of our components. As you can see Button has Button.js , index.js, style.js . This would apply to EntryCard, Input, etc.

Let’s take a look at our Button component first. Inside of Button/index.js place the following line of code:

export { default } from './Button';

That line of code would apply to all other components as well, only with the proper name such as EntryCard or Input.

Now inside of Button/Button.js file place the following code:

And now inside of Button/style.js :

Now I’ll quickly go through the rest of the components screenshots

EntryCard/EntryCard.js :

EntryCard/style.js:

Input/Input.js:

Input/style.js:

InputGroup/InputGroup.js:

InputGroup/style.js:

Navbar/Navbar.js:

Navbar/style.js:

Now that we have our components set up, let’s place them in the proper places! First one up is our Navbar this component will go in the Home page src/pages/Home.js :

And if we take a look in our browser:

Holy Crocodile would ya look at that! Let’s keep going! Let’s start building our Login and Signup pages. Now before we do that, let’s think about it for a second. We know that both the Login and Signup pages are very similar in terms of styling. They both need some inputs, with labels, submit button, and both pages need a “Back Home” button or logo to click on. So with that in mind let’s build some styles that we can use in both the Login and Signup pages so that we don’t have to repeat similar code!

Inside of src/pages folder create a file called style.js and open it up and place the following code:

As you noticed we have called one of our components “EntryCard” and now we are naming this styled-component “EntryPage”. And when you think about it, what is a name for both a Login and Signup page? Well for me at least, I think about an “Entry” way!

Let’s begin building our Login page first, inside of src/pages/Login.js place the following code:

And inside of src/pages/Signup.js :

As you can see, we are able to reuse a lot of our components and page styles to create very similar pages!

Now if you take a look back in your browser, and I must warn you, prepare yourself for you will be amazed!

Well would ya look at that! Not bad, not bad. As you can see, both the Login and Signup pages are very similar in nature therefore we would just need to make use of a few set of components styled with styled-components and we can set something like this up!

In this tutorial we used react-router for client side routes that allowed us to navigate through a Home page, Login page and a Signup page. We also got to fiddle with styled-components and get a taste of CSS-in-JS and create beautiful reusable components! I hope you liked this tutorial and thank you for reading!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store