React FundamentalsLesson 1.3

JSX syntax rules every React developer must know

JSX vs HTML differences, className, self-closing tags, JavaScript expressions in JSX, single root element, JSX compilation to React.createElement

JSX Is Not HTML

JSX looks like HTML but it compiles to JavaScript. Babel transforms JSX into React.createElement() calls. Knowing the differences prevents confusing bugs.

Key Differences from HTML

// HTML                    JSX
class="btn"          →   className="btn"
for="name"           →   htmlFor="name"
<input>              →   <input />
<img>                →   <img />
style="color:red"    →   style={{ color: 'red' }}

JavaScript Expressions in JSX

Wrap any JS expression in curly braces {}. Statements (if, for) don't work directly — use ternaries or functions.

const name = 'Priya';
const isLoggedIn = true;

function Greeting() {
  return (
    <div>
      <h1>Hello, {name}</h1>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please sign in.</p>}
    </div>
  );
}

Single Root Element

Every component must return one root element. Wrap siblings in a <div> or a React Fragment to avoid adding extra DOM nodes:

// Fragment shorthand — no extra DOM node
function Layout() {
  return (
    <>
      <Header />
      <Main />
    </>
  );
}

JSX attribute names follow camelCase for multi-word properties: onClick, onChange, tabIndex.