First of all, what is JSX?

Hidemichi Shimura — Fri, 10 Feb 2023 07:16:28 +0000

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.

Attribution

Cover image: Lautaro Andreani

Who Am I?

Hidemichi Shimura — Thu, 01 Sep 2022 00:09:51 +0000

Hello! My name is Hidemichi Shimura

I am a Japanese who was born and raised in Okinawa, which is a small island located in the southern part of Japan and has beautiful beaches, nature and delicious cuisines. I spent all of my life in the small island. Although I was there for my entire life, I am currently in Vancouver, Canada. Why am I in Canada, which is very far from Japan? And what am I doing there?

What I do in Canada

There are many reasons why people come to Canada. Then what about me? I am a student at Cornerstone International Community College of Canada, which is abbreviated to CICCC. My course at CICCC is Web and Mobile Development. Maybe you can guess what I learn at school from the course name. Just as your guess, I learn programming for developing web sites, web applications, mobile applications and etc.

Why I learn Web and Mobile Development in Canada

The reason I decided to go to Vancouver for learning web and mobile development is that Vancouver's tech industry has been growing rapidly and attracting a number of engineers from other countries. Besides those facts, there is one more attractive thing to me. It is salary💵. Software engineers in Vancouver tend to get paid well compared to ones in Japan. When I found out those facts, they instantly got my attention, made me decide to go to Vancouver and become a software engineer in Vancouver.

What I learn at school

Let me tell you what I am actually learning and what I want to become in the future. I want to become a software engineer who can be engaged in various things at the later phase of my career. But for now, I am more interested in front-end development. Therefore I have been learning technical skills in regard to front-end development such as HTML, CSS and JavaScript.

What I want to become

I am currently trying to become a front-end developer. But once I become a front-end developer and acquire years of experiences as a front-end developer, I want to learn about back-end development as well and shift to a back-end side. When I obtain experiences of both front-end and back-end, I would like to start my career as a full-stack developer. I have not made a decision of what I want to become after becoming a full-stack developer yet. But I might continue being a full-stack developer or dive into another field such as DevOps. But I am sure that I will experience a lot of things and figure out what I want to do next in the tech industry.

My Goal

One of the benefits to become a software engineer is that you can work from anywhere. You might be able to work from home, another work space, a cafe and maybe a beach. My goal is that I work from a beach. If I could work from a beach, I would finish work and dive into water right away. In order to make it come true, I am going to keep learning!

Forem: Hidemichi Shimura

First of all, what is JSX?