React Tracked: Creating Web Apps with Global State

Course Overview

React Tracked is a small library for global state with React Hooks and React Context. It allows you to develop a small web app with global state without a bigger library like Redux. In this course, you will create a to-do app. But before diving into creating an application, you’ll fir... See More

How You'll Learn

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Course Contents

Hide All

Hide All Lessons

1. Creating a Counter App only with React Context

Creating a Counter App with useState

Creating a Counter App with useReducer

2. Introducing React Tracked to the Counter App

Understanding Render Optimization

Modifying the Counter App with React Tracked

3. Developing ToDo App with React Tracked and useReducer

Initial State and Reducer

TodoList Component

TodoItem Component

NewTodo Component

App Component and File Structure

Demo

4. Developing ToDo App with React Tracked, useState and Immer

Simple Store with useState

useTodoList Hook

useAddTodo Hook

useDeleteTodo Hook

useToggleTodo Hook

useQuery Hook

TodoList Component

TodoItem Component

NewTodo Component

App Component and File Structure

Demo

5. Going Further

Async Functions

Redux Ecosystem

Simpler Alternative

Wrap-up