🎯 Journey to Big Tech #52: build React

How React works ⚛️

🔄 1. React handle diffing calculation in the browser idle time
🌲 2. Convert every virtual DOM into a Fiber
🏰 3. After render, React commits to the real DOM

simple react:
github.com/MechaChen/re...

#Frontend #React #100DayOfCode

🎯 Journey to Big Tech #50: build Progress Bars IV

Learned
· Control every bar's progress using array type state
· Filter to get current unfilled progress bars
· Incrementally updating unfilled bars under concurrency limit count

#Frontend #React #100DayOfCode

🎯 Journey to Big Tech #49: build Image Carousel III

Learned
· Only require 2 images (cur, next) for smooth transition
· Transition is cur go left, next start at right, then go left
· Make DOM show first, transition happen at next frame to get smooth animation

#Frontend #React #100DayOfCode

🎯 Journey to Big Tech #48: build Image Carousel II

Learned
· translateX with -(curIndex * 100%) to shift to next image

#Frontend #React #100DayOfCode

🎯 Journey to Big Tech #44: build FlightBooker

Learned
· Date input only accept string value
· Date.now() return timestamp in millseconds
· How to write formateDate with Date object

#Frontend #React #100DayOfCode

🎯 Journey to Big Tech #43: build Modal IV

A11y learned
· Trap focus inside modal
 ↳ Shift+Tab on first → ❌default() + focus last
 ↳ Tab on last → ❌default() + focus first
· Restore focus on close (Escape / button)
 ↳ Save activeElement to ref → focus ref on unmount

#React #Frontend #100DayOfCode

🎯 Journey to Big Tech #42: build Modal III

A11y learned
· Close modal on 'Escape' key via useOnKeyDown hook
· Detect if clicking outside by .contains(clicked element)
· Fixed open(button)/close conflict by registering outside click on mousedown

#React #Frontend #100DayOfCode

🎯 Journey to Big Tech #40: build ProgressBar III

Learned
· How to limit the concurrency? - by adding MAX_UNFILLED_COUNT

> index > filledBarCount + MAX_UNFILLED_COUNT

(e.g. 5th bar can tolerate only 3 filled, remaining 2 unfilled, and start transitioning)

#Frontend #React #100DayOfCode

🎯 Journey to Big Tech #39: build ProgressBar II

Learned
· How to wait for previous bars to finish? - when currentIndex === filledCount, it means bars 0~currentIndex-1 are filled — now can fill the current one.

#Frontend #React #100DayOfCode

🎯 Journey to Big Tech #38: build Nested Checkboxes

Learned
· Checkbox has `indeterminate` state
· Nested checkboxes state should be lift up to top
· Use layered indices to locate target checkbox
· Parent state depends on 1st layer children’s state

#Frontend #React #100DayOfCode

🎯 Journey to Big Tech #37: build Accordion II, III

Follow WAI-ARIA best practices:
· Arrow keys navigate headers
· `aria-expanded = true` when open
· Header links panel id via `aria-controls`
· Panel links header id via `aria-labelledby`

#Frontend #React #100DayOfCode