React Components

Learning Objectives

• Learn to Think in React
• Build Components
• Put components inside other components

Thinking in React

The React Docs are a key resource. They are very well written, however a lot of the concepts can take a while to understand. So don't worry about having to read things a few times.

The React docs always recommend starting with a mock up of what the app should look like and then, break that mock up into a component hierarchy:

Then, you should build a static version in React.

Later, you'd want to start incorporating your data and using state/props (later lesson).

For now, let's build a static version of a small app

Below, we can identify several components

• app (blue)
  • div with the following inside:
    • header (red)
      • an h1 inside
    • player scores (mustard yellow)
      • an h2 and an h3
    • board (fuchsia)
      • squares (green)
        • an h4 styled to look good as a played X or O

Let's Build our Mockup in React

Our First Component

There are a few ways to write React components, some are outdated, some are bleeding edge/very new, some are for static components are some are for holding state.

For ease of learning, we are just going to learn to write our components one way. As you grow more experienced and comfortable with React, you can incorporate the right one(s) for your project.

in App.js

Declare a class that extends from React Component

At minimum, this class MUST HAVE a render function. The purpose of React is to make views, so a component must render some view.

App.js

class App extends React.Component {
  render() {}
}

Let's render that h1 inside our render function and let's render our App in our ReactDOM.render function

App.js

class App extends React.Component {
  render() {
    return <h1> React Tac Toe </h1>;
  }
}

When we refresh our view it should look the same.

If we've installed React Dev tools, we can go over to the React tab and see our component

Making a Component inside another component

According to our mockup, our App will have 4 components

• header
• two player components
• board

With react, we can only render ONE component. That component can have numerous components inside of it.

Let's make our header component

• mkdir src/components
• touch src/components/Header.js

in Header.js

Header.jsx

import React from "react";

class Header extends React.Component {
  render() {
    return <h1> React Tac Toe</h1>;
  }
}

In App.js we must import our component before we use it

App.js

import React from "react";
import Header from "./components/Header";

class App extends React.Component {
  render() {
    return <Header />;
  }
}

export default App;

We still haven't changed how things should look so let's use the dev tools to check everything is in order:

Let's make a player scoreboard

It should be made up of

• a div and inside that div
  • an h2 with the text Player
  • an h3 with the text Wins:

And have that component render in our app:

GOTCHA To return multiple lines of code in a return statement - you must wrap that code in parenthesis

Example:

return (
  <nav>
    <ul>
      <li></li>
    </ul>
  </nav>
);

GOTCHA: The parenthesis must start on the same line as a return

This will error:

return
(
  <nav>
    <ul>
      <li></li>
    </ul>
  </nav>
)

GOTCHA : You can only return 1 component. However, you can have as many components nested inside. Let's wrap our Header and Player components in a div to make it work

App.js

class App extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <Player />
      </div>
    );
  }
}

Since a main feature of React is reusable components we can just copy our Player again:

App.js

class App extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <Player />
        <Player />
      </div>
    );
  }
}

A Sneak Peak of a Lesson in the Near Future

We know we have a player X and a player O, and we want to be able to customize our components. We can pass custom properties to our Player components, using props (short for properties). props is a special term in React. Let's see it in action.

Let's make a custom prop called whichPlayer and pass the appropriate player name

App.js

class App extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <Player whichPlayer="X" />
        <Player whichPlayer="O" />
      </div>
    );
  }
}

Now, we need to access these properties inside our Player component. Our player component is a child of App, and thus has access to props. Don't worry if this doesn't make sense yet. We'll be returning to this concept over and over again and it'll start to come together.

Player.jsx

class Player extends React.Component {
  render() {
    return (
      <div>
        <h2>Player {this.props.whichPlayer} </h2>
        <h3>Wins: </h3>
      </div>
    );
  }
}

Now we can see our custom property whichPlayer rendering with its value, depending on which component it is:

Let's make one more component for our App, the board:

• touch src/components/Board.jsx

Board.jsx

import React from "react";

class Board extends React.Component {
  render() {
    return <div>the board!</div>;
  }
}

export default Board;

Don't forget to add the Board component in our App

You Do

On your own, and then we'll review ~ 10 minutes

• make one more component called Square, made up of a div, inside the div put an h4 element, inside the h4 put some text like the word square
• gotcha! divs have a height and width of 0 when they are empty. Be sure to put in an h4 and some text
• render 9 squares inside the Board
• Extra - Read ahead to learn how to incorporate CSS

Final Result:

Chrome/React Dev tools view