We talked about the ReactJS environment setup in last part and here in this post we will look at “a quick overview of JSX”. If you have missed the previous installment, please follow the previous post (Click Here for the link) before proceeding. Note: Remember this is just a quick overview of JSX 🙂 so do not expect this to be in-depth. This will just give a basic idea, which we can use in our next installments of this series.
A quick overview of JSX:
JSX is a preprocessor step that adds XML syntax to JavaScript. In short JSX is a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML. If you write a JSX syntax directly into HTML, it will not work as browser does not understand it. So before you can use it. The JSX has to be compiled. Once compiled it will be converted into JavaScript and then the browser can understand it.
The simple example of the JSX element is :
<div>Get the KT</div>
If you see the above element just looks like a normal div tag, but here it will be in a JavaScript. JSX can be added anywhere, where you can add JavaScript. You can assign a JSX element to a variable, just like we do it JavaScript.
Example:
var myVar=<div>Get the KT</div>;
Also we can have an object with multiple elements:
Var myObject = (
Name :Get the KT,
Author: Amit Sahu,
Country:India
);
JSX elements can have attributes as well, just like HTML elements. In the below example we have src,alt,height and width as attributes.
Example:
var mylogo = <img src=”images/getthektlogo.jpg” alt=”logo” width=”200″ height=”150px” />;
JSX elements can be nested.
<a href=”https://www.getthekt.com” >
<h1>Go to GetTheKT</h1>
</a>
You can then assign this to a variable as below:
Var myVar =(
<a href=”https://www.getthekt.com” >
<h1>Go to GetTheKT</h1>
</a>
)
Note: You should have parentheses to wrap the elements before assigning it to a variable.
JSX expression must have exactly one outermost element.
Example:
The below code will work as we have the outer most element as <div>
.
var paragraphs = (
<div id=”outerdiv”>
<p>Learn JSX</p>
<p>With ReactJS now.</p>
</div>
);
The below code will fail as we do not have an outer most element.
var paragraphs = (
<p>Learn JSX</p>
<p>With ReactJS now.</p>
);
In JSX we cannot user Class as and Attribute name, as once you compile this, you will get errors as class is a reserved word in JavaScript. Remembered, I said JSX will be converted to JavaScript ?
So, <div class=”myDiv”></div> will not work, use className as attribute : <div className=”myDiv”></div>
In JSX you will have to usee self-closing tags. You cannot leave a tag unclosed.
<img src=”/x.png” > will not work, so close it <img src=”/x.png” />
You can add JavaScript in JSX by wrapping the code to be considered as JavaScript within curly brackets :
<h1> 12+3 </h1> will give you 12+3, but if you wite <h1>{ 12+3 }</h1>, the browser will give you 15.
Conclusion :
Will stop here for now. This post was just to get an idea about JSX. For more info on JSX and in-depth learning on it, go to the below links and check them out. Although JSX is not a must for ReactJS , it makes it more smooth and faster. Will proceed to the next post of the ReactJS in the next post. Till then Keep reading and sharing…….
Leave a Reply