Intro to JSX

Photo by Greyson Joralemon on Unsplash

JSX is an abbreviation for JavaScript XML. JSX is a syntax extension to JavaScript and it is included with React. JSX allows you to write HTML inside JavaScript. JSX produces React elements, which are rendered into user interfaces.

Example

Babel will take this and it will create li elements, its like calling React.createElement() for each li.

Another example

Here is an example of expressions in react:

What is babel?

Babel is a free and open-source JavaScript transcompiler that is used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript that can be run by older JavaScript engines

Tips

1. JavaScript expressions can be used inside of JSX. We just need to wrap it with curly brackets {}
2. React uses camelCase property naming convention instead of HTML attribute names (HTML uses lowercase). For example, class becomes className in JSX
3. You cant use if-else statements inside JSX, instead, use conditional (ternary) expressions

Reference

• React docs