React.createElement

React is a JavaScript library for building user interfaces and provides reusable UI components that use virtual DOM to update only the necessary parts of the DOM in response to changing data. React.createElement is a function that creates React elements based on the provided element type. This function translates JSX code into a format that React can render. Let us explore the syntax, parameters, and usage of the react.createelement function in react.

Syntax

The React library should be imported to enable the usage of React functionalities in the application.

Parameters

type

The type parameter represents the type of the React element to be created. It can be a string representing an HTML tag or a React component.

Examples: div, button etc.. or a CustomComponent in React.

props

The Props or properties parameter is an object containing key-value pairs, that represent the properties or attributes of the React element.

Example: The props can be any attributes associated with the element such as className, onClick, style etc...

children (optional)

The children is an optional parameter that represents the content nested within the React element. It can include other React elements, strings, or a combination. A react.createelement can have another React.createElement() as children to create nested components.

Returns

The React createElement returns a React element based on the provided parameters that can be rendered to the DOM. The returned element has the following properties:

type

The type property of the returned React element is the type of the created element. It could be a string representing an HTML tag (e.g., div, span) or a reference to a React component.

props

The props property holds an object containing all the properties and attributes assigned to the React element during its creation except the key and ref attributes. It includes information such as className, onClick, or any custom props passed.

ref

The ref property is the ref attribute passed when creating the component. A ref is generally used for creating a reference to the underlying DOM node or a React component instance.

key

The key property is a unique identifier assigned to elements created in a list. It helps React efficiently update and re-render components in the DOM and is highly used in dynamic lists.

Caveats

• React follows the principle of immutability, that a state and props should not be directly mutated. However, when using react.createelement, it's essential to note that the created elements themselves are immutable. Once an element is created, its properties and children cannot be modified directly. Instead, developers should update the component's state or props, triggering a re-render to reflect changes.
• When creating custom components in React, it's crucial to capitalize their names. React distinguishes between HTML elements (lowercase) and custom components (uppercase) using upper or lowercase. Failing to capitalize a custom component may lead to the creation of an HTML element or errors.
• While React.createElement allows passing children as multiple arguments, using JSX or an array directly for multiple children is often more readable and maintainable.

Usage

Let us consider the example of a product card component that displays an image, title, and price. The React.createElement can be used to create the component without JSX.

Creating an Element Without JSX

Explanation:

• A ProductCard function is defined that takes three props: image, title, and price.
• Inside the function, we use React.createElement to construct the following elements:
  • A div with the class that will act as a parent container to all other elements in the product card.
  • The children elements such as the img element for the product image, the h2 element for the product title, and the p element to display the price.
• Finally, the function returns the constructed div element, representing the entire product card.

Creating an Element Using JSX

We can also create the same element by only using JSX in React. The following example illustrates this,

In the above example, the product card component is created using JSX elements which are and it provides better readability.

Steps to Create a React Application

Development Environment

Install Node.js with its package manager(NPM) in your system. You can install it from Node website. Then install Visual Studio Code (VS Code) or any IDE for development and you can also consider installing these extensions:

• React Extension Pack for faster development with snippets, debugging tools, and automatic error highlighting.
• ESLint for maintaining code style consistency and catching potential errors with this linter.
• Prettier: Code formatter for automatically formatting your code for readability and maintainability.

Create a New React Project

Use Create React App for a quick and easy setup. Enter the following command to create the react application.

Replace my-app with your application name. Then navigate to your project directory and open src/App.js which is the main application file and has the basic component named App. The application will have the following file structure.

Let's create a basic heading using React.createElement and render it to the browser with ReactDOM.render.

Explanation:

• The LearningElement is a div element created using the react.createelement function with the class name of 'app-container'. It contains an h2 element with a text.
• Inside the div, there's a list with three elements and finally a paragraph element with a text.
• The element is finally rendered rendered to the DOM using the ReactDOM.render method. We will learn more about this method in the next section.

Other key directories include public which is used to store static assets such as images or logos, and node_modules which has all the dependencies that are being used in this project. You can install any additional packages or dependencies required for your project using the npm install command.

Run Your Application

In your terminal, execute the following command:

This starts the development server and opens your app in a browser window (usually at http://localhost:3000).

When your application is ready for deployment, you can build the production version using the following command,

Explore more about creating a new project in react.

Understanding the Render Method

The ReactDOM.render method in React is responsible for rendering React elements to the virtual DOM and then to the actual DOM. This integrates the React components into the web page, updating the user interface efficiently.

Syntax

• The element is the React element you want to render. It can be a simple HTML tag, a custom component, or a complex structure of nested elements.
• The container is the DOM HTML element where the React component should be injected.
• The callback is an optional function that gets called after the rendering is complete. It is usually used for any post-rendering tasks or cleanup.

The working of the rendering involves the following steps:

• Comparison of the existing DOM structure and the new element you're trying to render.
• Then the ReactDOM.render only modifies the minimal parts of the DOM that differ from the desired UI state mentioned in the element.
• Once the DOM is updated to reflect the desired state, the optional callback function is executed (if provided).

Understanding the React.createElement with the Help of an Example

Let's explore another simple example that demonstrates the use of React.createElement to create and render a React element. Imagine we want to build a "Learning" component that takes a name prop and displays a general message.

Explanation:

• We define a simple functional component that takes a props parameter and returns a React element created with React.createElement.
• We use react.createelement to create a React element by passing the Learning component as the type and providing the name prop as part of the props object.
• The ReactDOM.render method is then used to render the created React element to the actual DOM. The final output in the HTML will be a rendered div with the message, dynamically personalized based on the provided name prop.

An Alternate Way

While React.createElement is fundamental, JSX provides a more concise and readable syntax for creating React elements. Here is a comparison between JSX and React.createElement.

We can also assign React.createElement to a variable and use that variable to create elements for better readability and simplification.

We assign react.createelement to a variable named elem. This allows us to use a shorter reference to the createElement function throughout the code.