Made withReactClip

ReactJS Tutorial - 8 - JSX

C

Codevolution

Creator on the React channel

Watch on YouTube ↗

940K viewsNov 5, 201811:25 runtime

Learn the fundamentals of JSX (JavaScript XML) in React. This tutorial explains what JSX is, why it's used, and how it simplifies building React components. Discover how JSX is syntactic sugar for `React.createElement` calls through a clear, side-by-side code comparison of a…

Chapters

#react#clip#frontend

What is JSX?

JSX, which stands for JavaScript XML, is a syntax extension for JavaScript. It allows you to write HTML-like code directly within your JavaScript files. While not mandatory for using React, JSX makes writing components much simpler, more elegant, and readable.

It has a familiar syntax for developers accustomed to HTML.
JSX tags have a tag name, attributes, and children.
Ultimately, JSX code is translated into regular JavaScript that browsers can understand.

JSX vs. Plain JavaScript

Under the hood, JSX is just syntactic sugar for calling React.createElement().

With JSX:

const element = (
  <div id="hello" className="dummyClass">
    <h1>Hello Vishwas</h1>
  </div>
);

Without JSX (Plain JavaScript):

const element = React.createElement(
  'div',
  { id: 'hello', className: 'dummyClass' },
  React.createElement('h1', null, 'Hello Vishwas')
);

React.createElement() takes three main arguments:

The element type: A string for an HTML tag ('div') or a React component.
Props: An object containing all attributes/properties ({ id: 'hello' }).
Children: The content inside the element. This can be a string or more React.createElement() calls for nested elements.

Important
Because JSX translates to React.createElement(), you must import the React library in any file that uses JSX, even if React isn't explicitly referenced.

Key Differences: JSX vs. HTML

Certain HTML attributes have different names in JSX to avoid conflicts with JavaScript's reserved keywords.

class becomes className: Since class is a reserved keyword in JavaScript for creating classes.
for becomes htmlFor: Used in labels, as for is used for loops.
Attribute Naming: JSX uses camelCase for most attributes that are multi-word in HTML.
- onclick becomes onClick
- tabindex becomes tabIndex

Note
The React team has proposed changing className back to class in a future version (React 18 or 19). Always check the official documentation for the latest conventions.

What is JSX?

Alright guys, in this video we are going to learn all about JSX. JSX is probably the word you're going to see and hear a lot in the world of React, so it's really important that you understand what JSX is and why it is used. Alright, let's begin.

JavaScript XML or JSX is an extension to the JavaScript language syntax. With the React library, it's an extension to write XML-like code for elements and components. And just like XML, JSX tags have a tag name, attributes, and children.

Now, why do we need JSX? Well, the truth is JSX is not a necessity to write React applications. You can definitely use React without JSX, but JSX makes your React code simpler and elegant. As you might have already seen, it provides a syntax which is familiar to many developers. JSX ultimately translates to pure JavaScript which is understood by the browsers.

So we talked about what is JSX and why do we use it, but how does it work behind the scenes? What does the code look like without JSX? Let's take a look at that.

Creating a Component with JSX

What I will do is create a React component using JSX and without using JSX. That way you not only understand how JSX translates to regular JavaScript, but also appreciate how it brings out simplicity in your code.

Now I'm going to start by creating a new file called hello.js within the components folder. This is going to be a simple functional component that renders "Hello Vishwas" in the browser.

So first step, as always, import React. Second step, create the function that returns what appears to be HTML but is in fact JSX. const Hello = () => and within the curly braces, we are going to return HTML which is in fact JSX: a div tag, within the div tag an h1 tag, and the text "Hello Vishwas". Finally, make sure to export it as the default export.

Now in App.js I can import the component and include the tag in the render method. So import Hello from './components/Hello'. I'm going to comment out Greet and Welcome and instead include the Hello tag. If you save the files and take a look at the browser, you should be able to see "Hello Vishwas". So this is the JSX version of the Hello component.

Rewriting the Component without JSX

Now let's rewrite the component without using JSX. To help us do that, the React library provides a createElement method. So within the function, the code now changes to return React.createElement(). This method at minimum accepts three parameters. The first parameter is a string which specifies the HTML tag to be rendered. For our example, we need a div tag to be rendered, so React.createElement with the first parameter a string called 'div'.

