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.