Is Babel Mandatory for ReactJs application

Comments

[peerreynders]

Babel, JSX, and Build Steps

• "No! Check out React Without JSX to learn more."
• "No! Check out React Without ES6 to learn more."

Which highlights why Babel is used in the majority of cases:

• People want to use JSX but that isn't part of vanilla JavaScript and they don't want to write code like this:

import { createRoot } from 'react-dom';
import { createElement }  from 'react';

function Hello({ toWhat }) {
  return createElement('div', null, `Hello ${ toWhat }`);
}

const root = createRoot(document.getElementById('root'));
root.render(createElement(Hello, {toWhat: 'World'}, null));

but like this:

import { createRoot } from 'react-dom';

const Hello = ({ toWhat }) => <div>Hello {toWhat}</div>;

const root = createRoot(document.getElementById('root'));
root.render(<Hello toWhat="World" />);

• People like to use the latest ECMAScript features which may not yet be supported by all browsers. So Babel transforms the original JavaScript to a subset that is well supported by most browsers and polyfills the rest.

Why you don’t need Babel

It needs to be emphasized that Babel itself does not become part of the application - it is just a build tool. However the code it generates tends to be larger as more succinct modern JavaScript features are replaced with more verbose transforms and all the necessary polyfills.

You are not explaining why you are asking this question; given that create-react-app handles everything for you, it shouldn't be a concern.

So the question sounds like an XY problem.

---

Also given what you need Preact is often enough.

[Jon Randy 🎖️]

No

[PREM KUMAR]

yes to reduce the burden of writing html in javascript