Loading video player...
We just learned that JSX isn't real
HTML. It's JavaScript in disguise. And
since it's not HTML, it has its own set
of rules we need to follow. To save
time, I have already created four
components to demonstrate these rules.
Let me walk you through each one. The
first rule of JSX is that every
component must return a single root
element. You can't return multiple
elements sitting side by side. They need
to be wrapped in a parent container. Let
me show you what I mean. Here is user
profile.jsx.
We've defined and exported a component
called user profile. And the code looks
perfectly reasonable, right? We want to
display a heading and a paragraph. But
ESLint is already giving us a warning
that JSX expressions must have one
parent element. For now, let's ignore
this warning and import the component in
app.tjsx and see what happens. Import
user profile from dot / user profile and
add it to the JSX.
Save the file. Take a look at the
browser and you can see we have an
error. React is telling us adjacent JSX
elements must be wrapped in an enclosing
tag. Remember from our previous lesson
we learned that JSX gets converted to
React.createelement
calls. Under the hood
React.createelement
returns an object which is then returned
by the component function. And in
JavaScript, you can't return two or more
objects from a function without wrapping
them into an array. Similarly, in JSX
you can't return two or more JSX
elements without wrapping them into a
parent element. So, to fix this, we need
to wrap the two elements in a parent
element. Let's wrap them in a div tag.
Opening div and closing div. Save the
file and you can see the red squiggly
lines disappear. Check the browser.
Refresh. And we see our user profile
component rendered. H1 code evolution
react course and paragraph author
viswas. If you inspect the element, you
can see the wrapper div for h1 and the
paragraph tag. Now, what if we don't
want the extra wrapper div? Maybe it's
messing up our CSS layout. Well, React
has a solution. It provides a special
component called fragment which we can
use to wrap our elements. At the top of
the file, we import React. So import
react from react and then use
react.fragment
component to wrap our elements. So
instead of the div tag react dotfragment
and this is a component that the react
library provides. If we save the file
head back to the browser, we can see the
H1 and the paragraph don't have a
wrapping div anymore. This div is from
app.jsx JSX which wraps all the content
or all the components we have invoked so
far. So, React fragment groups our
elements for the return statement but
doesn't add any actual HTML to the DOM.
Very important to keep in mind. Of
course, typing React.fragment every time
is a bit long. So, React gives us a
short hand empty angle brackets and we
can remove the React import at the top.
Much cleaner. And this is what most
React developers use. Check the browser
refresh, and we see our user profile
continues to render. So that is rule
number one. Every component must return
a single root element. The second rule
is that in JSX, every single tag must be
properly closed, even the ones that
don't need closing tags in HTML. I've
created a new file with the component
contact form.jsx JSX to demonstrate
this. The component name is contact form
and it returns a form with two inputs
for name and email and a break tag in
between. This is valid HTML in the sense
that it will render in the browser. In
HTML, input and break tags don't need to
be closed. But JSX is stricter. You can
already see ESLint flagging with red
squiggly lines under the tags. JSX
element has no corresponding closing
tag. Once again, let's ignore this for a
moment and import it in app.jsx.
So, import contact form from dot /
contact form and invoke the component in
the JSX. In the browser, we see an error
and terminated JSX contents. In JSX
every tag must be closed. For
self-closing tags like input and break
we need to add a slash before the
closing bracket. Let's fix this for our
component. Forward slashclosing
rake tagward slashclosing
email slashclosing.
Save the file. Refresh the browser. And
we see our form component rendered name
email with a line break in between. So
the second rule is that every tag must
be properly closed and the rule applies
to all self-closing tags image input
break HR meta link and so on. They all
need that closing slash in JSX. Now the
third rule is attribute names must be
written in camel case. Since JSX is an
extension of JavaScript, HTML attributes
that conflict with JavaScript keywords
need different names. And since
attributes written in JSX become keys of
JavaScript objects with
React.createelement,
they need to be valid JavaScript
variable names as well. Let me show you
the third file I've created, styled
form.jsx.
The component name is styled form and it
returns a form with labels and inputs.
This looks like standard HTML with
classes and attributes.
Let's import it in app.tjsx.
import styled form from dot /styled form
and add it to our app component.
Save the file and check the browser. We
see our form at the top here, but we
have errors in the dev tools console.
React is warning us invalid DOM property
for did you mean HTML 4? Invalid DOM
property class. Did you mean class name
and invalid DOM property tab index? Did
you mean tab index with an uppercase I?
Now here's the issue. Class is a
reserved word in JavaScript used for
defining classes. And for is used in
loops. So in JSX these attributes which
conflict with JavaScript keywords get
renamed. class becomes class name and
four becomes HTML 4 and other attributes
like tab index get renamed to tab index
in camel case let's go back to the
component file and fix this so replace
all occurrences of class with class name
I'm going to select class command D and
type class name similarly for attribute
I'm going to select both the four
attributes utes and this is going to be
HTML 4. Finally, tab index is camel
case. Save the file, refresh, and the
warnings or errors disappear. Now, these
are just a few examples. In React, many
HTML and SVG attributes are written in
camel case. And if you accidentally use
the standard HTML attribute name instead
of the JSX version, don't worry. React
will print a message in your browser
console letting you know what went wrong
and even suggest the correct attribute
name. So that is rule number three.
Attribute names must be written in camel
case with reserved words like class and
for being exceptions. The fourth rule
which is actually more of a superpower
than a rule is that you can embed
JavaScript expressions directly in your
markup using curly braces. Let me jump
to the fourth file I've created.
Candidate profile.jsx.
We have a component called candidate
profile and it returns a heading and a
paragraph. Peter Parker, web developer
with 5 years of experience. This works
but it's completely static. What if you
want to make this dynamic? The beautiful
thing about React components is that
they are just JavaScript functions. And
that means you can write JavaScript code
inside them just like any other
function. Let me add some variables
within the arrow function. Const name
name is equal to Peter Parker. Const ro
is equal to web developer and const
years of experience
is equal to five. Now how do we use
these variables in our JSX? This is
where the curly braces come in. They're
your bridge between JSX and JavaScript.
So for H2, we specify curly braces and
the name. We replace web developer with
curly braces and ro. We replace five
with curly braces and years of
experience.
We are binding the values in JavaScript
to our JSX using curly braces. Let's
import the component in app.tjsx.
import candidate profile from dot
/candidate profile and invoke it in our
app component candidate profile. Save
the file. Take a look at the browser and
you can see the variables are displayed.
Peter Parker, web developer with 5 years
of experience. But here's where it gets
really interesting. Inside the curly
braces, we can put any JavaScript
expression, not just variables, but
calculations, function calls, anything
that evaluates to a value. Let me show
you how. Let me add one more variable is
available and set it to true. Now in the
JSX we can do calculations
a paragraph tag with the text started in
curly braces 2025
minus years of experience. We can also
do tenary operator. So paragraph tag
status colon curly braces is available
and if that is true available for hire
else not available and we can even do
method calls to get the contact email
paragraph tag contact curly braces name
which is Peter Parker dot two lowercase
dotreplace empty spaces with the dot
character and after curly braces
atmail.com.
Save the file and check the browser. We
can see all the JavaScript expressions
are evaluated and their results are
displayed. Started in 2020 status
available for hire and contact
peter.parker@gmail.com.
Very nice.
All right., Here, is, the, key, takeaway., JSX
rules exist because JSX is JavaScript
not HTML. Once you understand that
these rules make perfect sense. Single
root element, that's how JavaScript
returns work. Self-closing tags, that's
XML syntax. Camel case attributes
that's avoiding JavaScript reserved
words. And curly braces, that's your
gateway to all of JavaScript's power. My
goal is to show you not just what to
write, but help you understand why React
works the way it does. Once you get the
why, the what becomes so much easier.
And hopefully that's exactly what you're
experiencing as we go through these
concepts together.
Github - https://github.com/gopinav/React-19-Tutorials Become a Fullstack Developer with Scrimba - https://scrimba.com/fullstack-path-c0fullstack?via=Codevolution Follow me + Twitter - https://twitter.com/CodevolutionWeb Business - codevolution.business@gmail.com Rules of JSX in React 19