Introduction to Styling a React App

What is styling?

Till now, if you’ve followed along this React roadmap, we have learnt about:

• What React is
• How to use it to build user interfaces
• How to get the expected functionality using hooks
• How to work with events and forms

While all this is sufficient to get the expected functionality, there is another factor related to frontend development that we’ve ignored so far. That factor is - How the app looks.

In order to make the React app look aesthetic, we style it. And that is what this show and series will dig into

Ways to style a React application

There are several ways to style a React application

Global styles: You can use a library like styled-reset or normalize.css to apply global styles to your app. These libraries provide a set of default styles that are applied to all elements in the app, and they can help to ensure that your app has a consistent look and feel across different browsers and devices.

Inline styles: You can use inline styles to style individual components. Inline styles are written as a JavaScript object, and they are applied to the element using the style prop.

CSS modules: You can use CSS modules to style individual components. CSS modules are CSS files that are locally scoped to a specific component, and they are imported into the component as a JavaScript object.

Styled components: You can use the styled-components library to style individual components. styled-components allows you to create reusable components that have their own styles.

Other benefits of styling

In addition to the making the web app look aesthetic, we can also achieve functional benefits by styling it. For example, we can get a responsive behaviour (wherein the site renders differently on different sized devices) by cleverly setting styles that are dependent on the display size.

While there is no one correct way to style a React application. There are pros and cons to each one of them. We will get into more details into each one of these further into the series.

References