ReactJS Tutorial - 8 - JSX

Summary

This video introduces JSX, a JavaScript extension widely used in React to simplify coding by allowing developers to write XML-like syntax. While JSX is not required, it makes React code cleaner and easier to read. The tutorial demonstrates how JSX translates into JavaScript using React's `createElement` method, showing the differences between coding with and without JSX. Key differences between JSX and HTML, like using `className` instead of `class`, are discussed, along with potential future changes in React. The video emphasizes JSX's ability to streamline complex code.

Takeaways

• 📜 JSX stands for JavaScript XML and is an extension to JavaScript syntax, used with React for writing XML-like code for components.
• 🛠 JSX is not mandatory for writing React applications, but it simplifies the process and makes the code more elegant and readable.
• ⚙️ JSX ultimately compiles into regular JavaScript that browsers can understand.
• 📂 JSX code can be written in a simpler format compared to using React’s `createElement` method directly.
• 🧑‍💻 React’s `createElement` method takes three parameters: the HTML tag, an object for properties, and the children elements.
• 🔧 JSX elements are syntactic sugar for calling `React.createElement`, simplifying component creation with a more familiar syntax.
• 🔠 Some differences exist between JSX and HTML, such as using `className` instead of `class` and `htmlFor` instead of `for` due to JavaScript keyword restrictions.
• ⚛️ Even when JSX is not explicitly seen in the code, React must be imported because JSX is translated into `React.createElement` calls.
• 🔄 The React team may introduce breaking changes in future versions, including reverting `className` back to `class`.
• 📅 Developers should stay updated on upcoming React changes by reviewing the latest documentation, especially with React 18 and 19 on the horizon.

Q & A

What is JSX?

JSX stands for JavaScript XML and is an extension to the JavaScript syntax used with the React library. It allows developers to write XML-like code for elements and components in React.

Why is JSX commonly used in React?

JSX simplifies the process of writing React components by making the code more elegant and readable. Although JSX is not a necessity, it provides a familiar syntax for developers and ultimately translates to pure JavaScript that browsers understand.

How does JSX work behind the scenes?

Behind the scenes, JSX is transformed into `React.createElement()` calls. Each JSX element is syntactic sugar for this method, which constructs the virtual DOM nodes that React uses to efficiently update the browser’s DOM.

Can React be used without JSX?

Yes, React can be used without JSX. Developers can use `React.createElement()` to create elements and components, but JSX makes the code cleaner and easier to write, especially when working with multiple elements.

How does the `React.createElement()` method work?

The `React.createElement()` method takes three parameters: the HTML tag (e.g., 'div'), an object of properties (can be `null` if there are no additional properties), and the children (contents) of the element.

What are some key differences between JSX and regular HTML?

In JSX, certain attributes differ from HTML. For instance, `class` is replaced by `className` because 'class' is a reserved keyword in JavaScript. Similarly, `for` becomes `htmlFor`, and properties like `onClick` are camel-cased (e.g., `onClick` instead of `onclick`).

Why do we need to import React even if we don't see it explicitly being used?

When JSX is used, it is converted into `React.createElement()` calls. These calls rely on the React library, which is why `import React` is necessary in files that use JSX, even if React isn't directly referenced.

How does JSX improve the code compared to using `React.createElement()` directly?

JSX significantly improves code readability and simplicity. For components with many elements, JSX is less verbose and more intuitive, while directly using `React.createElement()` can make the code cumbersome and harder to maintain.

What happens if we need to add attributes to an element in `React.createElement()`?

The second parameter of `React.createElement()` is an object of key-value pairs that represents the attributes. For example, to add an ID attribute to a `div`, we would pass `{ id: 'hello' }` as the second argument.

What future changes related to JSX are mentioned in the video?

The video mentions that the React team is working on breaking changes that may impact JSX. One notable change is replacing `className` with `class`. These changes are targeted for future versions of React (React 18 or 19).

Outlines

00:00

📘 Introduction to JSX and its Importance in React

In this video, we explore JSX, a core concept in React. JSX, which stands for JavaScript XML, extends JavaScript's syntax, allowing developers to write XML-like code for React elements and components. While it's not essential for building React applications, JSX simplifies the process and makes the code more elegant. Underneath, JSX is compiled into pure JavaScript, which browsers can understand. This paragraph introduces JSX and explains its advantages over regular JavaScript, emphasizing how it enhances the developer experience.

05:02

🔧 Understanding JSX vs. React.createElement

This section dives into how JSX works behind the scenes, contrasting it with using the `React.createElement` method. A simple 'Hello Vishwas' component is created using both JSX and the `createElement` function. The paragraph explains that while JSX looks like HTML, it's actually syntactic sugar for calling `React.createElement`. By comparing both methods, it becomes evident that JSX offers a cleaner and more readable approach to creating React elements.

10:03

🛠️ Fixing React.createElement and Adding Attributes

This section continues the comparison of JSX and `React.createElement`. It highlights how `React.createElement` can accept multiple elements as children and how to render nested HTML tags properly. The paragraph also introduces the use of attributes in JSX, such as `id` and `className`. In React, developers need to use `className` instead of `class` because `class` is a reserved keyword in JavaScript. These nuances are discussed in detail, with examples on how to handle them in both JSX and JavaScript.

✨ JSX Advantages and Key Differences from HTML

The video explains the key differences between JSX and HTML, such as using `className` instead of `class` and `htmlFor` instead of `for`, due to JavaScript's reserved keywords. CamelCase naming conventions, like `onClick` and `tabIndex`, are also introduced. The speaker mentions upcoming breaking changes in React, such as potentially reverting `className` back to `class`. The paragraph concludes by urging viewers to stay updated with React's evolving syntax, especially as future versions bring significant changes.

