React JSX

What is JSX?

JSX stands for JavaScript XML.

JSX allows us to write HTML in React.

JSX makes it easier to write and add HTML in React.

---

Coding JSX

JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement()and/or appendChild() methods.

JSX converts HTML tags into react elements.

You are not required to use JSX, but JSX makes it easier to write React applications.

---

Expressions in JSX

With JSX you can write expressions inside curly braces { }.

The expression can be a React variable, or property, or any other valid JavaScript expression. JSX will execute the expression and return the result:

---

Inserting a Large Block of HTML

To write HTML on multiple lines, put the HTML inside parentheses:

---

One Top Level Element

The HTML code must be wrapped in ONE top level element.

So if you like to write two headers, you must put them inside a parent element, like a div element.

JSX will throw an error if the HTML is not correct, or if the HTML misses a parent element.

---

Elements Must be Closed

JSX follows XML rules, and therefore HTML elements must be properly closed.

JSX will throw an error if the HTML is not properly closed.