Complete Learning Resource • Under Review

JSX

Learn JSX as a readable way to describe React UI inside JavaScript. Move from basic syntax to expressions, conditions, lists, children, fragments, forms, and a small student dashboard.

3rd Year B.Tech Beginner-friendly Classroom + Self-study Copy-paste practice React + Vite

How to Use This Resource

The source describes JSX as an XML-based syntax extension to JavaScript. It lets developers use HTML-like tags inside JavaScript while still using JavaScript expressions for dynamic values. JSX is not HTML; a transpiler converts it into browser-readable JavaScript during the build process.

JSX source

→

Transpilation

→

JavaScript

→

Browser UI

Transpiling: converting source code from one high-level language or language version into another equivalent source code. The source calls a transpiler a source-to-source compiler.

Prerequisites & Setup

JavaScript basics

Variables, strings, arrays, objects, functions, arrow functions, map() and conditional expressions.

Tools

VS Code, a modern browser and Node.js with npm.

Web basics

Comfort with HTML tags and CSS properties.

Practice folder

A folder where you can create React projects.

node -v
npm -v

npm create vite@latest jsx-classroom -- --template react
cd jsx-classroom
npm install
npm run dev

Open the local address shown by the terminal, usually http://localhost:5173. In a Vite project, edit src/App.jsx and save; the browser normally updates through hot reloading.

Feature	Hot reloading	Live reloading
Updated content	Usually only changed modules or components	The entire page or application
Application state	Usually preserved	Usually reset
Speed	Faster	Slower
Typical use	React, Vue, Vite, Webpack	Simple HTML, CSS and JavaScript projects

2. JSX Elements, Closing Tags & Nesting

JSX follows XML-like rules more strictly than ordinary HTML. Every element must be closed, including empty elements such as input, img and br.

<div className="card">
  <img src="photo.png" alt="Student project" />
  <input type="text" />
</div>

Nested campus card

Computer Science Department

Today: JSX practice

function App() {
  return (
    <section>
      <h1>Computer Science Department</h1>
      <p>Today: JSX practice</p>
    </section>
  );
}

export default App;

Form controls

This is a browser demonstration of the JSX structure.

Common mistakes: returning sibling elements without a wrapper, placing a JavaScript statement such as if directly inside returned markup, forgetting to close a tag, or overlapping tags.

3. JSX Attributes & Reserved Words

JSX attributes resemble HTML attributes, but their names follow JavaScript conventions.

HTML style	JSX style	Why?
`class`	`className`	`class` has a special meaning in JavaScript.
`for`	`htmlFor`	`for` has a special meaning in JavaScript.
`tabindex`	`tabIndex`	Multiword attributes use camelCase.
`onclick`	`onClick`	React event props use camelCase.

<button className="primary" tabIndex={0} disabled={isSaving}>
  Save
</button>

Live attribute demo

Library Assistant

Selection: Online

function App() {
  const isOnline = true;

  return (
    <div className="profile-card">
      <h2>Library Assistant</h2>
      <p aria-label="online status">
        Status: {isOnline ? "Online" : "Offline"}
      </p>
    </div>
  );
}

Data attributes

<button data-course="react" data-level="third-year">
  Open React course
</button>

Common mistakes: use className rather than class; use onClick rather than onclick; use a variable directly rather than putting its name in quotes when you need its value.

4. JavaScript Expressions in JSX

Curly braces tell JSX to evaluate a JavaScript expression instead of treating the content as literal text.

Can use

Variables, arithmetic, function calls, logical operations and conditional expressions.

Cannot place directly

Statements such as if and for do not produce a value. Prepare complex logic before return.

const total = price * quantity;
return <p>Total: ₹{total}</p>;

Interactive marks calculation

Internal marks

External marks

Assessment Result

Total: 87/100

Percentage: 87%

function App() {
  const internal = 42;
  const external = 45;
  const total = internal + external;
  const percentage = (total / 100) * 100;

  return (
    <main>
      <h2>Assessment Result</h2>
      <p>Total: {total}/100</p>
      <p>Percentage: {percentage}%</p>
    </main>
  );
}

Reusable greeting

Student name

Good morning, Asha

function getGreeting(name) {
  return `Good morning, ${name}`;
}

function App() {
  const student = "Asha";
  return <h1>{getGreeting(student)}</h1>;
}

5. JSX Strings, Numbers, Booleans & Objects

Value	What JSX does
String / number	Can be displayed directly inside curly braces.
`true`, `false`, `null`, `undefined`	Usually render nothing.
Object	Cannot be rendered directly as a child; select a property or deliberately convert it.

Inline style object

