React Full Course for free ⚛️

React overview (what React is + core concepts)

• React is described as a JavaScript library (not a framework) for building and arranging UI for web apps.
• UI is built from components: reusable, self-contained code blocks (compared to Lego pieces).
• React uses JSX (JavaScript XML) to write HTML-like syntax inside JS files.
• React uses a Virtual DOM:
  • Tracks changes in a lightweight “virtual” copy.
  • Applies only the required updates to the real DOM to avoid full page refreshes.
• It assumes you already know JavaScript fundamentals (arrays, classes, objects, ES6 features like arrow functions) and HTML/CSS.

Setup / installation + project bootstrap (Vite)

• Install Node.js (from nodejs.org), using the bundled npm.
• Use a code editor recommendation: VS Code.
• Create a React project using Vite:
  • Command shown: npm create vit@latest
  • Choose React framework
  • Select plain JavaScript (not TypeScript)

Suggested workflow:

1. npm install
2. npm run dev

• The browser shows the dev server with a sample app (including a counter).
• Quick restart tip: if the dev server closes, run npm run dev again inside the project directory.

React project structure (what the folders/files mean)

• node_modules/: external libraries/packages.
• public/: public assets served as URLs (example: a logo image removed and shown to disappear).
• src/: main development area (most work happens here):
  • assets/: images/videos bundled in output (example: images differ from public)
  • main.jsx: JS entry; mounts the app into an HTML element with id root
  • App.jsx / App component: root component used by main.jsx
  • Styles: app stylesheet and/or index.css
  • index.html: HTML entry point (script tag references main.jsx)
  • package.json: key/value metadata (project name, versions, Vite + React versions)

Building components (tutorial steps)

Header/Footer components

• Create new components as function-based .jsx files.
• Components must return one root element; if returning multiple, wrap with React Fragment (<>...</>).

Example components built:

• Header
  • Returns a header section with an h1
  • Includes a nav with ul and li items linking via <a href="#">...
  • Adds an <hr />
• Footer
  • Returns a footer with a copyright line
  • Uses embedded JS: new Date().getFullYear()

Reusing components + variables

• Created a Food component:
  • Uses JS variables/constants (e.g., const food1 = "Orange") to render list items
  • Demonstrates inserting JS into JSX using curly braces {...}
• Demonstrated rearranging components in the parent (App) and reusing multiple copies.

Card component tutorial + styling

• Builds a Card component with:
  • image, title (h2), description (p)
  • recommended alt text for accessibility
• Uses the assets folder approach:
  • import profilePic from "./assets/profile.jpeg";
  • <img src={profilePic} ... />
• Styling in index.css:
  • .card, .card-image, .card-title, .card-text
  • Includes border, border-radius, box-shadow, padding/margin, and sizing rules.

Styling React components: 3 CSS approaches

1. External global CSS (in index.css)

   • Easy for global styles and small apps.
   • Warns about naming conflicts in large apps.

2. CSS Modules

   • Example: button.module.css and import as styles
   • Uses className={styles.button}
   • Avoids naming collisions via hashed class names.
   • Downsides: extra setup, global styles not automatically shared.

3. Inline styles

   • Uses a JS object for style={{ ... }}
   • Pros: avoids conflicts and is isolated.
   • Cons: less maintainable/readable for complex/responsive styling.

Props (sharing data between components)

• Props are read-only properties passed from a parent to a child.
• Example: a Student component receives:
  • name, age (string/number), isStudent (boolean)
• Demonstrates:
  • inserting prop values in JSX: {props.name}
  • boolean display issue: recommends ternary operator for booleans (“yes/no” style output)
• Mentions className vs class in JSX.

PropTypes validation

• Adds prop-types to warn if incorrect data types are passed:
  • name: PropTypes.string
  • age: PropTypes.number
  • isStudent: PropTypes.bool
• Shows console warnings occur but doesn’t stop rendering.

Default props

• If parent doesn’t pass values:
  • defaultProps provides fallback values (e.g., name="guest", age=0, isStudent=false).

Conditional rendering

• Example UserGreeting component:
  • Props: isLoggedIn (boolean), username (string)
  • Uses if/else or ternary operator to show:
    • “Welcome {username}” when logged in
    • “Please log in to continue” otherwise
• Adds CSS classes for each case.
• Also sets defaultProps for username and logged-in state.

Rendering lists (arrays → JSX)

Rendering strings

• Defines a fruits array and maps it into <li> elements.
• React warning note: each list item needs a unique key.

Rendering objects + key requirement

• Converts an array of fruit objects:
  • { name, calories }
• React warning: “each child in a list should have a unique key prop”
• Initially uses name as key (works if unique), then improves to use id:
  • key={id}

Sorting/filtering examples:

• Sort by name using localeCompare
• Sort by calories numerically
• Filter low-calorie and high-calorie sets with .filter(...)

Making the list reusable (props + robustness)

