JSX Basics in React

From the React Components & JSX cheat sheet · JSX Fundamentals · verified Jul 2026

JSX Basics

JavaScript XML syntax for React

javascript
// JSX looks like HTML but it's JavaScript
function Welcome() {
  return <h1>Hello World</h1>
}

// Multi-line JSX needs parentheses
function Card() {
  return (
    <div className="card">
      <h2>Title</h2>
      <p>Content</p>
    </div>
  )
}

// JSX compiles to JavaScript
// <h1>Hi</h1> becomes React.createElement('h1', null, 'Hi')
🟢 Essential - JSX is JavaScript, not HTML
💡 Use parentheses for multi-line JSX
📌 Must return a single root element
jsxsyntaxessential

More React tasks

Back to the full React Components & JSX cheat sheet