How to add React elements ?

In React, elements are the smallest building blocks of React applications. React elements are plain JavaScript objects that describe what you want to appear on the screen. Unlike browser DOM elements, React elements are lightweight and can be efficiently updated.

Creating a React Element

React elements can be created using the React.createElement() method or JSX syntax (which is simpler and preferred). Here’s an explanation of both approaches with detailed examples.

Using React.createElement()

The React.createElement() method takes three arguments:

The type of element you want to create (e.g., div, h1, p, etc.).
An object containing any attributes or props for the element (like className, id, etc.).
The children of the element, which can be either a string (text) or other React elements.

Example 1: Simple `div` element

import React from 'react';
import ReactDOM from 'react-dom';

const element = React.createElement(
  'div', 
  { className: 'greeting' }, 
  'Hello, World!'
);

ReactDOM.render(element, document.getElementById('root'));

Here:

The first argument is 'div', specifying that we want a <div> element.
The second argument is { className: 'greeting' }, specifying that the <div> should have a class of 'greeting'.
The third argument is 'Hello, World!', which is the text content of the <div>.

This code will render the following HTML:

<div class="greeting">Hello, World!</div>

Example: Creating an h1 React Element

Open src/App.js and replace its contents with the following code:

import React from 'react';

function App() {
  // Creating a simple React element
  const element = React.createElement(
    'h1', // The HTML tag
    { className: 'greeting' }, // The props (like class, id, etc.)
    'Hello, React Element!' // The content
  );

  return (
    <div>
      {element}
    </div>
  );
}

export default App;

Using JSX (Preferred Approach)

JSX is a syntax extension for JavaScript that looks similar to HTML and makes it much easier to create React elements. Under the hood, JSX is transformed into React.createElement() calls.

Example 2: Simple `div` element with JSX

import React from 'react';
import ReactDOM from 'react-dom';

const element = <div className="greeting">Hello, World!</div>;

ReactDOM.render(element, document.getElementById('root'));

This JSX is much more readable and concise than the createElement() syntax. It automatically gets converted into a React.createElement() call during the build process.

While React.createElement() is powerful, React developers typically use JSX (JavaScript XML) because it is much easier to read and write. JSX is syntactic sugar for React.createElement().

Here’s how you would rewrite the previous example using JSX:

import React from 'react';

function App() {
  return (
    <>
      <h2>Multiple React Elements Example</h2>
      <p>This is the first element.</p>
      <p>This is the second element.</p>
    </>
  );
}

export default App;