React Website Using Styled Components

Learn how I built a website using React and styled components. We will create reusable components that you can edit and display across your website.

You can access the complete source code down below.

You will be able to navigate to different pages using React router. You could use Reach Router as well for navigation.

If you've never used styled components before, then you can read their official docs here.

Styled components have a similar style to SASS in terms of nesting. However, there are so many additional benefits of using styled components that you wouldn't be able to get from regular CSS.

You can install styled components into your project with the following code.

npm install --save styled-components

You can also pass props into your styled components, so you can trigger a specific style based on your function.

Here is an example where the color of the text would change from red to blue depending on if the value click is true or false.

export const NavLink = styled.a`
  color: ${({click}) => (click ? 'red' : 'blue')};

This is just one of the many things you can do with styled components. I have plenty of other tutorials showing additional tips and tricks.

I created a full two hour tutorial showing step by step how I created everything.

Watch the full tutorial on Youtube here

Also, I'm documenting everything I'm learning and the projects I'm building on my Youtube channel. If you want to follow me along my coding journey, be sure to subscribe here