Configs

codesandbox: npm install --legacy-peer-deps
npm install --legacy-peer-deps : to install the exact version of dependencies mentioned in the package.json folder

Setting up Vite :

npm create vite@latest / npm create vite@4 (used in Jonas's course)
- after that in project's directory do npm install to get the node_modules folder and install the dependencies.

Setting up ESLint

We have to set up ESLint each time we create a Vite App. (This wasn't the case in `create-react-app)

npm install eslint vite-plugin-eslint eslint-config-react-app --save-dev
# --save-dev to save them as dev dependencies

After this create a a new file .eslintrc.json and modify the vite.config.js file to import and use the eslint plugin that we had just installed.

React Router Dom

npm install react-router-dom@6 #for this project we will be using router v6

NPMs

1. JSON Server

Used to fetch data from a fake API.

npm install json-server

Pasted image 20240608232429.png

This command is required to start the fake API Server.

Info

If the JSON file is inside of a folder then it's path can be specified like this : "server": "json-server --watch data/questions.json --port 8000"

Artificial Delay : We can also add artificial delay like this :

"server": "json-server --watch data/cities.json --port 8000 --delay 500"

Here, delay will be of 500ms.

Delay has been removed in the latest version of JSON Server. To use Delay, use an older version :

npm i json-server@0.17.3

2. Faker / Faker.js

Generate massive amounts of fake (but realistic) data for testing and development.
https://www.npmjs.com/package/@faker-js/faker

For usage see Project : 12-Atomic Blog

3. Leaflet : Map Library

React components for Leaflet maps
Get Started

npm i react-leaflet leaflet

here leaflet is the base library, react-leaflet is built on top of it

See Project 11-worldwise for implementation details