ReactJS Tutorial - 8 - JSX
Summary
TLDRThis 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
📘 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.
🔧 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.
🛠️ 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.
Mindmap
Keywords
💡JSX
💡React
💡JavaScript
💡createElement
💡Component
💡XML
💡HTML
💡Attributes
💡Functional Component
💡Props
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
5.0 / 5 (0 votes)