Awesome GitHub RepositoriesReact State Management

Braft Editor est un éditeur de texte riche basé sur React, construit sur Draft.js, qui fournit un framework pour la création et le formatage de contenu. Il fonctionne comme un composant UI réutilisable qui permet aux utilisateurs de composer des documents formatés dans une interface WYSIWYG et d'exporter le contenu résultant sous forme de chaînes HTML. Le projet propose une prise en charge intégrée de la localisation pour plusieurs langues, notamment le chinois, le japonais et le coréen. Il fournit un système modulaire pour étendre les fonctionnalités de l'éditeur via des plugins, des mappings de barre d'outils personnalisés et des entités multimédias spécialisées. L'éditeur couvre un large éventail de capacités de contenu, incluant le formatage de texte riche, le style de paragraphe et de bloc, et l'organisation de listes imbriquées. Il prend en charge l'intégration de contenu multimédia tel que des images, de l'audio, de la vidéo et des blocs de code formatés. L'état du document est géré via un modèle de composant contrôlé, permettant la synchronisation entre l'éditeur et l'état de l'application.

use-immer est une bibliothèque de hooks React qui fournit un hook d'état immuable pour mettre à jour des objets d'état complexes. Elle intègre la gestion d'état Immer dans le cycle de vie des composants React, permettant aux développeurs de gérer les transitions d'état en modifiant un objet brouillon plutôt qu'en copiant manuellement l'état. La bibliothèque permet la mise à jour de structures de données profondément imbriquées sans l'utilisation d'opérateurs de propagation pour copier chaque niveau de l'arbre d'état. Elle utilise une approche de brouillon basée sur la mutation pour garantir que l'état original reste intact tout en produisant une nouvelle version immuable des données. Le projet couvre la gestion générale de l'état React, incluant la capacité de gérer l'état avec des réducteurs et de gérer des transitions d'état complexes.

use-immer est un utilitaire de gestion d'état React qui fournit un hook personnalisé pour mettre à jour un état immuable. Il permet la modification d'une version brouillon (draft) temporaire des données pour calculer la transition d'état suivante. L'outil simplifie la gestion d'états complexes en permettant des mutations directes sur un brouillon, ce qui élimine le besoin de copier manuellement des objets ou des tableaux imbriqués en utilisant des opérateurs de propagation (spread operators). Cette approche garantit la génération d'un nouveau snapshot immuable pour des changements d'état prévisibles. La bibliothèque couvre des capacités pour mettre à jour des états profondément imbriqués et prend en charge le traitement des changements d'état via des réducteurs (reducers).

Ce projet est une ressource d'apprentissage React composée de fichiers de démarrage et de projets de référence. Elle fournit une collection de modèles de projets React full stack et d'exemples de bibliothèques de composants pour démontrer la construction d'interfaces utilisateur interactives et d'applications monopages. La ressource inclut un guide de gestion de l'état couvrant l'utilisation des hooks, des réducteurs et des fournisseurs de contexte. Elle propose des implémentations pratiques pour gérer l'état des composants locaux, synchroniser les données d'application globales et gérer les transitions d'état complexes. Le matériel couvre le développement web full stack, y compris le rendu côté serveur et l'utilisation d'actions serveur pour la gestion des formulaires. Il aborde également le routage côté client, la composition modulaire de l'interface utilisateur et l'intégration d'applications frontend avec des bases de données et des services d'authentification externes.

react-basic fournit une implémentation conceptuelle du modèle React, se concentrant sur une architecture d'interface utilisateur basée sur des composants. Il emploie des fonctions pures pour transformer des données brutes en représentations structurelles d'interface et utilise un système déclaratif pour gérer l'état de l'interface utilisateur et la distribution hiérarchique des données. Le projet se distingue par des stratégies de mise en cache spécialisées, incluant la mise en cache des résultats basée sur l'arbre qui stocke les valeurs en fonction de la position structurelle des éléments. Il dispose également d'un mécanisme pour l'exécution différée de fonctions afin de supprimer le boilerplate des chemins métier et supporte l'isolation des projections d'état, telles que les positions de défilement et le focus d'entrée, de la logique métier principale. La bibliothèque couvre des capacités plus larges dans la composition d'interface modulaire, permettant la création d'abstractions de composants réutilisables. Elle inclut des outils pour le transfert de données profond à travers des couches imbriquées et une gestion d'état spécifiquement adaptée pour associer des valeurs uniques à des éléments de liste individuels.

Ce projet est une bibliothèque d'interaction UI React et un gestionnaire de géométrie de composants. Il fournit un ensemble d'outils pour créer des éléments au sein d'une application React que les utilisateurs peuvent déplacer et redimensionner. La bibliothèque permet la personnalisation des poignées d'interaction, permettant l'application de composants, styles ou classes CSS personnalisés aux poignées de redimensionnement pour correspondre à des designs visuels spécifiques. Le système couvre la manipulation d'éléments à la fois par interaction utilisateur directe et par mises à jour de géométrie programmatiques. Il inclut des capacités pour le snapping sur grille, les contraintes de bordure et les ratios d'aspect verrouillés pour contrôler la position et la taille des composants UI.

