Onjsdev

Share


react without jsx

React Without JSX


By onjsdev

Feb 7th, 2024

JSX is an important part of Reactjs. However it is not strictly required to use it to build user interfaces. Let's take a look at how to accomplish this.

What is JSX?

JSX is a syntax extension that allows us to write HTML-like code directly in our JavaScript files. For example, instead of writing plain JavaScript to create a component, we can use JSX to write something like this:

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, JSX!</h1>
      <p>This is a JSX component.</p>
    </div>
  );
};

export default MyComponent;

As you see, JSX makes it easier to write and read code, as it look alike the HTML markup.

However, sometimes we need the power of JavaScript when creating components. This is where react.createElement comes into play.

React Without JSX

To use React without JSX, we need to manually write the equivalent React.createElement() calls to create React elements and components.

The createElement function takes three arguments:

  • the type of the element (e.g., a string representing an HTML - tag or a custom component),
  • optional attributes (or props),
  • children elements.

Let’s rewrite the previous example without JSX:

import React from 'react';

const MyComponent = () => {
  return React.createElement('div', null,
    React.createElement('h1', null, 'Hello, JSX!'),
    React.createElement('p', null, 'This is a JSX component.')
  );
};

export default MyComponent;

In this version, we use React.createElement to create each element. While this approach is more verbose, it is functionally equivalent to the JSX version.

Now, let’s see different examples of the react.createElement on how you can create different user interfaces.

Creating Nested Elements

Components are mostly nested, if you want to add children to an specific element, you can pass additional arguments to the createElement method, like this:

const element = React.createElement('div', null,
  React.createElement('h1', null, 'Hello, world!'),
  React.createElement('p', null, 'This is a paragraph.')
);

Here is the corresponding HTML structure:

<div>
  <h1>Hello, world!</h1>
  <p>This is a paragraph</p>
</div>

Adding Props To Elements

You can also add props to your elements by passing an object as the second argument to the createElement method. For example, to add a class name to an element, you can write:

const element = React.createElement('div', { className: 'container' },
  React.createElement('h1', null, 'Hello, world!'),
  React.createElement('p', null, 'This is a paragraph.')
);

This code creates a div element with two child elemtents and pass a classname props to it.

<div className="container">
  <h1>Hello, world!</h1>
  <p>This is a paragraph</p>
</div>

Conclusion

While React with JSX is the standard and recommended way of writing React components, it’s essential to understand that JSX is just a convenient syntax extension and not a requirement for using React.

If you want to learn more about reactjs, then you can check the following articles:

Thank you for reading.