Forem: add_early

My React Crash Course Notes-Traversy Media Walkthrough

add_early — Mon, 29 Dec 2025 06:45:52 +0000

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

React Explained Through a Tic-Tac-Toe Build

add_early — Mon, 29 Dec 2025 06:41:36 +0000

What Is React?

React is a library for building user interfaces.

It runs in the browser as a Single Page Application (SPA), but it’s often used as part of a full-stack setup where it communicates with a server or API.

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

Key facts:

Created and maintained by Facebook
Runs in the browser
Compiles into a JavaScript bundle loaded once
Handles routing and updates client-side
Commonly paired with backend frameworks like Django

How React Works

A React app is typically a single HTML page.

React:

mounts into a root <div>
manages routing internally
updates only the parts of the UI that change
communicates with the server using JSON

From React, you can:

GET data
ADD data
UPDATE data
DELETE data

React doesn’t include routing out of the box—most projects use react-router-dom.

React in the MVC Model

In an MVC architecture:

Model → data
View → UI
Controller → routing & requests

React acts as the View.

Instead of separating logic and markup, React uses JSX, which allows JavaScript and markup to live together in a readable way.

Virtual DOM & One-Way Data Flow

React uses a Virtual DOM, allowing it to:

update parts of the page without full reloads
remain fast and responsive

Data flows one way:

state → UI
UI events → state updates

State is immutable—you don’t change it directly.

You replace it using functions like setState() or useState().

This makes:

debugging easier
performance more predictable

Prerequisites Before Learning React

You should be comfortable with:

JavaScript fundamentals
variables, functions, arrays, objects
async/await & Promises
array methods like .map() and .forEach()
Fetch API & HTTP concepts

React isn’t hard—but it assumes JavaScript fluency.

Components in React

React UIs are built from components.

Modern React primarily uses function components with Hooks.

Class components still exist, but they’re now considered legacy.

Components:

are reusable
manage their own state
compose together like puzzle pieces

Working With State

State controls how components behave and render.

Common types:

Local state → belongs to one component
Global state → shared across components

State is always updated immutably.

React Hooks (Overview)

Common hooks:

useState → manage state
useEffect → handle side effects

Advanced hooks:

useContext
useReducer
useRef

Creating a React App

Two common approaches:


bash
npx create-react-app my-app

or with Vite:

npx create-vite@latest my-app -- --template react


Both provide:

a preconfigured dev environment

React + tooling

a structured project layout

Basic File Structure

public/index.html → mounts the app via <div id="root"></div>

src/index.js → entry point

App.js → root component

JSX must return a single root element (or use fragments <> </>).

JSX vs Jinja

Both mix logic with markup:

JSX runs client-side

Jinja runs server-side

They solve similar problems at different layers.

Props & Component Communication

Props are passed from parent to child.

You can:

pass individual values

destructure props

pass functions for event handling

Props make components reusable and predictable.

Styling in React

Common options:

inline styles

external CSS files

reusable styled components

Remember:

use className, not class

Lists, Keys, and Immutability

When rendering lists:

each item needs a unique key

state updates must be immutable

Instead of mutating arrays:

setItems([...items, newItem])

Global State Options

For shared state:

Context API

Redux

other state managers

Choose based on complexity—not hype.

Production Builds

To build for production:

npm run build


This:

bundles JavaScript

minifies assets

removes development-only code

outputs optimized files into /build

That folder is what gets deployed.

Applying These Concepts: Building Tic-Tac-Toe
Multidimensional Arrays in JavaScript

A Tic-Tac-Toe board is a 3×3 grid, represented as an array of arrays.

This structure works well for:

Tic-Tac-Toe boards

Chess boards

Seating charts

Tables of data

Maps

Each sub-array is a row. Each item is a cell.

Managing Game State with Immutability

Objects and arrays are reference values in JavaScript.

You should never mutate them directly.

Instead:

create a copy

update the copy

replace the state

React only re-renders when it sees a new reference.

Lifting State Up

Lifting state up means moving shared state to the closest common parent.

You do this when:

multiple components need the same data

one updates the state and another reads it

This keeps everything in sync.

Lifting State in Tic-Tac-Toe

In this project:

<GameBoard /> renders the grid

<Player /> shows whose turn it is

Both need to know the active player.

Solution

Keep activePlayer in <App /> and pass it down as props.

Key ideas:

state lives in the parent

children receive it via props

children request updates via callbacks

Avoiding Intersecting State

Intersecting state happens when the same data exists in multiple places.

This causes:

unpredictable behavior

debugging headaches

Best practice:

keep a single source of truth

derive state when possible

Deriving State Instead of Storing It

The game board itself does not use useState.

Instead:

it receives turns as props

it replays those turns to reconstruct the board

This makes the board:

stateless

predictable

easier to reason about

Determining the Winner

Each cell is accessed using:

board[row][col]


There are 8 winning combinations:

3 rows

3 columns

2 diagonals

Loop through each and check if all three cells match.

JSX Fragment Gotcha

This causes an error:

{winner && <GameOver /><p>Winner: {winner}</p>}


JSX expressions must return one parent element.

Wrap them in a fragment or container to fix it.

Two Ways to Create the Board

Dynamic:

Array(3).fill(null).map(() => Array(3).fill(null))


Static:

[
  [null, null, null],
  [null, null, null],
  [null, null, null]
]


Both work—just understand reference behavior.

Why Immutability Matters

Mutation:

arr.push(4)


❌ Same reference → React may not re-render

Immutable update:

const newArr = [...arr, 4]


✅ New reference → React updates correctly

A Personal Reflection

I compared myself to someone finishing a FastAPI course in under a day while I struggled through React.

That comparison hurt.

But React demands a new way of thinking:

JavaScript is weirder than Python

frontend is messier

state management changes how you reason

And Tic-Tac-Toe?
It’s deceptively complex.

Finishing the Game

I finished it.

And more importantly:

I understand React better

I understand my limits better

I understand my growth better

A simple 3×3 grid taught me a lot.

Final Thoughts

React doesn’t carry you—you carry it.

And that’s what makes learning it valuable.

On to the next.