DEV Community

sudhir manne
sudhir manne

Posted on

Is Babel Mandatory for ReactJs application

Top comments (3)

Collapse
 
peerreynders profile image
peerreynders • Edited

Babel, JSX, and Build Steps

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));
Enter fullscreen mode Exit fullscreen mode

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" />);
Enter fullscreen mode Exit fullscreen mode
  • 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.

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

No

Collapse
 
prems5 profile image
PREM KUMAR

yes to reduce the burden of writing html in javascript