<30-day-React />

<30-day-React /> course

Up your game on React by taking this course and creating 30 real-world projects in 30 days

Table of Contents

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`

building blocks

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)

building blocks
hooks

Weather App

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

project

Keyboard App

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

project
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.

project
hooks

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.

project
custom hook

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.

project
animations

CaTinder

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

project
animations
More coming soon...
Coded in Berlin for Everyone
© 2019