React Foundations

In This Section, You Will Learn:

• • What React is and why companies use it
• • Setting up a React project
• • Components – building blocks of React
• • JSX – HTML in JavaScript
• • Props – passing data between components
• • State – managing dynamic data

What is React?

• React is a JavaScript library for building user interfaces, created by Meta (Facebook).
• Why React is Popular:
• • Used by: Facebook, Instagram, Netflix, Airbnb, Uber
• • Component-based (reusable pieces)
• • Virtual DOM (fast updates)
• • Huge ecosystem and community
• • Most job listings require React
• React vs Vanilla JS:
• • Vanilla JS: Manual DOM manipulation
• • React: Describe WHAT you want, React handles HOW
• The Big Idea:
• Build small, reusable components. Combine them to create complex UIs.
• Example: A social media app = Profile component + Post component + Comment component + Like button component…

Setting Up a React Project

• Use Vite (fastest way):
• “`
• npm create vite@latest my-app — –template react
• cd my-app
• npm install
• npm run dev
• “`
• Project Structure:
• “`
• my-app/
• ├── src/
• │ ├── App.jsx
• │ ├── main.jsx
• │ └── components/
• ├── public/
• ├── index.html
• └── package.json
• “`
• Key Files:
• • main.jsx: Entry point, renders App
• • App.jsx: Your main component
• • components/: Folder for reusable components

Components – The Building Blocks

• Everything in React is a Component.
• A component is a function that returns JSX (HTML-like code):
• “`
• function Welcome() {
• return (
• <div>
• <h1>Hello, World!</h1>
• </div>
• );
• }
• export default Welcome;
• “`
• Using Components:
• “`
• import Welcome from './components/Welcome';
• function App() {
• return (
• <div>
• <Welcome />
• <Welcome />
• </div>
• );
• }
• “`
• Rules:
• • Component names start with capital letter
• • Must return ONE parent element
• • Use fragments <> </> to avoid extra divs

Props – Passing Data to Components

• Props are how you pass data FROM parent TO child components.
• Passing Props:
• “`
• function App() {
• return <Welcome name='Ahmed' age={25} />;
• }
• “`
• Receiving Props:
• “`
• function Welcome(props) {
• return <h1>Hello, {props.name}!</h1>;
• }
• // Or with destructuring:
• function Welcome({ name, age }) {
• return <h1>Hello, {name}! Age: {age}</h1>;
• }
• “`
• Props are READ-ONLY. Never modify props inside a component.
• Use props for:
• • Text content
• • Numbers
• • Functions (callbacks)
• • Other components (children)

State – Managing Dynamic Data

• State is data that CHANGES over time within a component.
• The useState Hook:
• “`
• import { useState } from 'react';
• function Counter() {
• const [count, setCount] = useState(0);
• return (
• <div>
• <p>Count: {count}</p>
• <button onClick={() => setCount(count + 1)}>
• Increment
• </button>
• </div>
• );
• }
• “`
• Key Points:
• • useState(initialValue) returns [value, setter]
• • NEVER modify state directly (count++ is wrong)
• • Always use the setter function (setCount)
• • Component re-renders when state changes
• Common State Uses:
• • Form inputs
• • Toggle visibility (show/hide)
• • Lists of items
• • Loading states