Everyone these days is crazy about React. So, I thought I’d write a blog post explaining one of the integral features of React – JSX. This is the templating language used for building React components. JSX has everything you need to define the structure, customize appearance, and customize components in many other ways.

JavaScript under the hood

JSX is beginner-friendly because it looks a lot like HTML. It is familiar to anyone even remotely familiar with building websites. You don’t have to be a programmer to know HTML.

Still, JSX is more advanced than it looks. It is compiled into normal JavaScript code. This allows you to make your React elements and components dynamic and interactive.

JSX allows you to embed normal JavaScript expressions in the component structure. You only have to wrap JS expressions with curly braces. For example, you can create a ternary operator to return a custom className string depending on values in the state. This is a powerful functionality that allows you to build React components with dynamic appearances.

Similarly, you can conditionally style JSX elements and components. It works very similarly to inline styles in HTML. Except in JSX, you pass a JavaScript object, where each property is a CSS property, and value is a CSS value. The object is just like any other JS expression. Before you pass it to styles attribute in JSX, you need to wrap it with curly braces. Combined with curly braces that mark the beginning and end of JS objects, this will result in double curly braces. Here’s a SimpleFrontEnd guide on conditional styling in JSX:

https://simplefrontend.com/set-conditional-classname-in-react/ .

JSX rules

All of the rules in JSX are similar to those in HTML. For example, you there must be opening and close JSX tags for all elements and even components. You can also self-close the element or component.

Let’s talk about rules specific to JSX. We use the ‘class’ attribute to style elements in HTML. Because JSX is JavaScript, we can not use ‘class’. That is a reserved keyword for defining classes in JavaScript. We need to use the className attribute instead.

Similarly, in HTML we use the ‘for’ attribute to specify relationships between input elements and their labels. In JavaScript, the ‘for’ keyword is often used for looping through values like arrays and strings. In JSX, you need to use the ‘htmlFor’ attribute to link two elements together.

One additional rule is that every component must be wrapped in one JSX element.

JSX does not allow you to embed if/else statements or for loop directly in the code. You can, however, use ternary operators or forEach() and map() methods as an alternative.

Pass down props in JSX

Obviously, you can pass down props in JSX. To do this, you need to define name of the prop as element attribute. Then specify value for that prop.

Prop values can be strings, numbers, or even objects and arrays.