React in 40 minutes
summary
Forty minutes of live coding shows React’s core: JSX transpiles (via babel/tsc to react.createElement), a virtual DOM with reconciliation, and practical patterns—components (capitalized), fragments, key prop for stable list identity (demonstrated by a shuffled ticker that otherwise recomputes random prices), state via useState, event handlers, fetch-based data loading (demoed with a joke API), localStorage/sessionStorage, and tooling: create-react-app, React DevTools, Jest + React Testing Library. All demos run and illustrate real-world tradeoffs and gotchas.
AI-written summary · about
chapters (20)
- 0:00Start
- 4:43CLASSES
- 5:38ARROW FUNCTIONS
- 5:54OBJECT DECOMPOSITION
- 6:46ARRAY DECOMPOSITION
- 7:36OBJECT SHORTHAND NOTATION
- 8:15STRING INTERPOLATION
- 11:41ATTRIBUTES Elements can have attributes, but they can have different names than HTML attributes
- 13:24SINGLE ROOT NODE
- 15:04COMPONENTS Function that takes props think arguments and returns a React element
- 17:03EXPRESSIONS IN JSX
- 18:16OR USE YOUR PROPS / ARGUMENTS!
- 20:09CONTROL STATEMENTS INSIDE JSX (2)
- 26:221. ELEMENTS OF DIFFERENT TYPE
- 27:502. THE KEY PROP
- 31:39LOCAL STATE INSIDE A COMPONENT
- 32:45CLICK CALLBACKS
- 33:50CHANGE CALLBACKS
- 35:282. A COMPONENT TO SHOW THE FETCHED DATA
- 37:33INSPECTING COMPONENT TREE
