Babel and JSX
What Is Babel?
Babel is a JavaScript compiler that can translate markup or programming languages into JavaScript.
With Babel, you can use the newest features of JavaScript (ES6 or ECMAScript 2015).
Babel is available for different conversions.
React uses Babel to convert JSX into JavaScript.
The following statement is needed for using Babel:
<script type="text/babel">
...
</script>
|
What Is JSX (JavaScript XML)?
JSX is an XML/HTML like extension to JavaScript.
As you can see below, JSX is not JavaScript nor HTML.
JSX is an XML syntax extension to JavaScript that also comes with the full power of ES6 (ECMAScript 2015).
Just like HTML, JSX tags can have a tag names, attributes, and children.
If an attribute is wrapped in curly braces, the value is a JavaScript expression.
Note that JSX does not use quotes around the HTML text string.
const element = <h3>Hello World!</h3>;
|
JSX Expressions
Expressions can be used in JSX by wrapping them in curly
{ } braces.
Twenty years ago we had Johnny Cash, Bob Hope and Steve Jobs.
Now we have no Cash, no Hope and no Jobs.
Please don’t let Kevin Bacon die.
— Bill Murray on hope and bacon
|