Learn the fundamental principles of React from the ground up. Create a React project, use common html tags, and create and compose your own React Components.

Sample data gist: https://gist.github.com/aidansunbury/...
Biome Setup: https://education.codifyberkeley.org/...
Completed Dice Roller: https://dice.education.codifyberkeley...

Timestamps:

Intro
0:00 Lecture Outline
0:47 Dice roller showcase
3:12 React Overview
4:52 Create a React App with Vite
6:19 node_modules and package.json
9:11 Structure of a React Project

HTML Crash Course
13:03 Text tags
15:04 Nesting HTML tags
16:24 Links
17:04 Images
18:54 Divs and semantic html
21:32 Buttons
22:12 Inputs and Labels

Basic React Component
24:52 Setup and Scaffolding
29:10 Rules of React Components
30:13 Exporting and Importing Components
33:05 Default versus Standard Exports
34:33 Dice Types and Sample Data
37:35 DieInput.tsx

Props and JSX
43:25 Props Intro
46:47 Typing Component Props
48:41 JSX syntax
49:37 Passing Props
52:21 Rendering lists with .map()

More Advanced Example
56:56 Component Design Considerations
1:01:30 Cleaning up the display
1:05:08 .reduce() function

Linting and Formatting with Biome
1:09:24 Linting and Formatting Background
1:11:23 Biome Setup and Configuration
1:14:06 Linting Error Example
1:16:32 VSCode Extension setup

Additional Resources and Reading
Semantic HTML: https://www.w3schools.com/html/html5_...
React Keys: https://react.dev/learn/rendering-lis...
Why Biome over ESLint and Prettier:    • I Ditched Prettier and ESLint (Here's...