React Introduction

Components, JSX, props, state with useState, event handling, and rendering lists.

Overview

This lesson covers everything you need to know about React Introduction with practical examples and real-world patterns.

Key Concepts

• JSX — Syntax extension that looks like HTML but compiles to JavaScript
• Components — Reusable pieces of UI that return JSX
• Props — Data passed from parent to child components
• State — Internal data managed by a component via useState

Code Examples

function Greeting({ name }) {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Practice

Try building a simple counter app and a greeting component that accepts a name prop.