React components are individual sections of code that reusable and return HTML.

Here is a functional “Hello World!” React component:

import React from 'react';

function HelloWorld() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default HelloWorld;

React components are always uppercase like <React> while React requires HTML to be formatted in lowercase like <html>. Using lower case in HTML is a common convention but is not required by HTML, the lowercase requirement comes from React.

React components can be nested inside one another.

export default function HelloPage() {
  return (
    <div>
      <h1>I have something to say. </h1>
      <HelloWorld />
    </div>
  );
}