ReactJS - React Without JSX

---

---

Let us learn how to use createElement to create react component instead of default JSX in this chapter.

What is JSX?

JSX is a JavaScript extension to create arbitrary HTML element using syntax similar to HTML. This will simplify the HTML document creation as well as easy to understand the document. React will convert the JSX into JavaScript object consisting of React's createElement function call before executing it.

It improves the performance of the application. Also, React allows the HTML document creation using pure createElement function without JSX as well. This enables the developer to directly create HTML document in a situation where JSX does not fit well.

What is createElement?

React.createElement is the core React API which is used to generate and render the HTML document. createElement method has three arguments,

• component name

• props as objects

• inner content / children of the component

Here, children may refer an another component, again created using createElement. createElement can be nested to any level. The sample code to create a component using React.createElement is as follows −

React.createElement('h1', null, 'Hello World')

This will render the below mentioned HTML document

<h1>Hello World</h1>

Working example

Let us create a component BookListUsingCreateElement to learn and understand the createElement method.

First of all, create a new application using create-react-app

create-react-app myapp

Then, add a new component, BookListUsingCreateElement under components folder. The initial code is as follows −

import React from 'react'
class BookListUsingCreateElement extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         list: ['C++ Programming', 'Java Programming', "JavaScript Programming"]
      };
   }
}
export default BookListUsingCreateElement

Here, list is the initial collection of books available in the component.

Now, Let us render books using createElement in the render function as shown below.

render() {
   let content = React.createElement(
      'ol',
      null,
      this.state.list.map(
         (item) =>
         React.createElement('li', null, item)
      )
   )
   return content;
}

Here, we have used createElement in two places. First of all, we used it to create the top-most layer of the component, which is ul HTML element. Second, we have used createElement multiple times to create the li element based on the books available in the list. We have used map function to loop over all books in the list and create a li element for each book using React.createElement('li', null, item) code.

Finally, the complete code of the component is as follows

import React from 'react'
class BookListUsingCreateElement extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         list: ['C++ Programming', 'Java Programming', "JavaScript Programming"]
      };
   }
   render() {
      let content = React.createElement(
         'ol',
         null,
         this.state.list.map(
            (item) =>
            React.createElement('li', null, item)
         )
      )
      return content;
   }
}
export default BookListUsingCreateElement

Let us use our newly create component through App.js as shown below −

import BookListUsingCreateElement from "./components/CreateElement/BookListUsingCreateElement";
function App() {
   return (
      <div>
         <BookListUsingCreateElement />
      </div>
   );
}
export default App;

Now, run the app using below command

npm start

The application will start in the default browser and show below result