Create React App From Scratch Part 4: Styling Components

create-react-app-part-4

This article is part of the ReactJS series, you can find the previous part on the following link: Create React App From Scratch Part 3: Working with Props.

How to Style React Component

In the last parts of the series, we cover a lot about React components, but we have not touched the styling of the React components at all. In this part, we will see how we can style React components. There are a couple of ways to style React components, where all of them have some pros and cons. Let's see some of the ways to style React components.

In this part, we are going to use some basics of the CSS FlexBox for additional styling of the React components. If you are not familiar with CSS FlexBox, you can check these two great books linked below to learn more.

CSS: The Missing Manual

CSS: The Definitive Guide: Visual Presentation for the Web

Using App.css

The first way to style a React component is to use the App.css file in the src folder. App.css is a global CSS file that will affect the style of all of the components in your React project. Pros for using App.css is that you can use pseudo selectors. The cons are that the file can become big and messy, and we cannot change styling dynamically (to use conditionals for example).

Inline Styling

We can also use React inline styling, to do this we just need to declare style property on an element and set the style, but for cleaner code instead of writing the CSS on the line where the property is declared we will just pass the variable, like this:

const style = {
    backgroundColor:'white',
    padding:'8px',
    border:'1px solid red'
    cursor:'pointer'
}

<button style={style} onClick={this.doSomething}>Some Button</button>

Pros for inline styling is that we can use conditionals if we need them in some cases when we want to set the style that depends on some value. This is possible because JSX is also JavaScript. The cons are that we cannot use pseudo selectors here.

CSS Modules

The third way to style React components it is with the CSS modules. CSS module is a file in which all class names and animations are scoped locally-e.g., every JS file will have CSS file which is scoped to that file. Later in this series, we will start using the CSS Modules.

Styling React Components

Now as we have seen how we can style React components, before we start we will install React Bootstrap, to install React Bootstrap we will use the following commands:

npm install react-bootstrap bootstrap
npm install bootstrap

React Bootstrap is the same as the regular bootstrap just it is implemented on a different way.

Before we can use React Bootstrap we must add it on top of the src/index.js file.

import 'bootstrap/dist/css/bootstrap.min.css';

Now after everything is set up correctly we can start styling our first React component the Cryptocurrency component, which is the component for every item (coin) on the list.

const styleCryptocurrency = {
  backgroundColor: "white",
  border: "solid 1px gray",
  padding: "10px",
  cursor: "pointer",
  display: "flex",
  flexDirection: "row",
}

const styleName = {
  padding: "0 5px",
  flex: "1",
  color: "#004e92",
}

const styleSymbol = {
  fontWeight: "bold",
  color: "grey",
  padding: "0 5px",
  marginLeft: "20px",
  flex: "6"
}

const stylePrice = {
  padding: "0 5px",
}

const cryptocurrency = (props) => (
  <div style={styleCryptocurrency}>
    <div style={styleName}>{props.name}</div>
    <div style={styleSymbol}>{props.symbol}</div>
    <div style={stylePrice}>{props.price}</div>
  </div>
);

Here we have added a couple of basic stylings for the component itself, name, symbol, and the price. And also we want to style our CryptoCurrencies component which is the container for the Cryptocurrency components.

import {Container} from 'react-bootstrap';

class CryptoCurrencies extends Component {
  render(){
    return(
      <Container>
        <Cryptocurrency name="Bitcoin" symbol="BTC" price="7000"/>
        <Cryptocurrency name="Ethereum" symbol="ETC" price="125"/>
        <Cryptocurrency name="XRP" symbol="XRP" price="0.1"/>
        <Cryptocurrency name="Bitcoin Cash" symbol="BCH" price="180"/>
      </Container>
    );
  }
}

Here we have imported the Container from the React Bootstrap library, and we have replaced the parent div with the Container which under the hood is nothing more thana div with class container. When we see the app now it is still not looking great but it will be improved over time in the next parts.

Part Overview

In this part, we have seen basics about how we can style React components also a couple of ways how we can do that, and when which one is best to be used. Later in the series, we will come back at styling React components when we will have dynamic data.

If you are interested to learn React much deeper, I recommend you to read this book:

The Road to learn React: Your journey to master plain yet pragmatic React.js

If you prefer a video course, I highly recommend you to take a look at this course on Udemy: