React Create Element - React Without JSX

React has taken the top spot among all other JS frameworks and libraries, according to the Stack Overflow survey, 2021. The reason might be anything from being open-source to flexible (it can work with any other package or library to create an awesome app) or having JSX as its syntax which is very popular due to its ease of access.

But, JSX is not the only syntax that React has. We can also make apps without using JSX with React.createElement() which can be declared as the only syntax of React.

React is an open-source library and there are many things that it has to offer to a developer like virtual DOM, Props, etc, but the thing is it can be a little tricky at first time due to its diverse nature. This is why a comprehensive syllabus for React JS is crucial to your learning experience and can help you learn to React in a structured way.

In this blog, we will first uncover the reason why React.createElement has been called the original Syntax of React and then we will dive deep into the topic of React without JSX or React with createElement.

Let’s start…

In this article

1. What is React.createElement?
2. React.createElement Syntax
3. React.createElement Arguments
4. Understanding the Render Method
5. An Alternate Way
6. Wrapping it up
7. The Route Most Taken

What is React.createElement?

React.createElement can be considered as the original syntax of React because it allows us to write codes in React with just plain JS which the browser can understand and we don’t need additional bundlers like webpack, Flux, ES6, React-Router, etc.

But with JSX, we need things like ES6 classes and the Babel webpack to convert these ES6 classes into ES5 so that our browser can easily understand them.

Then Why JSX?

JSX stands for JavaScript Syntax Extension which means that it is just an extension of the original syntax that has made the code readable, understandable and editable with the help of ES6 classes.

We can also say that it is nothing more than a syntactic form of the syntax that makes it easy to use and understand with the help of ES6 classes, and Babel converts these classes back into ES5 for our browser to understand.

Every code written in JSX is first converted into createElement syntax and then sent to the browser.

The image given below will help you understand this concept easily.

Continue Reading.