✨ JSX Basics

JavaScript XML - Writing HTML in JavaScript

What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that looks like HTML. It makes React code more readable and allows you to write UI components using familiar HTML-like syntax.

Key Point:

JSX is not HTML! It's JavaScript that looks like HTML. Browsers don't understand JSX - it gets compiled to regular JavaScript.

🎨 Basic JSX Syntax

// Simple JSX element
const element = <h1>Hello, World!</h1>;

// JSX with multiple lines (use parentheses)
const greeting = (
  <div>
    <h1>Welcome!</h1>
    <p>This is JSX</p>
  </div>
);

// JSX in a component
function Welcome() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

🔄 JSX Compiles to JavaScript

Behind the scenes, JSX transforms into React function calls:

// You write (JSX)
const element = <h1 className="greeting">Hello!</h1>;

// Compiles to (JavaScript)
const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello!'
);

That's why JSX is more readable - you don't have to write React.createElement everywhere!

🎯 JSX Rules

1. Must Return Single Parent Element

// ❌ Wrong - multiple root elements
function Wrong() {
  return (
    <h1>Title</h1>
    <p>Paragraph</p>
  );
}

// ✅ Correct - wrapped in single parent
function Correct() {
  return (
    <div>
      <h1>Title</h1>
      <p>Paragraph</p>
    </div>
  );
}

// ✅ Also correct - using Fragment
function AlsoCorrect() {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph</p>
    </>
  );
}

2. Close All Tags

// ❌ Wrong in JSX
<img src="photo.jpg">
<br>
<input type="text">

// ✅ Correct - self-closing
<img src="photo.jpg" />
<br />
<input type="text" />

3. Use camelCase for Attributes

// ❌ HTML style
<div class="container" onclick="handleClick()"></div>

// ✅ JSX style
<div className="container" onClick={handleClick}></div>

Common Attribute Changes:

HTML JSX
class className
for htmlFor
onclick onClick
onchange onChange
tabindex tabIndex

💡 JavaScript Expressions in JSX

Use curly braces {} to embed JavaScript expressions:

function App() {
  const name = "Alice";
  const age = 25;
  const numbers = [1, 2, 3, 4, 5];

  return (
    <div>
      {/* Variables */}
      <h1>Hello, {name}!</h1>
      <p>Age: {age}</p>
      
      {/* Expressions */}
      <p>Next year: {age + 1}</p>
      <p>Uppercase: {name.toUpperCase()}</p>
      
      {/* Arrays (will render each element) */}
      <ul>
        {numbers.map(num => <li key={num}>{num}</li>)}
      </ul>
      
      {/* Ternary operator */}
      <p>{age >= 18 ? 'Adult' : 'Minor'}</p>
      
      {/* Function calls */}
      <p>{getGreeting()}</p>
    </div>
  );
}

What You Can Use in {}

  • ✅ Variables: {name}
  • ✅ Expressions: {2 + 2}
  • ✅ Function calls: {getName()}
  • ✅ Ternary operators: {x ? 'yes' : 'no'}
  • ✅ Array methods: {arr.map(...)}
  • ❌ Statements: if, for, while

🎨 Styling in JSX

1. className (CSS Classes)

// CSS file
.button {
  background: blue;
  color: white;
}

// JSX
<button className="button">Click Me</button>

// Multiple classes
<div className="container active large">Content</div>

2. Inline Styles (JavaScript Object)

function StyledComponent() {
  const buttonStyle = {
    backgroundColor: 'blue',  // camelCase!
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px'
  };

  return (
    <div>
      {/* With variable */}
      <button style={buttonStyle}>Button 1</button>
      
      {/* Inline object */}
      <button style={{ 
        backgroundColor: 'red', 
        color: 'white' 
      }}>
        Button 2
      </button>
    </div>
  );
}

Note: CSS Properties in camelCase

  • background-color → backgroundColor
  • font-size → fontSize
  • border-radius → borderRadius

💬 Comments in JSX

function App() {
  return (
    <div>
      {/* This is a JSX comment */}
      
      {/* 
        Multi-line
        comment
      */}
      
      <h1>Hello</h1>
      
      {/* Comments must be inside {} */}
    </div>
  );
}

🔧 Fragments

When you don't want an extra <div> wrapper:

import React from 'react';

function List() {
  return (
    <React.Fragment>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </React.Fragment>
  );
}

// Short syntax (more common)
function List() {
  return (
    <>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </>
  );
}

📋 Complete Example

function UserProfile() {
  // JavaScript variables
  const user = {
    name: "Sarah Johnson",
    age: 28,
    occupation: "Developer",
    hobbies: ["Reading", "Coding", "Gaming"]
  };

  const profilePic = "profile.jpg";
  const isOnline = true;

  return (
    <div className="profile-card">
      {/* User image */}
      <img 
        src={profilePic} 
        alt={`${user.name}'s profile`}
        className="profile-pic"
      />
      
      {/* User info */}
      <h2>{user.name}</h2>
      <p>Age: {user.age}</p>
      <p>Occupation: {user.occupation}</p>
      
      {/* Online status with conditional */}
      <p className={isOnline ? 'online' : 'offline'}>
        {isOnline ? '🟢 Online' : '⚪ Offline'}
      </p>
      
      {/* Hobbies list */}
      <h3>Hobbies:</h3>
      <ul>
        {user.hobbies.map((hobby, index) => (
          <li key={index}>{hobby}</li>
        ))}
      </ul>
      
      {/* Button with inline style */}
      <button 
        onClick={() => alert(`Hello ${user.name}!`)}
        style={{ 
          backgroundColor: '#61dafb',
          padding: '10px 20px',
          border: 'none',
          borderRadius: '5px',
          cursor: 'pointer'
        }}
      >
        Say Hello
      </button>
    </div>
  );
}

export default UserProfile;

⚠️ Common JSX Mistakes

1. Using 'class' instead of 'className'

// ❌ Wrong
<div class="container"></div>

// ✅ Correct
<div className="container"></div>

2. Forgetting to close tags

// ❌ Wrong
<input type="text">

// ✅ Correct
<input type="text" />

3. Using if/for inside JSX

// ❌ Wrong
<div>
  {if (isLoggedIn) { <p>Welcome</p> }}
</div>

// ✅ Correct - use ternary
<div>
  {isLoggedIn ? <p>Welcome</p> : <p>Please login</p>}
</div>

// ✅ Or && operator
<div>
  {isLoggedIn && <p>Welcome</p>}
</div>

🎯 Key Takeaways