Creating your own JSX elements

Components are the fundamental building blocks of React. In fact, they can be thought of as the vocabulary of JSX markup, allowing you to create complex interfaces through reusable, encapsulated elements. In this section, we’ll delve into how to create your own components and encapsulate HTML markup within them.

Encapsulating HTML

We create new JSX elements so that we can encapsulate larger structures. This means that instead of having to type out complex markup, you can use your custom tag. The React component returns the JSX that goes where the tag is used. Let’s look at the following example:

import * as ReactDOM from "react-dom";
function MyComponent() {
  return (
    <section>
      <h1>My Component</h1>
      <p>Content in my component...</p>
    </section>
  );
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyComponent /&gt...