You may have seen this funny syntax which looks like HTML code inside of your React application. This is JSX.

JSX is a syntax extension for JavaScript that looks like a combination between HTML and JavaScript. We use JSX elements to produce React elements.

Why Do We Use JSX?

In traditional applications, we separate the view (HTML) from the logic (JavaScript) React is built upon the idea that the logic which renders components is related to the data within the application. Thus, React couples the markup and the logic together inside of components.

JSX isn’t mandatory for creating React applications, but it can be extremely useful.

JSX Expressions

JSX expressions are used to pass variables to elements and properties, evaluate boolean expressions, and more! We can use curly braces ({}) to create expressions in JSX.

Let’s take a look at an example.

Note: React uses className instead of class, which is a preserved keyword in JavaScript. React DOM uses the camelCase naming convention.

In the App component, we create this.state = {...} and add in an address object. We manipulate this object into a concatenated string inside the formatAddress function.

The syntax const { address } = this.state; is called destructuring assignment. This makes it possible to place values from objects and arrays into variables.

If you’re unfamiliar with the syntax used to create the concatenated address string, it’s called a template literal. Template literals are extremely useful if you need to display the value inside of a variable within a string. You begin and end template literals with backticks (`) and any variables you want to evaluate must be placed inside a dollar sign with curly braces${...}.

Finally, in the JSX code within the render function, we use JSX expressions to call formatAddress().