🎬 Conclusion and Updates on React

The video wraps up by emphasizing the simplicity of JSX and its clear advantages over manually calling `React.createElement`. It also provides a look forward, discussing possible upcoming changes in React's syntax, such as changing `className` back to `class`. Viewers are encouraged to stay updated by checking the provided link for more information on these changes. The video concludes with a reminder to subscribe for future updates and tutorials.

Keywords

💡JSX

JSX stands for JavaScript XML and is an extension to JavaScript that allows developers to write XML-like code for React components. It simplifies writing HTML structures in JavaScript, making the code more readable and easier to manage. In the video, JSX is described as not necessary but a preferred method because it enhances code simplicity and elegance.

💡React

React is a JavaScript library for building user interfaces, especially for single-page applications. It allows developers to create reusable components. The video demonstrates how JSX is used within the React framework, showing how React’s createElement function can be used to build components, and explaining that JSX ultimately compiles to React code.

💡JavaScript

JavaScript is a core programming language of the web that allows developers to create dynamic and interactive experiences. The video explains that JSX is an extension to JavaScript, and React components written in JSX are eventually compiled into regular JavaScript, which browsers understand and execute.

💡createElement

createElement is a method provided by React to create elements without JSX. It requires at least three parameters: the type of HTML tag, properties, and children elements. The video contrasts JSX with createElement, showing how JSX simplifies the process by eliminating the need for multiple createElement calls.

💡Component

A component in React is a reusable piece of code that represents part of the user interface. Components can be functional or class-based. In the video, the example of the 'hello' component is created both with and without JSX to show how React components are rendered and how JSX simplifies the code structure.

💡XML

XML (eXtensible Markup Language) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. JSX borrows the XML-like syntax, allowing developers to write HTML-like code directly in JavaScript files, as explained in the video.

💡HTML

HTML (HyperText Markup Language) is the standard language used to create web pages. In the video, JSX is shown as a syntactic extension of JavaScript that resembles HTML, making it easier for developers to write the UI structure directly in their JavaScript code. JSX looks like HTML but is translated into JavaScript.

💡Attributes

Attributes in JSX are properties applied to HTML elements, such as className, id, and others. The video explains that some attributes differ in JSX from regular HTML—for instance, class is written as className because 'class' is a reserved word in JavaScript. Other examples include 'for' becoming 'htmlFor' in JSX.

💡Functional Component

A functional component in React is a JavaScript function that returns JSX. It is a simple and efficient way to create React components. The video demonstrates how to create a functional component called 'hello' using JSX and how it renders in the browser.

💡Props

Props (short for properties) are arguments passed into React components, allowing them to be dynamic and reusable. The video briefly touches on how attributes like id or className can be added as props to React components, and these attributes influence the appearance or behavior of the component in the DOM.

Highlights

JSX is an extension to JavaScript, allowing XML-like syntax for writing React elements and components.

JSX is not necessary for React applications but enhances code simplicity and elegance.

JSX ultimately translates to pure JavaScript that browsers understand.

React components can be created with JSX, which simplifies the code compared to using React.createElement.

JSX allows for a familiar syntax to many developers, making React code more approachable.

The 'create element' method is used in React to create elements without JSX.

JSX elements are syntactic sugar for calling React.createElement.

Attributes in JSX are specified as an object of key-value pairs.

In JSX, 'class' is replaced with 'className' because 'class' is a reserved word in JavaScript.

JSX requires camelCasing for properties, such as 'onClick' and 'tabIndex'.

React's import is necessary for JSX because it translates to React.createElement.

JSX makes code more readable and maintainable, especially in complex components.

The React team is considering changes to JSX, such as allowing 'class' instead of 'className'.

React 18 or 19 may introduce breaking changes that affect how JSX is written.

It's important to stay updated with the latest changes in React for effective development.

The video provides a practical example of creating a React component with and without JSX.

Transcripts

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 SGS X and white is

abused alright let's begin JavaScript

XML or JSON 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 GSX 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 browser's 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

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 dot J's 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 is equal to an

arrow function so empty parentheses and

within the curly braces we are going to

return HTML which is in fact JSX

hello vishwas so a div tag within the

div tag and h1 tag and the text hello

vishwas finally make sure to export it

as the default export

now in AB dodges I can import the

component and include the tag in the

render method so import hello from

components slash hello I'm going to

comment out greet and welcome

and instead include the hallo tag

if you save the files and take a look at

the browser you should be able to see

hello which was so this is the JSX

version of hello component now let's

rewrite the component without using JSX

to help us do that the react library

provides a create element method so

within the function the code now changes

to return react dot create element and

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 dot

create element with the first parameter

a string called dev

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 which was

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 which was but this is

slightly different from what we had

before the h1 tag is missing

so let's include that each one 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 - 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 create

element 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 each one is a text node and

hello vishwas is a text node to render

each one as an h1 element and not as a

text node what we have to do is call the

create element method for the second

time so if I go back to vs code the

third parameter now is going to be again

react dot create element 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 an h1 tag 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 dummy class 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 class name

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 class name attribute

so instead of class it has to be class

name 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 dummy class

now the same in JSX is going to be do

last name is equal to dummy class so

there you go a react component with and

without using JSX

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 dot

create element and that is why you have

to import the react library when you use

JSX

if you take a look at grete Jess 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 dot create element

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 chair sex on the other

hand will keep the code elegant simple

and readable 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 class name

similarly we also have for being

replaced by html4 again for is a keyword

in JavaScript you are also going to see

kami case property naming convention

instead of HTML attribute names for

example on click and tab index will

become on click and tab index 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 class name

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

now with the less please to take a look

at this link as it will help you stay

updated with the changes all right

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