The second parameter, we get to pass any optional properties. For the example we have right now, we don't need any additional properties so we can simply pass in a value of null. The third parameter is the children for the HTML element, that is children for the div tag. Again for our example, we simply have the text "Hello Vishwas", which we will pass as the third parameter. If we now take a look at the browser, you should be able to see the text "Hello Vishwas", but this is slightly different from what we had before. The h1 tag is missing. So let's include that. h1 and a closing h1. If you now take a look at the browser, the output is not what we were looking for. If we inspect the element, you can notice that it is just inner text to the div tag and the h1 tag is not a DOM node. Let's fix this.

If we go back to VS code, it turns out that the createElement method can accept any number of elements as children. So let's split the h1 tag and the text into two elements. So the third parameter is going to be now the h1 tag and the fourth parameter is going to be the text "Hello Vishwas". If you now take a look at the browser, the output is slightly different, but it is still not what we are expecting it to be. If I inspect the element now, we still have the div element, but it contains two text nodes. h1 is a text node and "Hello Vishwas" is a text node.

To render h1 as an h1 element and not as a text node, what we have to do is call the createElement method for the second time. So if I go back to VS code, the third parameter now is going to be again React.createElement. The first parameter is the tag, so 'h1', we have no additional properties, so null, and finally the text "Hello Vishwas". If you save this and take a look at the browser, the output is finally what we were looking for: "Hello Vishwas" in an h1 tag.

Working with Attributes

Now let's go back and take a look at the second parameter we have been ignoring. The second parameter basically is an object of key-value pairs that will be applied to the element. For example, let's say we need an id attribute on this div tag. We can specify an object. Key is id and the value is hello. If you now take a look at the browser and inspect the element, you can see the id attribute with a value of hello.

Similarly, let's say we need to add a class to the div tag. So within the object, class of value dummyClass. If you take a look at the browser and inspect the element, you can see the class attribute being applied. But if you take a look at the console, you're going to find a warning: "Invalid DOM property class. Did you mean className?"

In JavaScript, class is a reserved word. We did see the class keyword being used to create React components in the last video. So in React, a CSS class has to be specified using the className attribute. So instead of class, it has to be className, camel-cased. Take a look at the browser, there is no warning in the console, and if you inspect the element, you can see that we still have the class attribute being applied as dummyClass.

Now the same in JSX is going to be className='dummyClass'. So there you go, a React component with and without using JSX.

JSX is Syntactic Sugar

And by now it must be clearly evident which is the more simpler approach. Basically, each JSX element is just syntactic sugar for calling React.createElement. And that is why you have to import the React library when you use JSX.

If you take a look at Greet.js, you probably wonder, "Why is React being imported? I don't even notice it being used anywhere." But the fact is, JSX translates into React.createElement which in turn uses the React library. Our example just has two elements, but imagine a component with ten or a hundred elements. It starts to become really clumsy. JSX on the other hand will keep the code elegant, simple, and readable.

JSX vs. HTML and Future Changes

Let me also talk to you about some of the differences you are going to see in JSX compared to regular HTML. The first one which we have already seen is class being replaced by className. Similarly, we also have for being replaced by htmlFor. Again, for is a keyword in JavaScript. You are also going to see camel-case property naming convention instead of HTML attribute names. For example onclick and tabindex will become onClick and tabIndex, that is camel casing. We will see these differences as we progress through the series, so don't worry about having to memorize them.

Lastly, I want to point out a link which may be very relevant depending on the time you are watching this video. The React team is working on making some breaking changes, which of course is for the good of React, but that also means you might see changes in the code you write. One of the biggest changes proposed is changing className to just class. There are a couple more changes listed as well, so I will leave a link in the description down below. The changes are targeted for React 18 or 19, I believe, so we have a good year or two before these breaking changes are made. Nonetheless, please do take a look at this link as it will help you stay updated with the changes.

Alright, that is pretty much what I wanted to discuss about JSX. Thank you guys for watching. Please don't forget to subscribe and enable notifications, and see you guys in the next video.