React Rules – web4learners.com

JSX looks similar to HTML, but it follows a set of rules that are important when writing React components. These rules make JSX compatible with JavaScript and allow React to correctly understand the UI structure you want to create.

Understanding these rules early will help you avoid common errors and write cleaner React code.

JSX Must Return a Single Root Element

A JSX expression returned from a component generally needs one parent element.

For example, this is valid:

function App() {
  return (
    <div>
      <h1>Welcome to React</h1>
      <p>Learn JSX step by step.</p>
    </div>
  );
}

The <div> acts as the single root element containing both the <h1> and <p>.

This is not valid:

function App() {
  return (
    <h1>Welcome to React</h1>
    <p>Learn JSX step by step.</p>
  );
}

There are two elements at the root level.

You can solve this by wrapping them in a parent element or using a Fragment.

function App() {
  return (
    <>
      <h1>Welcome to React</h1>
      <p>Learn JSX step by step.</p>
    </>
  );
}

Fragments allow multiple elements to be grouped without adding an extra HTML element to the DOM.

JSX Tags Must Be Properly Closed

Every JSX element must be closed.

For example:

<h1>Welcome</h1>
<p>Hello React</p>

Self-closing elements must use />:

<img src="logo.png" />
<input type="text" />
<br />

Incorrect:

<img src="logo.png">

Correct:

<img src="logo.png" />

This rule applies to both standard HTML elements and custom React components.

<UserProfile />

JSX Elements Must Be Properly Nested

JSX follows proper parent-child nesting.

Correct:

<div>
  <h1>Welcome</h1>
  <p>Hello React</p>
</div>

Incorrect:

<div>
  <h1>Welcome</div>
</h1>

The closing tags must match their corresponding opening tags in the correct order.

A useful way to think about JSX nesting is like opening and closing boxes. The last element you open should be the first one you close.

JSX Is Case-Sensitive

JSX is case-sensitive.

For example:

<div></div>

and

<DIV></DIV>

are not treated the same way.

React also uses capitalization to distinguish between HTML elements and React components.

Lowercase names are normally interpreted as built-in HTML elements:

<div />
<button />
<input />

Capitalized names are treated as React components:

<Header />
<UserProfile />
<ProductCard />

This is why React component names normally begin with an uppercase letter.

React Components Should Use PascalCase

Custom React components should normally use PascalCase.

Correct:

function UserProfile() {
  return <h2>User Profile</h2>;
}

Then:

<UserProfile />

Another example:

function ProductCard() {
  return <div>Product information</div>;
}

Use:

<ProductCard />

Instead of:

<productcard />

Lowercase JSX names are generally interpreted as HTML elements rather than your React components.

JSX Uses `className` Instead of `class`

When assigning a CSS class in JSX, use className.

Correct:

<div className="container">
  <h1>Hello React</h1>
</div>

Not:

<div class="container">

In JSX, className is the standard way to assign the DOM element’s CSS class.

For example:

function App() {
  return (
    <div className="app">
      <h1 className="title">My React App</h1>
    </div>
  );
}

JSX Uses `htmlFor` Instead of `for`

When connecting a <label> with a form element, JSX uses htmlFor.

Correct:

<label htmlFor="email">Email</label>
<input id="email" type="email" />

Instead of:

<label for="email">Email</label>

This is another example of JSX using JavaScript-friendly property names.

JSX Attribute Names Often Use camelCase

Many JSX attributes follow JavaScript naming conventions.

For example:

<button onClick={handleClick}>
  Click Me
</button>

Notice that onClick uses camelCase.

Other common examples include:

tabIndex
readOnly
autoFocus
maxLength

This differs from some HTML attribute conventions.

JSX Event Names Use camelCase

React event handlers are written using camelCase.

For example:

<button onClick={handleClick}>
  Click Me
</button>

Common React event names include:

onClick
onChange
onSubmit
onMouseEnter
onKeyDown
onFocus

