Why does React require Babel and Webpack to work?

Question

I was looking at the wiki page of vue.js and saw this:

When compared to React development, Vue can be integrated to an existing web application much more easily. Normally, a web application can start using Vue immediately by simply including the Vue.js JavaScript library. Usage with Webpack or Browserify, are not strictly necessarily. This is in stark contrast to React development where Usage with Webpack and Babel is unavoidable, therefore making converting existing web application much more difficult.

Can someone explain why React needs webpack and babel? I thought you can just drop in the link to the CDN of React and it will work?

Answer 1

No, Babel and Webpack is not necessary for React stack. You can still find other alternatives to build your favourite stack such as Browserify and Gulp.

However, if you want to make things easier, I do recommend you learn and use Babel and Webpack together with React because:

• You can use modules.
• You can use JSX with ES6.
• It support a lot of browsers
• You can use more advanced features (async/await) etc

With webpack

• You can use different loaders for sass, less, postcss etc
• You can use different plugins to optimise your build such as Uglify, HotModuleReplacement, Chunks etc

There are many more advantages to use webpack which you can find here

Answer 2

Can someone explain why React needs webpack and babel? I thought you can just drop in the link to the CDN of React and it will work?

React doesn't "need" babel or webpack but the library is built on the concept of using ES6 javascript syntax and JSX (essentially HTML in JS).

React however can be used without ES6 and JSX which would remove the initial need for Babel but you would lose the potential benefits of ES6 and JSX.

Webpack is separate from React but commonly used in React projects for reasons MattYao mentioned.

In comparison to Vue, JSX to me brings the benefits of containing html, css and JS in one file/component which is what Single File Components in Vue also try to achieve. These would also require a build step using something like webpack as well.