JSX vs. HTML

Today we are going to discuss the main difference between React’s Markup Language (JSX) and HTML.

JSX seems like HTML. In my development journey, I found it very important to understand the difference between JSX and HTML. So without any wait, here are the main key differences you should be aware of.

1.Adding Custom Styles to an Element

In HTML, if you want to style an element you would do something like the below:

But in JSX, it is different. To convert the above HTML into JSX,

i. First, replace double (“”) quotes with double curly brackets {{}}.

ii. Then if the property name is a compound word like background-color, remove the dash and convert the first letter of the second word to uppercase e.g backgroundColor. The single name property like color should be as it is.

iii. The values assigned to the styling properties should be in double or single quotes.

iv. Multiple properties separated by placing comma (,) between them.

2. JSX can reference javascript variables

In HTML, if you wanted to insert any variable into an element you would use DOM like the following here:

As JSX is technically Javascript, so you can insert your variable directly in your markdown. To do that, you have to use curly brackets {} and inside the brackets, write your variable name as follow:

Moreover, we can also use functions instead of variables in JSX.

This way, you can display many types of variables like integers, strings even arrays. However, there is an exception, you can not use javascript objects in curly brackets. You can use objects using dot notation to access specific object items as below.

3. Different attribute names in JSX

Suppose, you write the following JSX

Now let’s run the react project and see the output

The above webpage is exactly what we wanted. Now, let us check the console!

Here, we found two warnings about our element’s attribute. That states that class and for are invalid properties. Why? our code seems to work fine so what’s is the problem here?

As JSX is technically javascript, so class and for are reserved keywords in javascript. In order to not get mixed the HTML attributes with Javascript, JSX uses unique attribute names such as ‘className’ instead of ‘class’ and ‘htmlFor’ instead of ‘for’.

However, by not replacing HTML attributes with JSX unique attributes name it didn’t crash our application but it’s a good practice.

So, these are the main differences between JSX and HTML that you should be aware of. Hopefully, this knowledge will be helpful for you.