HTML might use lowercase event attributes such as:

onclick

React uses:

onClick

JSX JavaScript Expressions Go Inside Curly Braces

JavaScript expressions can be placed inside JSX using {}.

For example:

function App() {
  const name = "Arafat";

  return <h1>Hello, {name}</h1>;
}

The value of name is inserted into the JSX.

You can also perform expressions:

<h1>{10 + 20}</h1>

This renders:

You can use properties:

const user = {
  name: "John",
  age: 25
};

return (
  <div>
    <h2>{user.name}</h2>
    <p>{user.age}</p>
  </div>
);

Curly braces are one of the most important parts of JSX because they allow JavaScript expressions to interact with the UI.

JSX Supports JavaScript Expressions, Not Statements

Inside JSX curly braces, you can use JavaScript expressions.

For example:

<h1>{name}</h1>

<p>{age + 1}</p>

<p>{user.name}</p>

<p>{isLoggedIn ? "Welcome" : "Please log in"}</p>

However, you cannot directly place JavaScript statements inside JSX expressions.

For example, this does not work:

<h1>{if (isLoggedIn) { "Welcome" }}</h1>

Instead, use an expression such as a ternary:

<h1>{isLoggedIn ? "Welcome" : "Please log in"}</h1>

You can also perform more complex logic outside the returned JSX.

JSX Attributes Can Use JavaScript

Curly braces can also be used inside attributes when you want to provide a JavaScript value.

For example:

const imageUrl = "/logo.png";

return <img src={imageUrl} />;

Another example:

const buttonDisabled = true;

return (
  <button disabled={buttonDisabled}>
    Submit
  </button>
);

The value between {} is evaluated as JavaScript.

String Attributes Can Use Quotes

Static text values can be written using quotes.

<h1 className="title">Hello React</h1>

Here, "title" is a string.

You can also use single quotes:

<h1 className='title'>Hello React</h1>

However, when the value comes from a JavaScript variable, use curly braces:

const className = "title";

return <h1 className={className}>Hello React</h1>;

Do not write:

<h1 className="{className}">Hello React</h1>

That would treat {className} as literal text rather than evaluating the variable.

JSX Uses JavaScript Naming for Some Properties

Some HTML attributes have different names in JSX because JSX works with JavaScript-based property conventions.

Common examples include:

HTML	JSX
`class`	`className`
`for`	`htmlFor`
`onclick`	`onClick`
`onchange`	`onChange`
`tabindex`	`tabIndex`
`readonly`	`readOnly`
`maxlength`	`maxLength`

Knowing these differences prevents many JSX errors.

JSX Comments Have a Special Syntax

JavaScript-style comments cannot simply be placed directly inside JSX markup.

This is not the correct JSX comment syntax:

<div>
  // This is a heading
  <h1>Hello</h1>
</div>

Instead, use:

<div>
  {/* This is a heading */}
  <h1>Hello</h1>
</div>

For example:

function App() {
  return (
    <div>
      {/* Main heading */}
      <h1>Welcome</h1>

      {/* Description */}
      <p>Learn React with JSX.</p>
    </div>
  );
}

The comment is placed inside {/* */} because JSX is embedded within JavaScript.

JSX Supports Fragments

Fragments allow you to return multiple elements without creating an unnecessary wrapper element.

Short syntax:

<>
  <h1>Welcome</h1>
  <p>Learn React</p>
</>

Full syntax:

<React.Fragment>
  <h1>Welcome</h1>
  <p>Learn React</p>
</React.Fragment>

Fragments are especially useful when a wrapper such as <div> is not needed.

JSX Can Contain React Components

JSX is not limited to HTML elements.

You can use React components inside JSX:

function Header() {
  return <h1>My Website</h1>;
}

function App() {
  return (
    <div>
      <Header />
      <p>Welcome to my application.</p>
    </div>
  );
}

Here, <Header /> represents a React component.

Components can also be nested:

