JSX vs HTML
In the journey of learning React, it is extremely important to be able to transform your HTML into React’s markup language JSX. While this transformation is pretty easy, there are a few differences that you should be aware of.
JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX is a special dialect of JavaScript. It looks like HTML but its not HTML at all. To render code on the browsers we write JSX code in our React components. And Like ES6, browsers do not understand this JSX also so before rendering the code into the browser JSX gets converted into pure JavaScript code through Babel. You can see how to convert at Babel — Try it out page.
You might be wondering when the JSX ultimately gets converted into Javascript then why to write JSX instead of writing JavaScript only? Yes, you are right. It's not compulsory to write JSX in your react components you can write JavaScript code instead but as compared to the JSX, writing pure JavaScript gets too complex when code is long as shown in below image i.e. why in React it is recommended to use JSX. And also JSX is very identical to HTML to its easy to write and understand.
JSX is almost identical to HTML but there is a couple of differences. To be frank, it is hard to list all the difference between JSX and HTML but I will list some key differences you should know:
- Inline CSS styling in JSX has a different syntax
- Giving a class name to HTML tags has a different syntax
- JSX can reference JavaScript variables
Let’s have a look at below code, it is HTML and we are going to convert it into JSX.
<div>
<label>Username:</label>
<input class=”unameinput” type=”text” id=”uname” />
<button style=”background-color:cyan;color:blue;”>Login</button>
</div>
If we paste the exact same code in our index.js file as below:
We will see the error when we run it.
How to write inline CSS styling in JSX?
HTML → style="background-color:cyan;color:blue"
In JSX, instead of wrapping the style in double-quotes, we use double curly braces i.e. instead of style = “ … ” we use style = {{ … }}, the outer curly brace indicates that we are going to place a JavaScript variable in this and second curly braces indicate a JavaScript object.
The second change is if the property name is having a dash in it we have to remove that dash and change it to camel casing format starting with lower case i.e. instead of background-color we use backgroundColor.
The third change is the value of the property will get wrapped as a string either in single or double-quotes.
The fourth change is different properties get separated using a comma instead of the semi-colon.
JSX → style={{backgroundColor:'cyan',color:'blue'}}
The final react code after transforming HTML into JSX:
After running the above code we will see the below output on the browser.
If the browser is rendering the output instead of error does not mean that there is no error in the code as a web developer it’s a good practise to keep checking console for errors.
How to write a class name in JSX?
The above code says Invalid DOM property class. Did you mean className?
In modern JavaScript, the class keyword is reserved for JavaScript classes and to avoid that collision we use className to give a class name in HTML tags in JSX instead of class.
HTML → class="unameinput"
JSX → className="unameinput"
After implementing this change in our JSX,
Now there is neither any error on web page nor on the console.
Referencing JavaScript variables from JSX:
JSX can easily reference JavaScript variables i.e. we can use JavaScript variables or functions in place of plain text by putting them into curly braces as I mentioned while changing inline styles the first curly braces indicate JavaScript variable. <button>{buttonName}</button> or <button>{getButtonName()}</button>.
For example, if we want to replace button text with JavaScript variable.
If we want to replace button text with JavaScript function.
You can put most types of variables this way including strings, integers, and even arrays but you cannot put a Javascript object between curly brackets like this. You can’t reference object but you can reference a property of the object like if you want to reference an object in place of plain text use {objectName.propertyName} as shown below.
We can’t reference JavaScript object in place of a plain text but we can pass a JavaScript object in curly braces in inline styling. If you remember while changing the syntax of inline styling in JSX, we used double curly braces and I mentioned that second curly braces indicate JavaScript object so we can make JavaScript object separately and then put in JSX, wrapped in curly braces as below.
I have tried to explain everything to get started with React by writing JSX in your react components. Now you can confidently write JSX code in your React app. Hope it was useful.
Reading is good and with implementation it is awesome!
