yogeshtakeo commented 11 months ago

Full Stack Development Bootcamp - RTK Query Task with Vite + React

Task Description

In this task, you will learn how to use Redux Toolkit Query (RTK Query) to fetch data from an HTTP API and display it in a Vite + React application. You have the creative freedom to choose any styling library you prefer to style your components. You will use the provided HTTP link to fetch TODO items from https://jsonplaceholder.typicode.com/todos/ and implement a "View Todos" feature in your application.

Prerequisites

Before you begin, make sure you have the following installed on your system:

Node.js (at least version 14.0.0)
npm (Node Package Manager)

Task Steps

Step 1: Set Up a Vite + React Project

Open your terminal and navigate to the directory where you want to create your project.
Run the following command to create a new Vite + React project using create-vite@latest:
```
npx create-vite@latest rtk-query-todos --template react
```
Navigate into your project directory:
```
cd rtk-query-todos
```

Step 2: Install and Configure RTK Query

Install Redux Toolkit and RTK Query as dependencies:
```
npm install @reduxjs/toolkit react-redux
```
Set up your Redux store and configure RTK Query according to the official documentation.

Step 3: Fetch Data using RTK Query

Open the file where you will define your RTK Query API service. Create a new API endpoint to fetch TODO items from https://jsonplaceholder.typicode.com/todos/ using RTK Query.

Step 4: Create a Component to Display Todos

Create a React component named TodoList in a suitable directory (e.g., src/components).
Use the useQuery hook from RTK Query to fetch and display the list of TODO items in the TodoList component.
You are allowed to use any styling library for properly styling the TodoItem for the application.

Step 5: Integrate the Component into App

Open the src/App.tsx file and import the TodoList component.
Use the TodoList component within your App component to display the fetched TODO items.

Task Completion

Congratulations! You've successfully completed the RTK Query task using Vite + React. You've learned how to use RTK Query to fetch data from an HTTP API, display it in your app, and have the flexibility to style your components using the styling library of your choice.

Submission:

The submission of the task should be done in the issue table. Paste the submission screenshot on this tasks issue table. Also give your repository.

Name: Github URL :

## Further Learning To further enhance your skills with RTK Query, explore more advanced features such as caching, mutations, and pagination. Refer to the [official documentation](https://redux-toolkit.js.org/rtk-query/overview) for comprehensive guidance. ## Conclusion Great job on completing this RTK Query task with Vite + React! You've gained hands-on experience with using RTK Query to efficiently manage data fetching in a modern development environment, along with the freedom to choose your preferred styling library. Keep exploring and building with Redux Toolkit and RTK Query!