🚀 Getting Started with React

1. Why React?

• Declarative and component-based—letting you build reusable UI pieces.

• Huge ecosystem and community support.

• Ideal for modern, dynamic web interfaces.

2. Your First React App

Use Create React App (CRA) to bootstrap your project:

npx create-react-app my-react-app

cd my-react-app
npm start

It sets up a dev server with live reloading at http://localhost:3000.

3. Core Concepts

a. Components

Fundamental building blocks. Example functional component:

function Greeting({ name }) {
  return Hello, {name}!;
}

b. JSX

Looks like HTML but with full JavaScript power (e.g., embedding variables, expressions).

c. State & Props

• Props: inputs from parent components.

• State: internal data managed via useState.

const [count, setCount] = useState(0);

d. Side Effects with useEffect

Run code after render—for data fetching or subscriptions.

🛠 Building a Simple To‑Do App

Step 1: Setup UI

• Input field + “Add” button.

• List of tasks with a “Done” checkbox.

Step 2: Manage State

const [tasks, setTasks] = useState([]);

const [newTask, setNewTask] = useState('');

Add, complete, or filter tasks easily using state.

Step 3: Render Task List

Map over tasks and generate 

Step 4: Add Features

• Remove tasks

• Edit tasks

• Persist tasks in localStorage