Let's look at App.tsx, which has been created for us. This is an example of a class component. We're going to create our own class component now. Follow these steps:

1. Create a file called Confirm.tsx in the src folder, and enter the following into it:

import * as React from "react";

class Confirm extends React.Component {
  
}

export default Confirm;

We learned all about classes in Chapter 1, TypeScript Basics. Here we are creating a class that extends the standard Component class from React. Note that we've imported React at the top of our file, and also that we are exporting our class component using a default export at the bottom of our file.

2. Let's start to implement our Confirm class component now, by creating a render method:

class Confirm extends React.Component {
  public render() {
    return (
    );
  }
}

The render method determines what the component needs to display. We define what needs to be displayed using JSX. In simple terms, JSX is a mix of HTML and JavaScript. We'll explore it in more detail in the next section.

3. For the time being, let's enter the following in our render method:

public render() {
  return (
    <div className="confirm-wrapper confirm-visible">
      <div className="confirm-container">
        <div className="confirm-title-container">
 <span>This is where our title should go</span>
 </div>
        <div className="confirm-content-container">
          <p>This is where our content should go</p>
        </div>
        <div className="confirm-buttons-container">
          <button className="confirm-cancel">Cancel</button>
          <button className="confirm-ok">Okay</button>
        </div>
      </div>
    </div>
  );
}

At the moment, our render method looks a lot more like HTML than JavaScript, apart from that funny className attribute—shouldn't that be class?

We'll cover this and JSX in a little more detail in the next section, but before that, let's consume our Confirm component in the App component.

4. In App.tsx, we need to import our Confirm component class, as follows:

import Confirm from "./Confirm";

5. Our Confirm component can be referenced as <Confirm /> in JSX. So, let's add this to the JSX in App.tsx:

<div className="App">
  <header className="App-header">
    ...
  </header>
  <Confirm />
</div>

If we look at the browser page where our app is running, it should now look like the following:

6. We are going to make our component look more like a dialog using CSS. Let's create a file called Confirm.css, and enter the following into it:

.confirm-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
  z-index: 1;
}
.confirm-visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.confirm-container {
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.2em;
  min-width: 300px;
}
.confirm-title-container {
  font-size: 1.3em;
  padding: 10px;
  border-top-left-radius: 0.2em;
  border-top-right-radius: 0.2em;
}
.confirm-content-container {
  padding: 0px 10px 15px 10px;
}
.confirm-buttons-container {
  padding: 5px 15px 10px 15px;
  text-align: right;
}
.confirm-buttons-container button {
  margin-left: 10px;
  min-width: 80px;
  line-height: 20px;
  border-style: solid;
  border-radius: 0.2em;
  padding: 3px 6px;
  cursor: pointer;
}
.confirm-cancel {
  background-color: #fff;
  border-color: #848e97;
}
.confirm-cancel:hover {
  border-color: #6c757d;
}
.confirm-ok {
  background-color: #848e97;
  border-color: #848e97;
  color: #fff;
}
.confirm-ok:hover {
  background-color: #6c757d;
  border-color: #6c757d;
}

7. Now let's import our CSS in our Confirm.tsx:

import "./Confirm.css";

Our component in the browser page should now look like the following:

So, a React class component has a special method called render, where we define what our component displays in JSX.

In the next section, we'll take a little break from our confirmation component while we learn a little more about JSX.