As described previously, React is a view engine, enabling you to decompose the app into smaller units, called components.
Let's review the auto-generated App component:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}
 
export default App;

Before explaining class components, there are additional things to notice here:

import logo from './logo.svg';
import './App.css';

CRA-based projects use Webpack behind the scenes to build, bundle, and package your app. The default configuration supports importing static assets and CSS files directly in code. Then, those references are bundled and included as part of the build's finalized artifacts.

Back to components. The App component is a React class component. React has two types of component — class and functional. Class components are required when you need an instance-specific behavior or state, including lifecycle hooks. Otherwise, you should prefer implementing it as a functional component instead, as demonstrated later.

To create React class components, you simply write a class that extends React.Component. Then the minimum necessity is implementing a render function.