61D Lecture 3: React Basics

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/970875b69bd043a8ad582d66d789edf2 Biome Setup: https://education.codifyberkeley.org/docs/bonus/extensions#biomecanicadelosejercicios Completed Dice Roller: https://dice.education.codifyberkeley.org/ Timestamps: Intro https://www.seevid.ir/fa/w/uGYfJfQg0sk Lecture Outline https://www.seevid.ir/fa/w/uGYfJfQg0sk Dice roller showcase https://www.seevid.ir/fa/w/uGYfJfQg0sk React Overview https://www.seevid.ir/fa/w/uGYfJfQg0sk Create a React App with Vite https://www.seevid.ir/fa/w/uGYfJfQg0sk node_modules and package.json https://www.seevid.ir/fa/w/uGYfJfQg0sk Structure of a React Project HTML Crash Course https://www.seevid.ir/fa/w/uGYfJfQg0sk Text tags https://www.seevid.ir/fa/w/uGYfJfQg0sk Nesting HTML tags https://www.seevid.ir/fa/w/uGYfJfQg0sk Links https://www.seevid.ir/fa/w/uGYfJfQg0sk Images https://www.seevid.ir/fa/w/uGYfJfQg0sk Divs and semantic html https://www.seevid.ir/fa/w/uGYfJfQg0sk Buttons https://www.seevid.ir/fa/w/uGYfJfQg0sk Inputs and Labels Basic React Component https://www.seevid.ir/fa/w/uGYfJfQg0sk Setup and Scaffolding https://www.seevid.ir/fa/w/uGYfJfQg0sk Rules of React Components https://www.seevid.ir/fa/w/uGYfJfQg0sk Exporting and Importing Components https://www.seevid.ir/fa/w/uGYfJfQg0sk Default versus Standard Exports https://www.seevid.ir/fa/w/uGYfJfQg0sk Dice Types and Sample Data https://www.seevid.ir/fa/w/uGYfJfQg0sk DieInput.tsx Props and JSX https://www.seevid.ir/fa/w/uGYfJfQg0sk Props Intro https://www.seevid.ir/fa/w/uGYfJfQg0sk Typing Component Props https://www.seevid.ir/fa/w/uGYfJfQg0sk JSX syntax https://www.seevid.ir/fa/w/uGYfJfQg0sk Passing Props https://www.seevid.ir/fa/w/uGYfJfQg0sk Rendering lists with .map() More Advanced Example https://www.seevid.ir/fa/w/uGYfJfQg0sk Component Design Considerations https://www.seevid.ir/fa/w/uGYfJfQg0sk Cleaning up the display https://www.seevid.ir/fa/w/uGYfJfQg0sk .reduce() function Linting and Formatting with Biome https://www.seevid.ir/fa/w/uGYfJfQg0sk Linting and Formatting Background https://www.seevid.ir/fa/w/uGYfJfQg0sk Biome Setup and Configuration https://www.seevid.ir/fa/w/uGYfJfQg0sk Linting Error Example https://www.seevid.ir/fa/w/uGYfJfQg0sk VSCode Extension setup Additional Resources and Reading Semantic HTML: https://www.w3schools.com/html/html5_semantic_elements.asp React Keys: https://react.dev/learn/rendering-lists#why-does-react-need-keys Why Biome over ESLint and Prettier: https://www.seevid.ir/fa/w/f_4k0XYvQjQ