React Todo List using useReducer and useState Hooks

Table of Contents

1. Overview
2. Features
3. Teachnologies Used
4. Getting Started
5. The Yarn PnP Feature
6. Common Errors encountered using Yarn Pnp

Overview

A React Todo List application where users can create a list of tasks to execute.

Features

• Add Todo: Enter a task to be done.
• Edit Todo: Update a current or previous task.
• Complete Todo: Mark a task completed.
• Undo Todo: Updated a completed task as uncompleted.
• Delete Todo: Delete a completed task.

Technologies Used

• React
• Vite
• Chakra UI
• Yarn Berry (PnP and Zero-Install)

Getting Started

Prerequisites

• Node.js and yarn are installed

Installation

1. Clone the repository:

   git clone https://github.com/Michle99/R_ALAB_320H_91_Todo_List.git

2. Navigate to the project folder:

  cd R_ALAB_320H_91_Todo_List

3. When the project is cloned, the error below is encountered:

- ERROR:
- Cannot find module '@chakra-ui/icons' or its corresponding type declarations.ts(2307)

4. Run the following commands to resolve the errors:

yarn install

Then,

yarn dlx @yarnpkg/sdks vscode

The below pane will appear, click Allow. The errors should be resolved:

5. Start the development server:

  yarn run dev

6. To use node-modules instead, go to the .yarnrc.yml and uncommnet this:

nodeLinker: node-modules

and comment this:

nodeLinker: pnp

Then run the following command:

yarn install

The Yarn PnP Feature

The dependencies are already installed and are present in the repository folder. No need for node_modules in the project folder because of the Yarn PnP feature. To learn more about Yarn PnP, visit here. To initiate Yarn PnP, migration to Yarn PnP.

Usage

1. Create a vite project with yarn:

  yarn create vite my-project-name --template react

2. Install dependences:

  yarn install

3. Add additional dependencies/devDependencies:

  yarn add <dependencies-name>

4. To use Yarn PnP, use the following commands:

• Start yarn version to berry:

   yarn set version berry

This will create a .yarn & .yarnrc.yml folder and files respectively.

• Set the .yarnrc.yml to pnp, in ordet to use Yarn PnP feature:

  yarn config set nodeLinker "pnp"

This will ensure any additional dependencies you download is taken care of by Yarn PnP and installed in the .yarn folder.

• Run the below command to remove the node_modules folder and use Yarn Pnp instead:

  yarn install

• Start the development server:

  yarn run dev

Common Errors encountered using Yarn Pnp:

• Modules resolution for VSCode: Run the following command, this will create a .vscode folder and install sdks folder in the .yarn folder.

   yarn dlx @yarnpkg/sdks vscode

• Common Errors encountered using Yarn Pnp:

  • How to configure VSCode to run Yarn 2 (with PnP) powered TypeScript

  • yarn: cannot find module

  • Using Vitest with Yarn v4.0.2 with PnP, Vite 5.0.0, Vitest 1.0.4, and jsdom 23.0.1 or @testing-library/jest-dom": "^6.1.5" results in the following errors:

  Errors encoutered using Vitest and Yarn v4.0.2

  • The Fix for the Vitest/jsdom error testing error I encountered was to use happy-dom in place of jest-dom:

    • Install happy-dom:

    yarn add -D happy-dom
    

    • Uninstall any and all jest-dom packages.
    • For how to do testing with vitest and happy-dom: How to Unit Test your React TypeScript App With Vitest and React Testing Library.

5. Open your browser and visit http://localhost:5173/.