Why do we need JSX in React?

It’s incredibly easy to build beautiful user interfaces with React. But there’s a lot that goes on beneath the simplicity of writing functional components and a layout that seemingly looks like HTML. In this article, we want to explain what JSX is and why it’s useful.

Introduction to JSX

Let’s start with basics and talk about what JSX is. In simple words, it’s a templating language that makes it easy to write component layouts in React. As you know, components are nothing but self-contained bits of UI, so the ability to write their layout is quite important. Of course components also need logic, and JSX makes it extremely easy to implement dynamic features inside the layout structure. That’s what makes it so useful and why React developers love JSX.

If you’ve ever looked at React components, first thing you probably notice is the HTML-like code inside the return statement. That code is JSX, and despite how it looks, it’s actually JavaScript. The fact that JSX is JavaScript disguised as HTML allows React developers to get the best of both worlds – readability and simple structure of HTML, as well as dynamic features of JavaScript.

Dynamic expressions in JSX need to be wrapped with curly braces. These indicate to JSX that the expression is dynamic, and not a static value that needs to be interpreted as-is. This distinction is quite important, as there are many static values inside JSX as well – from React element definitions and attributes to content for elements as well.

React is a purely written in JavaScript. Don’t let the HTML-like appearance of JSX confuse you. The template language is just an easier way to write many calls to React.createElement() API. Making calls to top-level React API is simply not readable, especially if you want to nest components, add props, and so on. So React offers JSX, a friendly syntax for structuring web applications. Setting event handlers works the same way, so you can easily handle onchange events on input elements in React.

Implementing dynamic features in JSX

As we mentioned, great thing about JSX is the ease with which you can implement dynamic features. Anything from conditional classes and styles to dynamic rendering is very easy to do with React.
The main tool to implement dynamic features and logic is the ternary operator. In case you don’t know, ternary operator consists of three parts – the condition to check, followed by the value to return (or an expression to run) if that condition evaluates as true, or alternative value if the condition turns out to be false. Ternary operators are incredibly useful because you can not implement multi-line JavaScript statements inside JSX. Ternary operators take up only one line and are fine to be embedded inside JSX code. Often you see className set to ternary operator, so it conditionally returns one value or another, depending on the condition.

Ternary operators are also often used to apply one style or another. This is useful when you want your application to immediately respond to changes in the state. You can store changing input value in the state and then use its value in the ternary operator, giving your web application a dynamic appearance.

Let’s look at an example:

In this case, there are double curly braces because one pair tells JSX to interpret its contents as dynamic JavaScript expression. Another is for opening and closing of the JavaScript object. Inside, we don’t need to use curly braces the third time to set the value for backgroundColor CSS property, because we have already done so before.

Note that in inline styles, the property name is different from proper CSS name. ‘background-color’ in CSS becomes backgroundColor in React, because inline styles are stored in an object, and need to be structured as key-value pairs.

Conditional rendering in JSX

The ability to embed dynamic expressions is a very powerful feature that is absolutely necessary for building interactive web applications. For example, ternary operators also allow us to render (or not render) certain components or elements based on a condition.

Inside the JSX, create a ternary operator and set a condition. If the condition is evaluated as true, then React will invoke the component, or return null. You can even set an alternative component that you want to render in case the condition is evaluated to be false.

Event handling in JSX

Event handling is the cornerstone of building any interactive application. Thanks to JSX, it’s very easy to handle events in React. The names for event handlers are the same as well, with minor differences. In React, event handlers are written in camelCase. For example, onchange event handler becomes onChange in React. This is done mostly for readability, and to make it easy for other developers to distinguish between props and event handlers.

Event handlers are usually set to a function that performs a certain action when the event occurs. Let’s look at this example where, where clicking a button logs message to the console:

console.log(“button clicked”}>Click button

Important detail to remember is that event handlers are set to a function that performs the action. They are not set to the function itself. If that were the case, React would call console.log() every time it rendered the button.

Usually you can not pass arguments into the functions that handle your events, but there’s a workaround that allows you to pass parameters to onClick and other event handlers. You need to pass argument to the initial function between curly braces, which passes it down to the event handler. Then you can use that value inside the event handler.

Event handlers can be quite complex and used to implement user-friendly features. For example, you can use them for scroll to position feature in React.

Summary

JSX is a foundational feature that saves developers a lot of time on building web applications with React. Its simplicity and readability, combined with ability to implement dynamic features makes it a great choice for building web apps with React. While not a requirement, I personally highly recommend to all beginner React developers to learn JSX.