React.js without JSX

Last Updated : 04 Apr, 2023

JSX: Consider the following code snippet,

const sample = <h2>Greetings</h2>;

The above code snippet somewhat looks like HTML, and it also uses a JavaScript-like variable but is neither HTML nor JavaScript, it is JSX. The JSX is basically a syntax extension of regular JavaScript and is used to create React elements. These elements are then rendered to the React DOM. Each JSX element is just to make use of React easy and for calling React.createElement(component, props, ...children) with less work. So, anything that is done with JSX can also be done with just plain JavaScript.

Most people use JSX with react, but that requires Babel which converts the ES6 code to a code that is compatible with the browsers. It means we need to a something like webpack. If we don't use JSX then we don't have to worry any about that.

JSX-less approach over the JSX-focused React Application: It is advisable to stick to JSX for your medium-sized or bigger projects. It still helps to understand what happens under the hood. For smaller React projects, where you don’t want to add a complex build workflow, or for multi-page-applications, you could consider the JSX-less version though.

Example 1: Using React without JSX using CDN (without Node). Following is a simple Html code to print Hello World using React without JSX.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src=
"https://unpkg.com/react@16/umd/react.development.js">
    </script>
    <script src=
"https://unpkg.com/react-dom@16/umd/react-dom.development.js">
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript">
      var e = React.createElement;
      ReactDOM.render(
        e('h1', null, 'Hello, world!'),
        document.getElementById('root')
      );
    </script>
  </body>
</html>

Output:

Example 2: Using React without JSX in Application.

Creating React Application:

Step 1: Create a React application using the following command:
```
npx create-react-app rwjsx
```
Step 2: After creating your project folder i.e. rwjsx, move to it using the following command:
```
cd rwjsx
```

Project Structure: It will look like the following.

Now write down the following code in the index.js file in the src folder after all import statements.

index.js

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

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);