JSX is a template language used for building web applications in React. At first glance, it looks very similar to HTML, but the two couldn’t be more different. While it looks like a markup language on the surface, JSX is ultimately ‘translated’ to a calls to React API. We could technically use the underlying React API, but it’s not very readable.
Now that we have a general idea about JSX and its purpose, let’s explore differences in syntax and overall structure of the code. Most important differences are, as follows:
We can embed JavaScript expressions inside JSX. This allows us to easily implement dynamic features. When reading JSX code, you can notice embedded JavaScript expressions by curly braces that surround them.
Elements in HTML are written in lowercase. Many of the same elements (or rather their React copies) are written the same way in JSX. However, if you look at a JSX code you will notice some element names are capitalized. These are custom components, and capitalizing their name is a useful convention to distinguish between custom components and plain elements in React. Sometimes you create custom elements on your own. You can also import them from external libraries. Most React packages and libraries are component and/or hook based. They provide custom components with built-in advanced functionality which you can set and control by passing props, instead of building that functionality yourself.
In HTML, elements can have attributes and you can set their value to anything you want. Attributes in JSX work the same (except for some important differences), but you can also set props to pass values to custom components. You can use different values to adjust functionality, content, visuals, or any other aspect of the custom component.
How to embed JavaScript expressions in JSX
The ability to embed JavaScript expressions is one of the main reasons for using JSX. This allows you to add dynamic features as you go, and mix logic with views. Separation of concerns is a good thing, but the ability to embed JavaScript variables or simple expressions can be very beneficial as well.
Embedding JavaScript expressions in JSX requires the use of curly braces. Element content between curly braces will be evaluated as JavaScript. In some cases, you might need to set attributes or props to a JavaScript object. In this case, you will have to use double curly braces to get the desired result. This often happens with CSS-in-JS libraries and when setting inline styles in React.
Setting an event handler like onClick on link component in React works the same as setting any other attribute or a prop.
Using JavaScript methods to render elements and components in React
One of the best uses for curly braces is to render components or elements based on array in React. map, filter and similar methods make it very easy to take information (data) and return a component that contains and processes that data to achieve the desired result. For example, pass data into a component that uses data to display information. Pass a Boolean value into a Product component, and have product display ‘Out of Stock’ if the Boolean is false.
When building web applications in the real world, you often receive poorly structured data from the API. Information is often organized as an array of objects, and you have to loop over items in the array to output data as component content.
The ability to use map() and similar JavaScript methods to render many components can significantly reduce the amount of code. Here’s how to do that:
https://simplefrontend.com/render-multiple-components-in-react/
Props and other core React features make it easy to implement dynamic features.
Syntax differences between HTML and JSX
Besides curly braces, JSX and HTML look very much alike. Except there is one more difference. Because JSX is JavaScript under the hood, you can not use reserved words such as class or for inside JSX. As you know, class attribute is normally used to style several elements the same way. In JSX, class becomes className. As for the ‘for’ attribute, it is used to associate label elements with input elements. In JSX, the ‘for’ attribute becomes htmlFor.
Different JSX attributes take some time getting used to, but with some experience, become second nature to the coder.
Building a component tree in JSX
Great thing about JSX allows you to build dynamic web applications exactly the same way you build static web page in HTML. Everyone is familiar with HTML, so imitating it is a good idea to make React accessible to wide audience of developers. To include a component, simply invoke it in the JSX code. That component returns its own JSX code and might have child components of its own. There are some challenges, but it’s a very straightforward way to organize a web application.
One of the biggest challenges is passing down data from parent to child components in React. Fortunately, Context API and libraries like redux can solve this problem as well.
Time to learn
Most web developers are familiar with HTML and its basic rules – opening and closing tags, self-closing elements, common attributes, and so on. React elements follow the same pattern. Except for few differences in attributes, writing JSX code is largely similar to HTML. For this reason, beginners can easily pick up JSX within a matter of weeks. Mastering advanced techniques – like embedding complex conditions for setting inline styles – might take a while to learn, but should not be a challenge.
Difficulty
While JSX is slightly more difficult than HTML, it also offers more functionality for building dynamic web applications. Simplicity of HTML limits you to building static web pages, or using jQuery for simple dynamic features. On the other hand, JSX allows you to mix presentation with logic, which is often useful. If you think JavaScript expression embedded in JSX is getting too complex, you can always define it outside the JSX code and store its result in a variable. Then reference it inside JSX.
Final verdict
JSX and HTML are two great web development tools. One is not better than the other, they simply serve different purposes. The key is to use them correctly.