unstated-next est une bibliothèque de gestion d'état légère pour React qui partage l'état et la logique entre les composants. Elle fonctionne comme un outil pour transformer des hooks personnalisés en conteneurs d'état partagés, fournissant une approche minimaliste pour synchroniser les données sans utiliser de magasins d'état externes complexes. Le projet utilise un modèle fournisseur-consommateur pour découpler la définition de l'état de son utilisation. Il enveloppe les hooks personnalisés dans des conteneurs de contexte pour réduire le boilerplate manuel, permettant à l'état et aux méthodes d'être diffusés depuis un fournisseur central vers des composants enfants profondément imbriqués. Le système prend en charge la composition de conteneurs d'état, permettant la création d'une logique d'état complexe en imbriquant plusieurs unités ciblées. Il exploite l'API React Context pour gérer la synchronisation de l'état de l'application et déclencher des re-rendus automatiques lorsque l'état change.

Constate is a global state management tool for React designed to minimize unnecessary component re-renders. It functions as a state manager and optimization tool that utilizes specialized contexts to organize shared data across a component tree. The library distinguishes itself through a state-slicing provider pattern, which splits global state into multiple contexts to isolate data dependencies. It includes a state selector system that allows components to extract specific slices of global state, ensuring interface updates only occur when the selected data dependencies change. The project c

This project is an interactive learning platform designed for mastering component-based user interface patterns and state management using the React library. It functions as a frontend development tutorial and course, providing a guided environment for learning declarative rendering and virtual DOM concepts. The platform distinguishes itself through a live-reload coding environment and a split-view interface for real-time code validation. These tools allow learners to compare their live code output against target solutions and use guided source-code markers to identify required edits and crit

This project is a collection of architectural guidelines and design patterns for building applications with the React library. It provides a framework for organizing frontend architecture, component design standards, and state management strategies to reduce technical debt and complexity. The guide emphasizes a modular approach to component design, focusing on the separation of business logic from the user interface and the use of primitive props to ensure single responsibility. It advocates for a testing philosophy centered on user behavior and integration outcomes rather than internal imple

Ce dépôt sert de base de connaissances complète et de guide d'étude pour les développeurs se préparant aux évaluations techniques et aux entretiens d'embauche axés sur React. Il fournit une collection structurée de questions et réponses courantes de l'industrie conçues pour renforcer la maîtrise des concepts fondamentaux et des modèles requis pour le développement d'interfaces web modernes. La ressource couvre les piliers fondamentaux de la bibliothèque, y compris l'architecture basée sur les composants, le rendu déclaratif et le flux de données unidirectionnel. Elle détaille les modèles essentiels pour gérer l'état de l'application à la fois local et global, ainsi que des techniques pour optimiser les performances via la mémoïsation et des cycles de rendu efficaces. Au-delà de la logique de base, le matériel aborde des capacités de développement plus larges telles que les tests de composants, l'internationalisation et le routage. Il offre des aperçus sur la manière de structurer des interfaces modulaires, de gérer la synchronisation des données et d'implémenter le style au sein d'un environnement piloté par les composants.

Little State Machine is a lightweight state management library for React applications that provides a centralized data store for managing shared application information. It utilizes a context-based provider pattern to distribute state across the component tree, ensuring consistent data access without the need for manual property drilling. The library distinguishes itself through built-in support for automatic browser storage persistence, which synchronizes the in-memory state with local or session storage to maintain data continuity across page refreshes. It also incorporates middleware-drive

Cette bibliothèque fournit un composant React pour le rendu de structures de données hiérarchiques interactives. Elle est conçue pour visualiser des informations imbriquées par composition récursive, permettant aux utilisateurs de naviguer dans des hiérarchies de données profondes en développant et en réduisant les branches. Le composant se distingue en intégrant une fonctionnalité de glisser-déposer, permettant aux utilisateurs de réorganiser les nœuds directement au sein de l'interface. Il prend également en charge le chargement de données asynchrone, qui récupère les branches enfants à la demande pour gérer efficacement les jeux de données distants ou profonds. La bibliothèque inclut des optimisations de performance pour les grands jeux de données en utilisant le défilement virtuel pour ne rendre que les nœuds visibles dans la fenêtre d'affichage. Elle offre une gestion d'état flexible, permettant aux développeurs de contrôler la sélection des nœuds, le développement et le statut des cases à cocher via soit la logique interne du composant, soit des systèmes d'état d'application externes.

This project provides a React component wrapper for a block-based rich text editor. It enables the integration of a structured content editing environment into React applications, organizing document data into modular, independent blocks for flexible manipulation and storage. The component manages the editor instance lifecycle and facilitates state synchronization, allowing developers to use either controlled or uncontrolled data patterns. It supports extensibility through the registration of external plugins, enabling the addition of specialized formatting tools, media handling, and custom b