React Clarified: Building a Game in React

1. We will introduce our first React function, which is called a “component”.

2. Then we will render the component to the DOM. That is, we will display the React component on our page.

We will show how to add CSS styling to the page.

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.

We will be adding Flexbox CSS layouts to display a Tic-Tac-Toe board.

1. We will refactor the Board component so that the rendering of a Square is pulled out into a separate function.

2. We will show how to pass data in one direction from a parent component down to a child component, using the so-called props object.

1. We will show you how to make a React button.

2. We will make the Squares on our Tic-Tac-Toe Board into clickable buttons.

1. We will explain what component state is.

2. We will show you how to use the `useState` hook for managing state.

We want the Board to control the value of all 9 Squares, which we will achieve by lifting state up.

We will show how a child component can communicate with, and update, its parent.

We will show you how to set values in our `squares` state array.

1. We will show alternating `X`s and `O`s when players click on the board.

2. We will show which player has the next move.

1. We will create a function to calculate if a combination of moves has resulted in a win or not.

2. We will show the result of a winning combination in the status text.

1. We will ignore clicks on the board when a player has already won.

2. We will ignore clicks on squares that already have been filled.