1. What is JSX?
JSX stands for JavaScript XML. It is an extension to JavaScript syntax that allows you to write HTML-like structure directly within your JavaScript files. Behind the scenes, build tools (like Babel or SWC) compile JSX into standard React.createElement() function calls.
// What you write in JSX:
const element = Welcome to Online CBT
;
// What the compiler produces:
const element = React.createElement("h1", { className: "title" }, "Welcome to Online CBT");
2. Core Rules of JSX Syntax
A. Every Component Must Return a Single Root Element
JSX must be enclosed within a single parent element. If you do not want to add unnecessary extra Duration: 180 Minutes | Total Marks: 720 Self-closing elements in HTML (such as Because JSX is closer to JavaScript than HTML, attribute names use camelCase: You can embed any valid JavaScript expression (variables, function calls, arithmetic, ternary checks) inside JSX by wrapping it in curly braces Accuracy: {(score / maxScore) * 100}% Status: {score >= 50 ? "Qualified" : "Disqualified"} Inline styles in JSX are passed as JavaScript objects where CSS properties use camelCase rather than hyphens:<>...>):
function ExamHeader() {
return (
<>
NEET Mock Examination 2026
B. All Tags Must Be Explicitly Closed
, , , ) must always be closed with a forward slash in JSX:
C. camelCase Attribute Naming
className instead of class (since class is a reserved keyword in JavaScript).htmlFor instead of for in label elements.tabIndex, readOnly, autoComplete, etc.3. Embedding JavaScript Expressions with Curly Braces
{}{}:function StudentBadge() {
const studentName = "Rohan Verma";
const score = 94;
const maxScore = 100;
return (
Candidate: {studentName.toUpperCase()}
4. Inline Styles in JSX
const headerStyle = {
backgroundColor: "#1e3a8a",
color: "#ffffff",
padding: "16px 24px",
borderRadius: "8px",
fontSize: "20px"
};
function TopBanner() {
return
📝 Live Lesson Practice