DEV Community

Discussion on: Is Babel Mandatory for ReactJs application

View post
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.