Menu
I am new pretty new in Javascript world and I am trying to learn and understand React Native.
Why do I find babel and webpack in so many react-native boilerplates? (https://github.com/jhabdas/react-native-webpack-starter-kit)
If I understand correctly babel is for supporting older browsers but I am not using a browser with react-native. RN doesn't compile all js code to native?
Same thing with webpack - why would I need to bundle my js files if they are getting compiled by RN anyways?
635
"Modern Javascript works with all browsers", "Open source" and "Integration with lots of tools" are the key factors why developers consider Babel; whereas "Most powerful bundler", "Built-in dev server with livereload" and "Can handle all types of assets" are the primary reasons why Webpack is favored.
1 Answer. Show activity on this post. Babel is already included with react-native so you have the option of either writing in ES6+ or the older ES5 style.
React Native uses Babel to convert React syntax and the newer ES5+ syntax into code that can be run in a JavaScript environment that doesn't support those features. Out of the box Babel doesn't do anything. It basically parses the code and then generates the same code back out again.
If Babel is a translator for JS, you can think of Webpack as a mega-multi-translator that works with all kinds of languages (or assets). For example, Webpack often runs Babel as one of its jobs. Another example, Webpack can collect all your inline CSS styles in your Javascript files and bundle them into one.
Babel is already included with react-native so you have the option of either writing in ES6+ or the older ES5 style.
To clarify, React-native runs on the javascript core on mobile, this means its not in a browser but still renders the JS code so babel is there, in-between, to allow you to write next gen JS code and use React's JSX code.
Here is a list of supported ES6+ features
Some people want additional features not in Babel that ships with react-native so they end up using webpack and custom Babel configurations. Recently they've added support for things like async functions (ES7) so personally, i don't think you need to go the webpack route unless you have a very specific need.
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
