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:
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.
Setting an event handler like onClick on link component in React works the same as setting any other attribute or a prop.
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.
Props and other core React features make it easy to implement dynamic features.
Syntax differences between HTML and JSX
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.
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.