Menu
I just started using React JS ... I'm sorry but I am confused on what is the difference between type="text/babel" and type="text/jsx"
and when do I use them.. please help me understand.
200
If you work on a React project, chances are you have to deal with Babel. It is needed for 2 main tasks: To compile JSX into React.
TypeScript is a language that is a syntactic-superset of JavaScript. JSX is FaceBook's XML-like syntax extension to JavaScript, not a language per se.
JSX: JavaScript XML Utilizing JSX allows us to write HTML elements in JavaScript, which is then rendered to the DOM. ES6 (aka: ECMAScript 6, JavaScript 6, or ECMAScript 2015) is the “6th version” of JavaScript, released in 2015.
JSX is an extension to JavaScript which allows us to write XML-like syntax to define DOM elements, which are translated by Babel into vanilla JS. Webpack is responsible for bundling all of our components together and running a local development server to test our code in the browser.
Babel is a transpiler that turns input code into "pure" JavaScript.
JSX is a syntax sugar over JavaScript. You write .jsx and transpile it to .js using a transpiler (typically, Babel).
When you write text/babel you are saying to the Babel library that you want to transpile that script into pure JavaScript.
In case you write text/jsx you are saying your script is in .jsx and you need a transpiler to parse your code.
If you want to write .jsx and/or ES6 without configuring a bundler like webpack or browserify, load Babel through a CDN and use text/babel for simplicity.
113
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
