Step 1

Create a component

Let's create our own component. Inside the "src" folder, create another folder called "components". Inside that, create a file called "Book.tsx"

src/components/Book.tsx

import React, { Component } from 'react';

export default class Book extends Component {
	render() {
		return <div>This is a book!</div>;
	}
}

In order to create a React component, there are 2 requirements: 1. You must import the default export from 'react': import React from 'react' , which allows you to use JSX or TSX in your file. 2. Your component class must have a render function that returns an HTML element, or your functional component must return an HTML element (more on this later).

Here we are creating class that is a React component and providing a render function, which just displays, "This is a book!" .

We've created a custom component, so let's use it in our App

src/App.tsx

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Book from './components/Book';

class App extends Component {
	render() {
		return (
			<div className="App">
				<header className="App-header">
					<Book />
					<img src={logo} className="App-logo" alt="logo" />
					<p>
						Edit <code>src/App.tsx</code> and save to reload.
					</p>
					<a
						className="App-link"
						href="https://reactjs.org"
						target="_blank"
						rel="noopener noreferrer"
					>
						Learn React
					</a>
				</header>
			</div>
		);
	}
}

export default App;

On line 4, we are importing our Book component and on line 11, we are rendering our component as if it were an HTML element. The placement of our Book component is arbitrary. If you place it on a different line, the position of the component will change when it rendered on the browser. You might notice that the content of the page is centered horizontally. We can change that by changing "App.css":

src/App.css

.App {
	text-align: center;
}

.App-logo {
	animation: App-logo-spin infinite 20s linear;
	height: 40vmin;
}

.App-header {
	background-color: #282c34;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* justify-content: center; */
	font-size: calc(10px + 2vmin);
	color: white;
}

.App-link {
	color: #61dafb;
}

@keyframes App-logo-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

We are just commenting out line 16.