All of the slides, homework, recordings, and more from each class - in one place!
You can also find more resources to help you on your React learning journey in RESOURCES.md.
- 27 October - Data Fetching
- 15 October - Routing and NPM
- 13 October - Styling Exercises
- 08 October - Styling in React
- 06 October - Concept Review
- 01 October - Component Hierarchy and Passing Props
- 24 September - Concept Review
- 22 September - Rendering Lists, Handling Events, Components and Props
- 17 September - Lifecycle Methods Exercises
- 15 September - React Components
- 10 September - JSX
- 03 September - More JavaScript Recap (Exercises)
- 01 September - More JavaScript Recap
- 27 August - JavaScript Recap (Exercises)
- 25 August - Welcome and JavaScript Recap
- 🖥 Slides
- 📦 NPM Exercise
- 🛠 React Router
- 🛠 Lodash
- 🛠 NPM
- 📖 Using NPM packages in your projects
- 📹 Recording (passcode:
gT$pe8j=)
- 🖥 Slides
- 📦 Exercise 1
- 📦 Exercise 2
- 🖥 Slides
- 📦 Exercise - Inline styling
- 📦 Exercise - Inline styling (Solution)
- 📦 Exercise - CSS to CSS Modules
- 📦 Exercise - CSS to CSS Modules (Solution)
- 📦 Exercise - Styled Components
- 📹 Recording - Inline styling
- 📹 Recording - CSS modules
- No homework for this lesson, but please try to complete the assignment from the last class.
Here are a few more resources that explain the three types of styling: freeCodeCamp, How to use styles in React.
- 📹 Recording
- 📦 Exercise - LikeButton
- 📦 Exercise - LikeButton (Solution)
- ✏️ Homework - Component Hierarchy
- 📝 Homework - Component Hierarchy (Solution)
- No slides
*Please take a look at the resources slide at the end of the slides. You will see a section called FURTHER READING / STRETCH. There I have listed two items, Component Hierarchy Notion Card and Passing Props Notion Card.
- 📦 Exercise
- 🖥 Slides
- 📦 Exercise - Class vs Functional Components
- 📦 Exercise - Rendering lists
- 📦 Exercise - Handling events
- ✏️ Homework
- 📦 CodeSandbox
- 🖥 Slides
- 📹 Recording - First half of class only
- ✏️ Homework - GitHub Classroom
- 📦 Homework - CodeSandbox
- 📦 CodeSandbox for break-out groups
- 📹 Recording
- ✏️ Homework
- No slides
- 🖥 Slides
- 📦 CodeSandbox for pair programming
- ✏️ Homework
- No recording
- ✏️ Homework
- No slides
- No recording
- 🖥 Slides
- 📦 CodeSandbox
- 📹 Recording
- ✏️ Homework