How to Add React Elements – Step-by-Step Guide with Best Practices

When learning React, one of the first things you’ll come across is React elements. They are the building blocks of any React application. To truly master React, you need to understand what React elements are, when to use them, and how to add them properly.

Let’s break this down step by step.

What is a React Element?

A React element is a simple object that describes what you want to see on the screen.

Think of it as a blueprint for UI.
Elements tell React what to render (e.g., <h1>Hello</h1>).
They are immutable – once created, you can’t change them directly.

How to Add React Elements

Import React (not always required in React 17+)

Create a React Element

You can add a React element in two ways:

Method 1 – Using JSX (Recommended)

Method 2 – Using React.createElement()

👉 JSX is just syntactic sugar for React.createElement(). Both methods do the same job, but JSX is easier to read and write.

Render React Elements

To show the element on the screen, you need to use ReactDOM.render().

Here’s what happens:

element → The React element you created.
document.getElementById("root") → The HTML container where React injects UI.

Full Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>React Elements Example</title>
  </head>
  <body>
    <div id="root"></div>
    
    <script type="text/javascript" src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script type="text/javascript" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script type="text/javascript">
      const element = React.createElement("h1", null, "Hello, React Element!");
      ReactDOM.render(element, document.getElementById("root"));
    </script>
  </body>
</html>

When and Where to Use React Elements

When: Use them whenever you want to describe a piece of UI.
Where: Inside components, inside render() functions, or directly in ReactDOM.render().
How: Prefer JSX for readability, and use React.createElement() only when JSX is not available.

Best Practices for Adding React Elements

Use JSX – It’s cleaner and closer to HTML.
Keep elements small & reusable – Break UI into multiple elements/components.
Use functional components – Instead of writing only elements, wrap them in components for reusability.
function Welcome() { return <h1>Welcome to React!</h1>; } ReactDOM.render(<Welcome />, document.getElementById("root"));
Organize files – Keep your components in separate files for maintainability.
Follow naming conventions – Use PascalCase for components (MyButton), lowercase for elements (<div>, <h1>).