1. We will compose additional components together, showing a parent-child hierarchy between them.
2. We will add temporary styling to our components, using inline styles.

Additional Components

Currently, we have just one component in our app, the Game component.

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

const Game = () => {
  return (
    <div>
      Game
    </div>
  );
};

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

We will add two other components during this video: a Board component, and a Square component. The Game component will contain the Board component, and in turn, the Board component will contain the Square component. Each component is a building block in our app.

Before you get started, make sure your development server is running in Terminal, and that the app is showing in the browser.

Inline Styles

Since we will be adding two new components, we will use inline styles to more clearly differentiate the components from each other. In JavaScript, we can create an object containing the styles that we want to add to a component.

For example, we want to change the background color, and add some margin and padding to our Game component. We will assign the object containing these styles to a variable called gameStyles. Note that we camel-case and remove hyphens from attribute names in JavaScript, and wrap values that are strings in quotation marks.

const gameStyles = {
  backgroundColor: 'salmon',
  margin: 40,
  padding: 20,
}

In CSS, the background color would be written as:

background-color: salmon;

We can omit the pixel unit in JavaScript as it is the default. In CSS, the margin would be:

margin: 40px;

We can now add the gameStyles object to our Game component. We add a style property to the JSX div tag. The style property – or simply style “prop” as you will more frequently hear – is followed directly by an equals sign in JSX. The equals sign is then followed directly by a pair of curly braces:

<div style={...}></div>

We can refer to the curly braces as a “JSX container”. Inside the JSX container, we can put any valid JavaScript expression.

We will put our gameStyles variable inside the JSX container:

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

const gameStyles = {
  backgroundColor: 'salmon',
  margin: 40,
  padding: 20,
}

const Game = () => {
  return (
    <div style={gameStyles}>      Game
    </div>
  );
};

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

See the effect in the browser.

Instead of putting the gameStyles variable inside the JSX container, we can directly put the entire gameStyles object, so we don’t need a separate variable declaration.

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

const Game = () => {
  return (
    <div style={{      backgroundColor: 'salmon',      margin: 40,      padding: 20,    }}>      Game
    </div>
  );
};

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

Next, let’s add a Board component, above the Game component. We will add some inline styles to the Board.

const Board = () => {
  return (
    <div style={{
      backgroundColor: 'skyblue',
      margin: 40,
      padding: 20,
    }}>
      Board
      <Square />
    </div>
  );
};

We will now render the Board component within the Game component.

const Game = () => {
  return (
    <div style={{
      backgroundColor: 'salmon',
      margin: 40,
      padding: 20,
    }}>
      Game
      <Board />    </div>
  );
};

We have composed the Board component within the Game component. We say that the Game component is the parent of the Board component. We can also say that the Board component is a child of the Game component.

Next, let’s add a Square component, above the Board component. We will add some inline styles to the Square component.

const Square = () => {
  return (
    <div style={{      backgroundColor: 'gold',      margin: 40,      padding: 20,    }}>      Square
    </div>
  );
};

We will now render the Square component within the Board component.

const Board = () => {
  return (
    <div style={{
      backgroundColor: 'skyblue',
      margin: 40,
      padding: 20,
    }}>
      Board
      <Square />    </div>
  );
};

Code Snapshot

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

const Square = () => {
  return (
    <div style={{
      backgroundColor: 'gold',
      margin: 40,
      padding: 20,
    }}>
      Square
    </div>
  );
};

const Board = () => {
  return (
    <div style={{
      backgroundColor: 'skyblue',
      margin: 40,
      padding: 20,
    }}>
      Board
      <Square />
    </div>
  );
};

const Game = () => {
  return (
    <div style={{
      backgroundColor: 'salmon',
      margin: 40,
      padding: 20,
    }}>
      Game
      <Board />
    </div>
  );
};

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

View the outcome in the browser. We can clearly see our three components, and the hierarchical relationship between them.

Summary

We composed some React components, with a parent-child relationship between them, and we showed you how to add an inline style prop in JSX.

Next Up…

In the next video, we will show you how to add layouts using Flexbox CSS.