<AppLayout>
  <Header />
  <MainContent />
  <Footer />
</AppLayout>

This allows applications to be constructed from smaller reusable components.

JSX Supports Conditional Content

You can use JavaScript expressions to decide what should appear.

Using a ternary operator:

function App() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
    </div>
  );
}

You can also use &&:

{isLoggedIn && <p>You are logged in.</p>}

The important rule is that the conditional logic inside JSX must use an expression.

JSX Can Render Arrays

Arrays can be rendered using JavaScript expressions.

For example:

const fruits = ["Apple", "Banana", "Mango"];

function App() {
  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

The .map() method creates JSX elements for each item.

When rendering a collection, React expects a suitable key for each item.

<li key={fruit}>{fruit}</li>

Keys help React identify individual elements when a list changes.

JSX Allows JavaScript Property Access

Objects can be accessed inside JSX using JavaScript expressions.

const user = {
  name: "John",
  role: "Developer"
};

function App() {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.role}</p>
    </div>
  );
}

You can also access nested properties:

const user = {
  profile: {
    name: "John"
  }
};

return <h1>{user.profile.name}</h1>;

JSX Does Not Automatically Display JavaScript Objects

Although JSX can access object properties, directly rendering an object is generally not valid.

For example:

const user = {
  name: "John",
  age: 25
};

return <p>{user}</p>;

React cannot directly render this object as a normal child.

Instead, access a specific property:

return <p>{user.name}</p>;

Or convert the object into a string when appropriate:

return <p>{JSON.stringify(user)}</p>;

JSX Expressions Cannot Contain Certain Values Directly

React can render many common JavaScript values, including strings and numbers.

<p>{"Hello"}</p>
<p>{100}</p>

However, values such as objects are not directly renderable as normal JSX children.

Arrays can be rendered when their contents are renderable:

const items = ["Apple", "Banana", "Mango"];

return <p>{items.join(", ")}</p>;

Understanding what JavaScript values can appear in JSX becomes especially important when working with API data and application state.

JSX Uses Parentheses for Multiline Returns

When JSX spans multiple lines, wrapping it in parentheses makes the structure clear.

For example:

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <p>This is my React application.</p>
    </div>
  );
}

This is particularly useful when a component returns several nested elements.

JSX Has a Few Important Syntax Rules

The most important JSX rules can be summarized as follows:

Rule	Example
Return one root	`<div>...</div>`
Use Fragments when needed	`<>...</>`
Close all tags	`<img />`
Properly nest elements	`<div><p>...</p></div>`
Use `className`	`<div className="box">`
Use `htmlFor`	`<label htmlFor="name">`
Use camelCase events	`onClick`
Use `{}` for JS expressions	`{name}`
Use PascalCase for components	`<UserProfile />`
Use JSX comments	`{/* comment */}`
Provide keys for rendered lists	`<li key={id}>`

Common JSX Mistakes

Forgetting to Close an Element

Incorrect:

<div>
  <h1>Hello
</div>

Correct:

<div>
  <h1>Hello</h1>
</div>

Using `class` Instead of `className`

Incorrect:

<div class="container">

Correct:

<div className="container">

Using Lowercase Component Names

Incorrect:

<userProfile />

Correct:

<UserProfile />

Using HTML Event Names

Incorrect:

<button onclick={handleClick}>

Correct:

<button onClick={handleClick}>

Forgetting Curly Braces for Dynamic Values

Incorrect:

<img src="imageUrl" />

If imageUrl is a variable, this uses the literal text "imageUrl".

Correct:

<img src={imageUrl} />

Using JavaScript Statements Directly Inside JSX

Incorrect:

<p>{if (age > 18) "Adult"}</p>

Correct:

<p>{age > 18 ? "Adult" : "Minor"}</p>

Forgetting the `key` When Rendering Lists

Instead of:

{items.map((item) => (
  <li>{item}</li>
))}

use:

{items.map((item) => (
  <li key={item.id}>{item.name}</li>
))}

