<30-day-React /> course

Components and Styling (CSS-in-JS)

We will go through main building blocks of React App: Components. Also we will setup our CSS in JS and try `styled-components`

Using hooks and creating your own

We will explore basic hooks with the simplest implementation, then implement data fetching hook step-by-step(doing naive implementation then refactoring, showing along the way how to use useEffect/useState/useReducer)

Weather App

I find this project suitable to practice using hooks and styling. We will build something similar to weather widget in Google search.

Keyboard App

Even if this lesson is not really "real-world" project, it has many interactions, so we have more opportunities to practice hooks.

Playing with Audio. Taking notes from speech

Here we will explore how to interact with interesting asynchronous API of browser - SpeechRecognition. We will dive into usage of 'useEffect' hook.

Debounce hook

We will implement Debounce hook - 'useDebounce'. Using debounce hook we will try to reduce number of re-renders, and I will show how to profile components in ReactDevTools.

Simple animation with `useSpring`

I will show how powerful is 'react-spring' library. With the release of Hooks it became even easier to create different animation with 'useSpring' hooks.

CaTinder

Tinder App for cats :). We will be implementing complex animation with 'react-spring', 'react-use-gesture'. Everything is hooks.