React Components

I. What is a React Component?

React component is a building block of any React app.

A typical webpage built with React may have several React components which presents a section of content.

For example, a Navbar, an Article, a Sidebar, a Footer, etc.

A component contains:

• Template
• Logic

const element = <h1>Hello World!</h1>

There are two types of React Components:

• Functional Components
• Class Components

II. React Component & JXS

React template uses JXS, which has almost identical syntax with HTML.

JSX allows us easily create these HTML styled-templates and components. Then, Babel transpiler converts all JSX template into HTML and render it to the DOM.

III. ReactDOM.render()

To render an HTML element to the DOM, we use the following syntax:

ReactDOM.render(<item to be rendered>, <where to be rendered>);

React components need to be rendered by the ReactDOM.render() method to appear in the DOM.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);