const cardStyle = {
  backgroundColor: "#eef6ff",
  padding: "16px"
};

return <section style={cardStyle}>Content</section>;

Placement Preparation

Practice one JSX concept every day.

Object property display

const student = { name: "Ravi", branch: "CSE", year: 3 };

return (
  <div>
    <h2>{student.name}</h2>
    <p>{student.branch} — Year {student.year}</p>
  </div>
);

Common mistakes: write backgroundColor in a JavaScript style object, not background-color; do not render {student} directly when student is an object.

6. JSX Comments

JSX comments are JavaScript comments placed inside a JSX expression container. HTML comment syntax is not valid inside a component's returned JSX.

return (
  <div>
    {/* This note is visible only in source code. */}
    <h1>Dashboard</h1>
  </div>
);

Wednesday Lab Schedule

09:00 — JSX fundamentals

11:00 — Component practice

The source comments are not displayed as page text.

Remember: use {/* ... */}, not .

7. Conditional Rendering in JSX

Conditional rendering means displaying different UI based on data. The source presents three common approaches: prepare an element variable with if/else, use logical AND for optional content, or use a ternary for two alternatives.

{isSubmitted && <p>Submitted successfully.</p>}

{isPaid ? <Receipt /> : <PayNowButton />}

Interactive assignment status

Assignment submitted successfully.

function App() {
  const submitted = true;
  let statusMessage;

  if (submitted) {
    statusMessage = <p>Assignment submitted successfully.</p>;
  } else {
    statusMessage = <p>Please upload your assignment.</p>;
  }

  return (
    <section>
      <h2>Web Technologies Assignment</h2>
      {statusMessage}
    </section>
  );
}

Login greeting

Student logged in

Please log in.

Pitfall from the source: {count && <p>...</p>} can render 0. When zero matters, use a clearer check such as count > 0.

8. Rendering Lists with map() and Keys

JavaScript arrays are often converted into repeated JSX using map(). Each sibling produced by map() should have a stable key. The source recommends a database ID as a better key than an array index when items can change.

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

Interactive course list

The list is generated from an array in the page script.

const courses = [
  { id: 1, name: "JavaScript", hours: 6 },
  { id: 2, name: "React JSX", hours: 5 },
  { id: 3, name: "Node.js", hours: 7 }
];

return (
  <section>
    <h2>Today’s Learning Plan</h2>
    <ul>
      {courses.map(course => (
        <li key={course.id}>
          {course.name} — {course.hours} hours
        </li>
      ))}
    </ul>
  </section>
);

Completed-task filter

Common mistakes: missing keys, duplicate keys, using an index as a key for a changing list, or forgetting to return JSX from a map() callback when braces are used.

9. Children & Component Composition

A JSX element can contain children between its opening and closing tags. A custom component receives these through props.children. Composition builds specialized interfaces by placing reusable components inside a general component.

function Panel({ title, children }) {
  return (
    <section className="panel">
      <h2>{title}</h2>
      <div>{children}</div>
    </section>
  );
}

Notice

Bring your laptop to the React lab.

Checklist

Install Node.js
Open VS Code

Composition idea: the reusable component controls the container/layout; the parent supplies the inner content through children.

Composition with an action

React Workshop

Seats are available for the afternoon session.

No action yet.

function Card({ title, children, action }) {
  return (
    <article>
      <h2>{title}</h2>
      {children}
      {action}
    </article>
  );
}

function App() {
  return (
    <Card
      title="React Workshop"
      action={<button>Register</button>}
    >
      <p>Seats are available for the afternoon session.</p>
    </Card>
  );
}

10. React Fragments

A component must return one top-level value, but adding a meaningless div only to satisfy that rule can make the DOM larger. A Fragment groups multiple elements without adding an HTML element to the browser DOM.

return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

Table rows without an extra div

JSX	Markup syntax
Props	Component input

Mapped fragments

import { Fragment } from "react";

