Introduction to TanStack Query (React Query)

Introduction to TanStack Query (React Query) free download

React Query, TanStack Query, API, React

In this course, we are going to learn TanStack Query (React Query). React Query is a powerfull library to work with APIs which provides a lot of useful features like fetching, caching, synchronizing, and, etc.

TanStack (React) Query makes it a lot easier to work with APIs. You can simply fetch data from APIs and send post/patch requests with ReactQuery and make all of the components to be aware of the data changes. Using it will help us to create a fully responsive app that react to user changes and updates the data on the server in the background.

Using React Query will help to develop a lot faster features with less codes. Here are the topics that we will cover in this course:

Module 1: Introduction

1. Introduction to the course

2. Pre Requirements for this course

3. GitHub repositores

4. Instructions to learn about how to work with GitHub

Mobule 2: Bootstraping the ToDo App

1. Installing React with create-react-app Script

2. Create ToDo list page and create new todo form

3. Setting Up a Simple Server using NodeJS

4. Fetching Todos from API

5. Implementing API call to create Todo items

Module 3: Getting Started with TanStack Query (React Query)

1. State Management solutions and their approach

2. Cons of Using Redux as a State Management Library

3. Implementing the first Query in TanStack (React) Query

4. Implementing the first Mutation in TanStack (React) Query

5. Adding Progressbar - Implementing more Components to use TanStack Query

6. Refactoring & Cleaning up of the Project

7. Implementing counter to show important tasks with TanStack (React) Query

Module 4: Automated Testing

1. What is automated testing? Benefits of testing automation

2. Writing the first Unit Test

3. What is Code Coverage? Getting Code Coverage Report

4. Migrating the Project to Vite

5. Vitest Configuration | Running Tests with Vitest

6. Writing Tests for List Component

7. Adding Code Coverage Report with V8

8. Reaching to 100% Code Coverage Report for the List Component

Please join me in this journey :-)