Can React be used without JSX? How?

Brief Answer

Yes, React can be used without JSX. JSX is just syntactic sugar for the React.createElement() function. All React functionality is available without JSX, although the code becomes more verbose.

Main way to use React without JSX:

• Using React.createElement() directly

Full Answer

JSX is not required to work with React. It’s just a convenient way of writing that compiles to regular React.createElement() calls.

Example of using React without JSX

// With JSX
const element = <div className="container">
  <h1>Hello, world!</h1>
  <p>This is an example with JSX</p>
</div>;
 
// Without JSX (same result)
const element = React.createElement(
  'div',
  { className: 'container' },
  React.createElement('h1', null, 'Hello, world!'),
  React.createElement('p', null, 'This is an example without JSX')
);

When you might need to avoid JSX

1. Educational purposes — to understand how React works under the hood
2. Build limitations — when there’s no ability to configure JSX transpilation
3. Dependency minimization — to reduce bundle size

Functional components without JSX

// With JSX
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}
 
// Without JSX
function Welcome({ name }) {
  return React.createElement('h1', null, 'Hello, ', name, '!');
}

Conclusion: React is fully functional without JSX, but JSX makes code more readable and convenient to write.

Want more articles for interview preparation? Subscribe to EasyAdvice, bookmark the site, and improve yourself every day 💪