function App() {
  const facts = [
    { id: 1, label: "JSX", value: "Readable UI syntax" },
    { id: 2, label: "Babel", value: "Transpilation tool" }
  ];

  return (
    <dl>
      {facts.map(fact => (
        <Fragment key={fact.id}>
          <dt>{fact.label}</dt>
          <dd>{fact.value}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

Pitfall: shorthand <>...</> cannot receive a key when mapping multiple sibling elements. Use the explicit Fragment form when a key is required.

11. JSX & HTML Forms

JSX uses normal form elements, but attributes follow JSX naming rules. A label connects to an input through htmlFor and id. A button inside a form defaults to submit behavior unless its type is specified.

<form onSubmit={handleSubmit}>
  <label htmlFor="email">Email</label>
  <input id="email" name="email" type="email" />
  <button type="submit">Send</button>
</form>

Accessible registration form

Try submitting with the name left empty to see browser validation.

Checkbox and boolean attribute

Receive lab reminders

Common mistakes: use defaultChecked for an initial uncontrolled checkbox, use defaultValue/value on select, and do not forget type="button" for a non-submit button inside a form.

12. A Complete JSX Mini-Project

The source combines expressions, attributes, conditional rendering, lists, children and fragments into a small student dashboard that can be extended one feature at a time.

import { Fragment } from "react";

function StatusBadge({ active }) {
  return <span>{active ? "Active" : "Completed"}</span>;
}

function StudyCard({ course }) {
  return (
    <article style={{ border: "1px solid #ccc", padding: 12, margin: 8 }}>
      <h2>{course.title}</h2>
      <p>Instructor: {course.instructor}</p>
      <StatusBadge active={!course.completed} />
      {course.completed && <p>Certificate available.</p>}
    </article>
  );
}

function App() {
  const courses = [
    { id: 1, title: "JSX Foundations", instructor: "Dr. Meera", completed: true },
    { id: 2, title: "React Components", instructor: "Mr. Arjun", completed: false }
  ];

  return (
    <>
      <header>
        <h1>Student Learning Dashboard</h1>
        <p>{courses.length} courses assigned</p>
      </header>

      <main>
        {courses.map(course => (
          <Fragment key={course.id}>
            <StudyCard course={course} />
          </Fragment>
        ))}
      </main>
    </>
  );
}

export default App;

Student Learning Dashboard

2 courses assigned

Expected output: Two course cards with statuses and a certificate message for the completed course.

13. Debugging Checklist

Unexpected token

Check for a missing closing tag, parenthesis, brace or quote.

Adjacent JSX elements

Wrap siblings in a semantic element or Fragment.

Object error

Render a property such as object.name rather than the whole object.

Unknown prop

Check camelCase names such as tabIndex, readOnly and onClick.

Missing key

Add a stable key to the outermost mapped element.

Blank page

Inspect the browser console and terminal for the first error, not the last cascade of errors.

No hot reload

Save the file, confirm the correct project folder, and restart npm run dev if needed.

14. Practice Exercises

1. Campus notice

Create a notice component with title, date and message passed through expressions.

2. Timetable

Build a timetable from an array using map() and stable keys.

3. Empty state

Create a message that appears when an array has length zero.

4. Fragment

Replace an unnecessary div with a Fragment and inspect the DOM difference.

5. Reusable Card

Create a Card component that receives title, children and a button through props.

6. Accessible form

Add name, email, branch select and a required checkbox.

7. Completed only

Extend the dashboard with a “Show completed only” Boolean and conditional rendering.

Quick Reference

className="card"Not class

htmlFor="email"Not for

{student.name}JavaScript expression

style={{ color: "blue" }}Object uses camelCase

{ok ? <A /> : <B />}Both branches

{ok && <Note />}Optional content; beware of 0

items.map(x => <li key={x.id}>...</li>)Stable key

<>...</>No extra DOM node

{/* explanation */}JSX comment

JSX

How to Use This Resource

Prerequisites & Setup

JavaScript basics

Tools

Web basics

Practice folder

2. JSX Elements, Closing Tags & Nesting

Nested campus card

Computer Science Department

Form controls

3. JSX Attributes & Reserved Words

Live attribute demo

Library Assistant

Data attributes

4. JavaScript Expressions in JSX

Can use

Cannot place directly

Interactive marks calculation

Assessment Result

Reusable greeting

5. JSX Strings, Numbers, Booleans & Objects

Inline style object

Placement Preparation

Object property display

6. JSX Comments

Wednesday Lab Schedule

7. Conditional Rendering in JSX

Interactive assignment status

Login greeting

8. Rendering Lists with map() and Keys

Interactive course list

Completed-task filter

9. Children & Component Composition

Notice

Checklist

Composition with an action

React Workshop

10. React Fragments

Table rows without an extra div

Mapped fragments

11. JSX & HTML Forms

Accessible registration form

Checkbox and boolean attribute

12. A Complete JSX Mini-Project

Student Learning Dashboard

13. Debugging Checklist

Unexpected token

Adjacent JSX elements

Object error

Unknown prop

Missing key

Blank page

No hot reload

14. Practice Exercises

1. Campus notice

2. Timetable

3. Empty state

4. Fragment

5. Reusable Card

6. Accessible form

7. Completed only

Quick Reference

15. Quick Check