Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/micheld-dev/kasa

Développez une application Web avec React et React Router - Formation OpenClassrooms projet 11
https://github.com/micheld-dev/kasa

code-splitting compound-components context-api deferred-rendering react-router-loading react-router-v6 reactjs18 scss suspense typescript

Last synced: about 5 hours ago
JSON representation

Développez une application Web avec React et React Router - Formation OpenClassrooms projet 11

Host: GitHub
URL: https://github.com/micheld-dev/kasa
Owner: MichelD-dev
Created: 2022-11-03T21:07:10.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2022-11-24T10:21:44.000Z (almost 2 years ago)
Last Synced: 2024-04-09T22:24:33.792Z (7 months ago)
Topics: code-splitting, compound-components, context-api, deferred-rendering, react-router-loading, react-router-v6, reactjs18, scss, suspense, typescript
Language: TypeScript
Homepage: https://kasa-lodgings.netlify.app/
Size: 858 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Kasa

#### Location d’appartements entre particuliers en France.

#### Formation OpenClassrooms - Développeur d'applications JavaScript React
#### Projet 11
****
Ce projet, visible sur la branche [Optimized](https://github.com/MichelD-dev/Kasa/tree/Optimized), a d'abord été créé en tirant parti des dernières nouveautés apparues avec React Router v6.4:
- *Loader* incorporé aux routes
- *ErrorElement* pour les pages d'erreur
- *Defer* pour retourner une promesse depuis le *loader*
- Les composants *Await* permettant de résoudre cette promesse avant d'en envoyer le resultat à un composant via un *render prop*
- *useAsyncValue* retourne également la valeur issue de la promesse venant du *loader* et permet de l'utiliser dans le composant enfant d'un *Await*
- *Suspense*, fourni par React 18, permet d'utiliser les fonctions précédentes

Il utilise également certains patterns comme les *composants composés* pour les accordéons, associés à un *Contexte*, et **fait** usage du code-splitting via *React.Lazy* et *Webpack Prefetch*.

Vous trouverez sur la branche par défaut [main](https://github.com/MichelD-dev/Kasa) une version de base n'utilisant pas ou peu ces optimisations, à part les *composants composés* et le *Contexte*.

(back to top)

## Prerequisites

In order to make the application works on your engine you must have NodeJS and
npm installed.

(back to top)

## Installation
****
1. Clone this repository (or download a zip file):
`git clone https://github.com/MichelD-dev/Kasa`

2. Go to the projet root folder `cd kasa`

3. Install the dependencies: `yarn install` or `npm install`

4. (Optional) Configure the application inside the `.env.local` file

5. Launch the application: `yarn start` or `npm run start`

(back to top)

## Contact:
Michel DELAUNAY - [email protected]

Project Link: https://kasa-lodgings.netlify.app/

(back to top)