DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
sudhir manne
sudhir manne

Posted on

Is Babel Mandatory for ReactJs application

Oldest comments (3)

Collapse
 
prems5 profile image
PREM KUMAR

yes to reduce the burden of writing html in javascript

Collapse
 
jonrandy profile image
Jon Randy

No

Collapse
 
peerreynders profile image
peerreynders • Edited on

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.

πŸ‘‹ Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: