Journey, React

Styling a React App

As if working on the functionality of an web application wasn’t enough, you are also expected to style it and make it look nice. I had the hardest time figuring out the easiest but also the “appropriate” way of doing so. Searching around the internet I couldn’t find something to tell me this is the way it should be done while in the industry, so I will assume that there is no right way or wrong way of doing this. It all depends on the purpose of the app and what works best on the size of your app.

There are 3 common way of styling the app and I am listing these on what I found to be the easiest to the hardest.

  1. Cascading Stylesheets (CSS)
  2. Inline styles
  3. Styling libraries

CSS

By far this is the easiest way to style our web applications. If you have been coding for a while there is the familiarity of using a CSS file to hold all the styling for the page/application. We use id’s and classes and we access them via # or . respectively and it’s all the same as styling an HTML file.

Looking at our title from previous blogs we can style it with our already created ClassName attributes. First thing is we have to add our <link /> tag to our index.html page

<link rel=”stylesheet” type=”text/css” href=”app.css”>

As a reminder, our code looks like this:

And our new .css file will have the following to change the  Title component

What we end up with is a simple change to our title component

Screen Shot 2018-05-30 at 9.41.48 PM.png

There are some issues with doing our styling this way. If we were to have a different component anywhere in our app with the same className of “Header” it would also be affected by the styling that we created here. So this might not be the best way to style our app if it is large or we have some ads.

React provides a new, but not really new way of dealing with this.

Inline Styles

First time I encountered this I was like “no no no nono”

NO.gif

Up until now everything I had read, and every course that I had taken was against using inline styling. The functionality was separate from the styling which was to be kept separate from the HTML. Now they want me to throw that away and put my CSS on the same file as my logic and my HTML.

panicking.gif
Everything I know is a lie

There are some good arguments to doing so but it’s going to take a while to get used to this. Let’s see why it works and how to do it.

One part that I found really interesting for doing our styling inline is that this allows us to dynamically define styles based upon different states of the app. So if something is happening everything can be green and if its resting then it can be orange.

React allows us to do this using a JavaScript object.

Let’s make the changes to our same Title Component from before but this time we will not use the CSS file.

Defining styles inside a component is easy using the style prop. All DOM elements inside React accept a style property. This is pretty much the same syntax as CSS except that the keys defining a style name need to be camel-cased. for example backgroundColor instead of background-color or linearGradient instead of linear-gradient.

 

Example:

You might have noticed the double set of braces {{}}. The inside set is the JavaScript object that we are passing. In JSX all code that we want processed by the compiler has to be inside {} so that is the outside set of braces.

Another way of doing this would be to pass in the object as a variable.

Example:

So now our Title Component with our inline styling will look like this:

Notice that in our h2 we have two different stylings and they are separated by a comma. Our header looks exactly the same.

Styling libraries is a bit more complex and I feel that they need their own separate blog so we will discuss the tomorrow. Go forth and style your react apps.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s