Styled components

What are Styled Components?

Style components is a really cool library that lets you write css in javascript. You can do pretty much anything that you could do in a regular cascading style sheet, without needing to switch back and forth from file to file. Mapping between components and styles is no longer needed. When you define your styles you are actually creating a normal React component with your styles attached.

Setting up Styled Components

First you need to create your react app...
Type the following code into your console
you can call your file whatever you like as long as you use all lower cased letters.

$ create-react-app your file name

now open the file in vs code. Then type the following into the terminal to add the Styled Components library

$ npm install styled-components

You are now ready to start using this super fun library.
If you want synta hightlighting off the css you can install a vscode extension called vscode-styled-components.

Why use style components?

People use Styled Components for a number of reasons. Originally when you had react people would pass their styling as props.
Styled Components allows you to define all those files within the same component, you dont have to pass them as a prop and you can dynamically update them.
Here are some perks that makes Styling Components great to use.
Easy styling for react native.
Lets you avoid conflicts with 3rd party styling.
Comes ready with server side rendering.
typescript ready.
Makes it easy to extend existing styled components.
Lots of browser suppport and documentation.

Styled Components is also used by some really notable companies, and is a very hirable skill these days.

Using Style Components...

In this blog we will take a look at some cool things you can do with Style Components. Lets start with setting up our component.
Add the "import styled-components" to the top of your near the code where import react.

Here we have a normal react component with a div, with the className "App", We have added an h1 for a title.
Now we can create elements, create a h1 and a button element. You can use any html element you want for this. The syntax is as follows. First declare a new element and save it to a variable, you then start a tagged template literal, calling a function and then passing it an argument as a template string. Inside this template literal is where you can list the styles for that element. You use what looks like basic css for this. You can do anything that you can do using regular css.

Next we need to render our elements. Wrap them In the element tag that you choose and render them to your page. They must start with a capital letter and match the name that you gave your variable above.

Using Hooks...

We can also import hooks to update are code dynamically.
To do this you add { useState } next to your import React from "react" tag.

Then you set the states. Call use state and set a boolean of false.
Move to the a tag and set the primary to a prop. Define an onlclick handler then set an array function that will call set primary and call the reversal of what it currently is. Now you have a element that react to your onclick.