First of all, what is JSX?

#javascript #webdev #beginners #programming

First of all, what is JSX?

I see the term "JSX" here and there...

If you are a web front-end developer wannabe, you might have learned steps by steps the basics of web development. You must have written some HTML code and created your first web page, added some styles to the page by CSS, added user interaction by using JavaScript, and so on. You know how to create a web page or website by utilizing what you have learned. It is so amazing that you can create your own web pages public to the world!

Okay, so what's next? Let me guess what you will go for next. It should be "React," shouldn't it? React is such a popular library of JavaScript for UI, so there is no doubt why you will pick it.

But once you dive in, you wii see the term "JSX" here and there. "What is JSX? I have never heard that before. I thought I had become a master of web development, but here comes mysterious stuff again..." That might be your thought that comes to your mind when you see it for the first time. Hey I got your back. Let me introduce a tip of What JSX is and help you have a great kickstart of learning React before diving in!

What is JSX?

JSX is a syntax extension of JavaScript. JSX looks exactly like HTML tags. You can use it just like HTML tags, but you can utilize JavaScript features at the same time because it is a syntax extension of JavaScript. There are more of good things about JSX. In this article I am introducing only a couple of useful ways that JSX brings. You use curly braces "{}" for JavaScript expression.

JSX

<h1>{text}</h1>
<a href={url}>link</a>

Use of variables

You can use variable within JSX tags. Here's the example. You want to show a value of the variable called name within a p tag. In order to do that, you declare a variable called name and assign the variable to "John." You can use the value by inserting the variable embraced by curly braces within p tags. That works the same as the HTML example below.

JSX

let name = "John";
<p>{name}</p> // Shows John

HTML

<p>John</p>

You can also use a variable to its attribute. Here you set the id attribute with the variable id.

JSX

let id = "header";

<div id={id}></div>

HTML

<div id="header"></div>

You can use an object as well.
JSX

let obj = {name: "John"};

<p>{obj.name}</p> // Shows John

Use of functions

You can use a function within JSX. You define a function outside JSX and call it inside it with or without arguments just like how you have done so far. Let's try it out. Declare variables name1 and name2 with different values and a function getWelocomeText that returns different welcome texts depending on its input. You can call the function within JSX with name1 or name2 and shows different texts.

JSX

function getWelcomText(name) {
if (name === "John") {
return "Hello, John";
} else {
return "Hello, Guest";
}

let name1 = "John";
let name2 = "Doe";

<p>{getWelcomText(name1)}</p> // Shows "Hello, John"
<p>{getWelcomText(name2)}</p> // Shows "Hello, Guest"

HTML

<p>"Hello, John"</p>
<p>"Hello, Guest"</p>

Generation of multiple similar elements

Sometimes you need to write similar groups of elements over and over again in HTML, which is pretty hassling. This hassle can be removed by utilizing the built-in libraries of JavaScript. For example, array.map() is used to generate similar elements repeatedly but makes the code look simpler. Declare an array of strings which contains multiple names and use the map method to show all the names in the array with a p tag.

JSX

const Names = ["John", "Doe", "Woo", "Foo"];
 {Names.map((name) => (<p>{name}</p>))}
// Shows  all the names in a row

HTML

<p>John</p>
<p>Doe</p>
<p>Woo</p>
<p>Foo</p>

Conclusion

What did you think about JSX now? Do you feel less intimidated toward JSX? I hope so! JSX is NOT mandatory to use in React. Yet, JSX is commonly used because JSX looks simple and understandable to readers, which you will probably feel that same way as you learn. Therefore it is recommended to learn about it when you learn React.

You can look more into JSX if you get interested.
Let's keep learning and having fun with what we learn!

Further expertise

Let me know more about JSX such as advanced uses or the other useful features of it other than the ones I mentioned here if you know! I am still learning JSX and React, and going to keep on learning. So I would really appreciate if you guys help me develop my skills further.