What is JSX?

HTML-LIKE SYNTAX · JAVASCRIPT POWER

📜 SETUP: Create Your First React App (Terminal Commands)

// ============================================
// STEP 1: CREATE A NEW REACT APP
// ============================================
// WHY: Create React App is the official tool to bootstrap React projects
// It sets up everything: Webpack, Babel, development server, hot reloading
// npx runs the command without permanently installing it globally
npx create-react-app webbo3-react

// STEP 2: NAVIGATE INTO THE PROJECT FOLDER
cd webbo3-react

// STEP 3: START THE DEVELOPMENT SERVER
// WHY: npm start launches a local server at http://localhost:3000
// It also enables hot reloading — any code change instantly updates the browser
npm start

// Your browser will automatically open to http://localhost:3000
// You should see the default React logo spinning

// STEP 4: EDIT src/App.js with the code from CODE BLOCK 2
// The changes will appear instantly in your browser
    

Build the Enrollment App

USE STATE · CONDITIONAL RENDERING · EVENT HANDLERS

📜 CODE BLOCK 2: Complete src/App.js (with line-by-line comments)

// ============================================
// REACT ENROLLMENT APP
// ============================================

// WHY: Import React and the useState hook
// useState lets components have their own data that triggers re-renders when changed
import React, { useState } from "react";

// WHY: App is the root component of our entire application
// Every React app has at least one component
function App() {
  
  // WHY: useState returns an array with two elements: current state and a setter function
  // Array destructuring extracts them into variables
  // [name] holds the current value, [setName] updates it and triggers re-render
  const [name, setName] = useState("");      // Initially empty string
  const [enrolled, setEnrolled] = useState(false);  // Initially not enrolled

  // WHY: Event handler called when user clicks "Enroll Now"
  // HOW: Checks if name is not just whitespace before enrolling
  const handleEnroll = () => {
    // .trim() removes leading/trailing whitespace
    // If the user typed something meaningful, set enrolled to true
    if (name.trim() !== "") {
      setEnrolled(true);
    }
  };

  // WHY: JSX — HTML-like syntax inside JavaScript
  // The component must return a single parent element (here, a div)
  // Inline styles in React are objects with camelCase properties
  return (
    <div style={{ padding: "40px", fontFamily: "Arial" }}>
      <h1>Welcome to Webbo3h1>
      <h2>JavaScript Mastery Course — Cohort 01h2>
      
      // CONDITIONAL RENDERING: Show different UI based on enrolled state
      {!enrolled ? (
        // NOT ENROLLED: Show form with input and button
        <div>
          <input
            placeholder="Enter your name"
            value={name}
            // onChange runs every time the user types
            // e.target.value contains what the user typed
            onChange={e => setName(e.target.value)}
          />
          <button onClick={handleEnroll}>Enroll Nowbutton>
        div>
      ) : (
        // ENROLLED: Show welcome message with user's name
        <p style={{ color: "green" }}>
          Welcome, {name}! You are enrolled in Cohort 01.
        p>
      )}
    div>
  );
}

// WHY: Export the component so it can be imported and rendered in index.js
export default App;

// ============================================
// HOW THE DATA FLOWS
// ============================================
// 1. User types in input → onChange fires → setName updates state
// 2. setName triggers a re-render of the component
// 3. The input's value prop gets the new name (controlled component)
// 4. User clicks Enroll → handleEnroll runs → setEnrolled(true)
// 5. setEnrolled triggers re-render → ternary shows welcome message instead of form
    

🎯 Live Demo: Try the React Enrollment Form (simulated)

⬆️ This is exactly what your React app will look like! Type your name and click Enroll.

JSX Rules & Gotchas

COMMON MISTAKES · QUICK REFERENCE

// ============================================
// JSX RULES (CRITICAL FOR BEGINNERS)
// ============================================

// 1. RETURN A SINGLE PARENT ELEMENT
// ❌ WRONG: Returning two sibling elements
// return (
//   
Title
//   
Paragraph
// );

// ✅ CORRECT: Wrap in a fragment or div
// return (
//   <>
//     
Title
//     
Paragraph
//   
// );

// 2. USE className INSTEAD OF class
// ❌ 

// ✅ 


// 3. EMBED JAVASCRIPT IN CURLY BRACES
// ✅ 
Hello, {userName}!
// ✅ Submit

// 4. INLINE STYLES ARE OBJECTS WITH CAMELCASE
// ✅ style={{ backgroundColor: "blue", fontSize: "16px" }}

// 5. EVENT HANDLERS USE CAMELCASE
// ✅ onClick, onSubmit, onChange (not onclick, onsubmit)

// 6. SELF-CLOSING TAGS NEED FORWARD SLASH
// ✅   ✅   ✅ 

    

Understanding useState

THE HEART OF REACT COMPONENTS

🎯 useState Hook Explanation

What it does: useState lets functional components have local state. It returns an array with two items: the current state value, and a function to update it. When the update function is called, React re-renders the component with the new state.

Common mistake: Directly mutating state. Always use the setter function: setName("new name") not name = "new name". React relies on the setter to know when to re-render.

🤖 HOW AI ACCELERATES REACT LEARNING

Ask AI: "I'm getting a 'React Hook useState is called conditionally' error. What does this mean and how do I fix it?" Get immediate help with React's rules of hooks.

Ask: "Explain the difference between props and state in React with examples." Learn the core architectural pattern of React.

Ask: "Convert this jQuery code that manipulates the DOM to React using state and JSX." See how React replaces imperative DOM code with declarative components.