📖 Notes LESSON 20 OF 32

Components, JSX & Props

⏱️ 32 min

⚛️ React

Welcome to React

React apps are built from components — reusable, self-contained pieces of UI written in JSX, a syntax that mixes HTML-like markup with JavaScript.

React Fundamentals

Components, JSX, Props

🧩

Component

A JavaScript function that returns JSX — the building block of every React UI.

📄

JSX

HTML-like syntax inside JS; compiled to React.createElement() calls under the hood.

📦

Props

Read-only data passed from a parent component into a child, like function arguments.

🔒

One-Way Data Flow

Data flows down from parent to child via props — children never mutate their parent's data directly.

Your First Functional Component

JSX

function UserCard({ name, role }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>{role}</p>
    </div>
  );
}

// Usage — passing props
<UserCard name="Aisha" role="Frontend Developer" />

💡

Why JSX instead of manual DOM code

Compare this to Lesson 17's querySelector/classList code — JSX describes what the UI should look like for a given set of props, and React handles updating the actual DOM when those props change.

← Lesson 19: Project 3: Quiz App Lesson 21: useState & useEffect →