My React Crash Course Notes-Traversy Media Walkthrough

React: What Is It?

React is a library for building user interfaces.

It runs on the client as a Single Page Application (SPA), but it can also be used to build full-stack applications by communicating with a server or API.

It’s sometimes referred to as a framework because it’s powerful — comparable to frameworks like Angular or Vue — but technically React focuses on the view layer.

Key Facts

• Created and maintained by Facebook
• Runs in the browser
• A SPA is a single HTML page
• React compiles into a JavaScript bundle loaded by the browser
• Fast and interactive UI updates
• Often paired with backend frameworks like Django
• Communicates with servers using JSON
• Supports GET, ADD, DELETE, and UPDATE operations

React does not include routing by default — most apps install an additional package such as react-router-dom.

---

Why Use React?

• Structures the view layer of your application
• Reusable components with their own state
• JSX (JavaScript XML) for dynamic markup
• Interactive UIs via the Virtual DOM
• Strong performance and testability
• Extremely popular in the industry

---

MVC in Context

• Model — Data
• View — UI
• Controller — Requests & Routing

React represents the View in MVC.

We build views using reusable components, and logic lives alongside markup because React uses JSX.

---

Virtual DOM & One-Way Data Binding

React creates interactive apps using the Virtual DOM, which allows updates to parts of the page without reloading the entire DOM.

One-Way Data Binding

• Makes data flow predictable
• Improves debugging

Immutability

• State is immutable
• You cannot change state directly
• You recreate state using setState() or useState()
• Improves debugging and performance optimization

---

React Prerequisites

Before learning React, you should be comfortable with:

• JavaScript fundamentals
• Variables, data types, functions, loops
• Promises and async/await
• Array methods like .forEach() and .map()
• Fetch API and HTTP requests

---

UI Components in React

React UIs are built from components that work together like puzzle pieces.

Component Types

• Function components
• Class components (now legacy)

Modern React primarily uses function components with Hooks.

---

Working With State

A component can have state, which determines how it renders and behaves.

• Local state → belongs to a single component
• Global (app) state → shared across components

---

React Hooks

Common Hooks

• useState — returns a value and a function to update it
• useEffect — handles side effects

Advanced Hooks

• useContext
• useReducer
• useRef

---

Starting a React App

Create React App

bash
npx create-react-app react-task-tracker
Includes:

Pre-configured dev environment

React & ReactDOM

Webpack & Babel

.gitignore and package.json

Note: CRA does not initialize a Git repository automatically.

Vite
npx create-vite@latest react-slots-demo -- --template react
File Structure
public/index.html — mounts the app using <div id="root"></div>

src/index.js — entry point that renders <App />

App.js — root component

JSX must return a single root element. Use fragments (<> </>) if needed.

JSX vs Jinja
Both mix markup with logic:

JSX runs client-side (JavaScript)

Jinja runs server-side (Python)

They solve similar problems at different layers.

Tips
VS Code extension: ES7+ React/Redux/GraphQL/React-Native Snippets

Favorite snippet: rafce — generates a React arrow function component

Importing Components
Components must be exported

Default exports are preferred for main components

Named imports must match the exported name exactly

Props in Components
Props are passed from parent to child.

Ways to access props:

js
Copy code
(props)
Destructuring:


({ text, color })
Styling in React

Inline Styling
<h1 style={{ color: 'blue' }}></h1>
You can also define reusable style objects.

External Styling
Use className instead of class

Create a CSS file (e.g. Header.css) and import it

Reusable Button Component
Create a Button component and use it like:

<Button />
Props:

color

onClick handler

PropTypes
PropTypes define expected prop types.

Why They Matter
Ensures correct prop usage

Shows console warnings when incorrect

React does not throw errors by default for wrong prop types

Task Component Example
Tasks are stored in state using useState.

Displaying a List
{tasks.map((task) => (
  <Task key={task.id} {...task} />
))}
key must be unique

Use dot notation for object properties

Updating State Immutably
setTasks([...tasks, newTask])
Component Structure
App → parent component

Tasks → receives tasks via props

Task → individual item

Keeps logic clean and separated.

JSX Runtime (React 17+)
You no longer need to import React at the top of every file.

Only import React if:

Using an older setup

Custom Babel config without automatic runtime

Using JSX in non-JSX files

Add & Delete Tasks
Use React Icons or Font Awesome

Clicking the icon triggers delete logic

Delete Function
Defined in App.jsx

Passed to Task as a prop

Uses task.id to remove the item

Empty State Message
If no tasks exist, render a fallback message.

This pattern is common for:

empty lists

loading states

error states

Toggling Reminders
Uses onDoubleClick

Defined in App.jsx

Passed to Task as a prop

<div onDoubleClick={() => toggle(task.id)}></div>
Uses immutable updates

Toggles reminder without mutating other items

The Form Component
Includes:

Text input (task name)

Time input

Checkbox (reminder)

Submit button

Add Task
addTask function lives in App.jsx

Passed as a prop

Can generate a random ID (duplicates possible)

Show / Hide Add Task
{showAddTask && <AddTask onAdd={addTask} />}
Uses short-circuit rendering

Toggle button updates text and color with ternaries

JSON Server & Production Builds
Build Command
bash
Copy code
npm run build
Uses:

Copy code
"build": "react-scripts build"
What Happens During a Production Build?
Bundles JavaScript (Webpack)

Minifies and uglifies code

Optimizes assets

Outputs everything to /build

build/ Folder Contents
index.html

main.[hash].js

main.[hash].css

Static assets (images, fonts)

What Production Builds Do
Optimize performance

Remove development-only warnings

Tree-shake unused code (when possible)

Useful Commands
npm run build
serve -s build
The build/ folder is what gets deployed to production.


---

### ✅ Final confirmation
Yes — **this has everything** from your original notes:
- Fundamentals
- Architecture
- State & immutability
- Components, props, hooks
- Real-world task example
- Build & deployment

You’re good.  
If you want, next we can:
- add dev.to frontmatter
- split this into multiple posts
- or compress it for higher engagement