The key should identify the item consistently within that list.

A Complete JSX Rules Example

The following component combines several JSX rules in one example:

function UserCard() {
  const user = {
    name: "John",
    role: "Frontend Developer",
    isOnline: true
  };

  return (
    <>
      <div className="user-card">
        <h2>{user.name}</h2>
        <p>{user.role}</p>

        {user.isOnline && <span>Online</span>}

        <button onClick={() => console.log("Profile clicked")}>
          View Profile
        </button>
      </div>
    </>
  );
}

This example demonstrates:

A Fragment as the root
Properly closed elements
className
JavaScript expressions
Object property access
Conditional JSX
camelCase event names
A React component using PascalCase

Where to Place an Image

Image Placement: After “JSX Has a Few Important Syntax Rules”

Create a 16:9 JSX Rules infographic showing the major JSX rules visually:

Single root element
Properly closed tags
Proper nesting
className
htmlFor
camelCase events
{} for JavaScript expressions
PascalCase components
JSX comments
key for lists

Caption:
The most important JSX rules to remember when building React interfaces.

Alt text:
JSX rules infographic showing React JSX syntax, nesting, expressions, attributes, components, and list keys.

Practice Exercise

Create a React component called StudentCard.

It should:

Use a Fragment as its root.
Display a student’s name.
Display their course.
Display whether they are currently online.
Use className for styling.
Add a button with onClick.
Use a JavaScript variable inside JSX.
Use a conditional expression to display the online status.

For example, your component could contain data like:

const student = {
  name: "Alex",
  course: "React Development",
  isOnline: true
};

Try writing the complete JSX yourself before checking your previous examples.

Key Takeaways

JSX has a small number of rules, but they are essential for writing valid React code.

Remember these core rules:

JSX should have a single root or use a Fragment.
Every JSX element must be properly closed.
JSX elements must be properly nested.
React component names should use PascalCase.
Use className instead of class.
Use htmlFor instead of for.
React event names use camelCase such as onClick.
Put JavaScript expressions inside {}.
JSX comments use {/* ... */}.
Use key when rendering lists.
Use expressions such as ternaries or && for conditional JSX.
JSX attributes can receive dynamic JavaScript values through {}.

Once these rules become familiar, JSX becomes much easier to read and write. The next step is understanding JSX Expressions, which explains more deeply how JavaScript values and expressions work inside JSX.

JSX Must Return a Single Root Element

JSX Tags Must Be Properly Closed

JSX Elements Must Be Properly Nested

JSX Is Case-Sensitive

React Components Should Use PascalCase

JSX Uses className Instead of class

JSX Uses htmlFor Instead of for

JSX Attribute Names Often Use camelCase

JSX Event Names Use camelCase

JSX JavaScript Expressions Go Inside Curly Braces

JSX Supports JavaScript Expressions, Not Statements

JSX Attributes Can Use JavaScript

String Attributes Can Use Quotes

JSX Uses JavaScript Naming for Some Properties

JSX Comments Have a Special Syntax

JSX Supports Fragments

JSX Can Contain React Components

JSX Supports Conditional Content

JSX Can Render Arrays

JSX Allows JavaScript Property Access

JSX Does Not Automatically Display JavaScript Objects

JSX Expressions Cannot Contain Certain Values Directly

JSX Uses Parentheses for Multiline Returns

JSX Has a Few Important Syntax Rules

Common JSX Mistakes

Forgetting to Close an Element

Using class Instead of className

Using Lowercase Component Names

Using HTML Event Names

Forgetting Curly Braces for Dynamic Values

Using JavaScript Statements Directly Inside JSX

Forgetting the key When Rendering Lists

A Complete JSX Rules Example

Where to Place an Image

Practice Exercise

Key Takeaways

JSX Uses `className` Instead of `class`

JSX Uses `htmlFor` Instead of `for`

Using `class` Instead of `className`

Forgetting the `key` When Rendering Lists