Resources for the ReDI Spring 2021 React Class

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.

Table of Contents

• 13 April - Retro and Styling Exercises
• 10 April - React Workshop
• 08 April - Children and Styling
• 06 April - styled-components and exercises
• 01 April - Component Hierarchy and Passing Props
• 30 March - Event Handling
• 27 March - Career Workshop
• 23 March - Conditional Rendering, Rendering Lists and Handling Events
• 18 March - React Components Exercises
• 16 March - React Components
• 11 March - React Exercises
• 09 March - Introduction to JSX
• 06 March - JavaScript Recap
• 04 March - JavaScript Recap
• 02 March - Welcome and JavaScript Recap

VS Code and CRA

• 🖥 Slides

Git and GitHub

• 🖥 Slides

Context and Forms

• 🖥 Slides
• 📦 Exercise
• ✏️ Example: Ausländerbehörde registration form
• ✏️ Example: Named inputs
• ✏️ Example: Theme switching
• ✏️ Example: Shopping cart

useEffect extras and Forms

• 🖥 Slides
• 📦 Exercise
• ✏️ Exercise, but async

Retro and Styling Exercises

• 🪧 Retro board
• 📦 Exercise starter code
• ✏️ Potential solutions

React Workshop

• 📦 Live-coding solution
• ✏️ Tiago's Director's Cut version of the Clicking Game

Children and Styling

• 🖥 Slides

Styled-components and exercises

• 🖥 Slides
• 📦 Starter code
• ✏️ Potential solution
• 📦 Exercise
• ✏️ Potential Solution

Component Hierarchy and Passing Props

• 🖥 Slides
• 📦 More ToDo app exercises

Event Handling

• 🏁 Review quiz
• 📦 ToDo app exercise

Conditional Rendering, Rendering Lists and Handling Events

• 🖥 Slides
• 🖥 Slides
• 📦 Homework
• ✏️ Anil's solution for the event handling exercise

React Components (Exercises)

• 📦 Components and props exercise
• 📦 Cool Clicking Game Exercise
• 📝 React's useState Docs
• 📝 React's Component Docs

More fun games from James

• 📎 Universal Paperclips
• 🍪 Cookie Clicker
• 🍦 James's awesome vanilla JS career Changer Game

React Components

• 🖥 Slides

React Exercises

• 🖥 Slides

Introduction to JSX

• 🖥 Slides
• Exercise
• 📦 Homework
• 🌐 Reference site for homework
• ✏️ One potential solution for the homework
• Exercise: Conditionals

Workshop: JS to know for React

• 🖥 Slides
• 📦 Destructuring and spread exercises
• 📦 forEach, map, reduce, filter exercises
• ✏️ Fun with Arrays (with answers)

JavaScript Recap

• 🖥 Slides
• 📦 Object destructuring exercise
• 📦 Array destructuring exercise

Welcome and JavaScript Recap

• 🖥 Slides
• 🖥 Slides
• 📝 Very detailed yet simple explanation of imports and exports in JS