• Refactors to a reusable List component:
  • Props: items (array), category (string)
  • Renders category header + <ol>/list
• Uses conditional rendering:
  • Short-circuiting: items.length > 0 && <List ... />
  • Returns null when items missing/empty
• Adds safeguards:
  • defaultProps sets items=[] and placeholder category so it won’t crash when props are missing
• Adds complex prop-types validation:
  • items: PropTypes.arrayOf(PropTypes.shape({ id, name, calories }))

Handling click events

• Creates a Button component:
  • Uses onClick callback to run logic (e.g., console.log("ouch"))
• Demonstrates passing arguments safely:
  • Avoid invoking handler immediately (onClick={handle(x)} would call early)
  • Use wrapper arrow function: onClick={() => handleClick(name)}
• Event object usage:
  • React supplies a synthetic event object (e.g., e.target.textContent updates button text)
• Demonstrates onDoubleClick.
• Handles click on an image:
  • Creates ProfilePicture component that hides itself by setting e.target.style.display = "none".

React hooks: core patterns taught

useState + interactive updates

• Hooks are special functions (since React 16.8) enabling function components to use state/effects without classes.
• Demonstrates:
  • useState returns [value, setValue]
  • Updating state triggers re-render; plain variables don’t.
• Builds examples:
  • A stateful name editor
  • Age incrementer
  • Boolean toggle (“yes/no” via ternary)
  • Counter component (increment/decrement/reset) styled with CSS.

onChange with forms

• Teaches onChange with:
  • text input, number input, textarea, select dropdown, radio buttons
• Uses useState to reflect input values live:
  • event.target.value updates state
• Radio buttons use checked={shipping === "delivery"} style logic.

Color Picker mini project

• Uses useState to track a hex color.
• onChange of <input type="color"> sets the color state.
• Inline style={{ backgroundColor: color }} drives live UI updates.
• Includes CSS for layout and smooth transitions.

Updater functions (functional setState)

• Explains that calling setState multiple times with the current value can be batched, causing stale updates.
• Solution: pass an updater function:
  • setCount(prev => prev + 1)
• Demonstrates why multiple increments only “count” once without functional updates and how functional updates fix it.

Updating state with objects

• Highlights object state update pitfalls:
  • Setting only { year: newYear } can lose make/model.
• Correct approach uses spreading:
  • setCar(prev => ({ ...prev, year: newYear }))

Updating state with arrays

• Adds/removes items:
  • Add: setFoods(prev => [...prev, newItem])
  • Remove: setFoods(prev => prev.filter((_, i) => i !== indexToRemove))
• Emphasizes keys for list items while mapping (key={index} in the example).

Updating state with arrays of objects

• Maintains form state for {year, make, model}.
• Adds new car objects:
  • setCars(prev => [...prev, newCar])
• Removes cars by index using filter.
• Renders list with cars.map(...) and uses key={index}.

To-do list app (project)

• Builds a ToDoList component with:
  • State: tasks: string[], newTask: string
  • Add task, delete task, move task up/down
• Implements:
  • Controlled input: value={newTask} with onChange
  • Add uses trim check to prevent empty tasks
  • Delete uses filter
  • Move up/down swaps array positions
• Styling includes flex layouts and hover transitions.

useEffect (side effects) + digital clock project

• Explains useEffect usage patterns:
  • Run after every render (no dependency array)
  • Run once on mount (empty dependency array [])
  • Run on mount + when specific dependencies change
• Benefits:
  • Organizes side-effect logic
  • Allows cleanup via return function (e.g., remove event listeners, clear intervals)
• Demonstrates:
  • Document title updating with a counter
  • Window resize listener with proper useEffect setup to avoid thousands of listeners
• Digital clock project:
  • useState stores current time (new Date())
  • useEffect starts setInterval every 1s
  • Cleanup clears interval on unmount
  • Formats time (hours/minutes/seconds, AM/PM conversion) with a padZero helper

useContext

• Explains prop drilling and how useContext avoids it.
• Creates a context provider (holding user state).
• Consumers use useContext(UserContext) to access user directly.
• Demonstrates nested components A → B → C → D receiving data without passing props through each level.

useRef

• Compares with useState:
  • useState triggers re-renders on changes
  • useRef stores mutable values without re-rendering
• Examples:
  • Counter using ref increment: component doesn’t re-render
  • DOM ref use: focusing an input and changing style without re-render
• Builds toward stopwatch usage where refs help track interval IDs/timestamps without causing re-renders.

Stopwatch project

• Uses:
  • useState for isRunning and elapsedTime
  • useRef for interval id and start time references
  • useEffect to start an interval when running and clean it up
• Converts elapsed milliseconds into formatted display (HH:MM:SS:ms) with padding (padStart).

Main speakers / sources

• Speaker/source: “your bro / Future bro” (host), delivering the tutorial across multiple sections.
• Video title indicates: “React Full Course for free ⚛️” (course-style tutorial).