Awesome GitHub RepositoriesReact State Management

Braft Editor هو محرر نصوص غنية قائم على React ومبني على Draft.js يوفر إطار عمل لإنشاء المحتوى وتنسيقه. يعمل كمكون واجهة مستخدم قابل لإعادة الاستخدام يسمح للمستخدمين بتأليف مستندات منسقة في واجهة WYSIWYG وتصدير المحتوى الناتج كسلاسل HTML. يتميز المشروع بدعم مدمج للترجمة للغات متعددة، بما في ذلك الصينية واليابانية والكورية. يوفر نظاماً معيارياً لتوسيع وظائف المحرر من خلال الإضافات، وتعيينات شريط الأدوات المخصصة، وكيانات الوسائط المتخصصة. يغطي المحرر مجموعة واسعة من قدرات المحتوى، بما في ذلك تنسيق النصوص الغنية، وتنسيق الفقرات والكتل، وتنظيم القوائم المتداخلة. يدعم تضمين محتوى الوسائط المتعددة مثل الصور، والصوت، والفيديو، وكتل الكود المنسقة. تتم إدارة حالة المستند من خلال نمط المكون المتحكم فيه، مما يسمح بالمزامنة بين المحرر وحالة التطبيق.

use-immer هي مكتبة خطافات (hooks) لـ React توفر خطاف حالة غير قابل للتغيير لتحديث كائنات الحالة المعقدة. تدمج إدارة حالة Immer في دورة حياة مكون React، مما يسمح للمطورين بالتعامل مع انتقالات الحالة عن طريق تعديل كائن مسودة بدلاً من نسخ الحالة يدوياً. تمكن المكتبة من تحديث هياكل البيانات المتداخلة بعمق دون استخدام عوامل الانتشار لنسخ كل مستوى من شجرة الحالة. تستخدم نهج مسودة قائم على الطفرة (mutation-based) لضمان بقاء الحالة الأصلية دون مساس مع إنتاج نسخة جديدة غير قابلة للتغيير من البيانات. يغطي المشروع إدارة حالة React العامة، بما في ذلك القدرة على إدارة الحالة مع المخفضات والتعامل مع انتقالات الحالة المعقدة.

use-immer هو أداة لإدارة حالة React توفر خطافاً (hook) مخصصاً لتحديث الحالة غير القابلة للتغيير (immutable). يسمح بتعديل نسخة مسودة مؤقتة من البيانات لحساب انتقال الحالة التالي. تبسط الأداة إدارة الحالة المعقدة من خلال تمكين التغييرات المباشرة على مسودة، مما يزيل الحاجة إلى نسخ الكائنات أو المصفوفات المتداخلة يدوياً باستخدام عوامل الانتشار (spread operators). يضمن هذا النهج توليد لقطة جديدة غير قابلة للتغيير لتغييرات حالة يمكن التنبؤ بها. تغطي المكتبة إمكانيات لتحديث الحالة المتداخلة بعمق وتدعم معالجة تغييرات الحالة من خلال المخفضات (reducers).

هذا المشروع هو مورد تعليمي لـ React يتكون من ملفات بداية ومشاريع مرجعية. يوفر مجموعة من قوالب مشاريع React المتكاملة وأمثلة مكتبة المكونات لإظهار بناء واجهات المستخدم التفاعلية وتطبيقات الصفحة الواحدة. يتضمن المورد دليل إدارة الحالة الذي يغطي استخدام الخطافات، والمخفضات، وموفري السياق. ويتميز بتنفيذات عملية لإدارة حالة المكون المحلي، ومزامنة بيانات التطبيق العالمية، والتعامل مع انتقالات الحالة المعقدة. تغطي المواد تطوير الويب المتكامل، بما في ذلك العرض من جانب الخادم واستخدام إجراءات الخادم لمعالجة النماذج. كما تتناول التوجيه من جانب العميل، وتكوين واجهة المستخدم النمطية، وتكامل تطبيقات الواجهة الأمامية مع قواعد البيانات الخارجية وخدمات المصادقة.

react-basic provides a conceptual implementation of the React model, focusing on a component-based UI architecture. It employs pure functions to transform raw data into structural interface representations and uses a declarative system for managing UI state and hierarchical data distribution. The project distinguishes itself through specialized caching strategies, including tree-based result caching that stores values based on the structural position of elements. It also features a mechanism for deferred function execution to remove boilerplate from business paths and supports the isolation o

هذا المشروع عبارة عن مكتبة تفاعل واجهة مستخدم React ومدير هندسة مكونات. يوفر مجموعة من الأدوات لإنشاء عناصر داخل تطبيق React يمكن للمستخدمين تحريكها وتغيير حجمها. تسمح المكتبة بتخصيص مقابض التفاعل، مما يتيح تطبيق مكونات مخصصة، أو أنماط، أو فئات CSS على مقابض تغيير الحجم لتتناسب مع تصميمات مرئية محددة. يغطي النظام معالجة العناصر من خلال تفاعل المستخدم المباشر وتحديثات الهندسة البرمجية. يتضمن قدرات لالتقاط الشبكة (grid snapping)، وقيود الحدود، ونسب العرض إلى الارتفاع المقفلة للتحكم في موضع وحجم مكونات واجهة المستخدم.

unstated-next هي مكتبة خفيفة الوزن لإدارة الحالة في React تشارك الحالة والمنطق عبر المكونات. تعمل كأداة لتحويل الخطافات المخصصة (Custom hooks) إلى حاويات حالة مشتركة، مما يوفر نهجاً بسيطاً لمزامنة البيانات دون استخدام مخازن حالة خارجية معقدة. يستخدم المشروع نمط المزود-المستهلك (Provider-consumer) لفصل تعريف الحالة عن استخدامها. ويقوم بتغليف الخطافات المخصصة في حاويات سياق (Context containers) لتقليل الكود المتكرر (Boilerplate)، مما يسمح ببث الحالة والدوال من مزود مركزي إلى المكونات الفرعية المتداخلة بعمق. يدعم النظام تكوين حاويات الحالة، مما يتيح إنشاء منطق حالة معقد عن طريق تداخل وحدات مركزة متعددة. ويستفيد من React Context API للتعامل مع مزامنة حالة التطبيق وتفعيل إعادة العرض التلقائي عند حدوث تغييرات في الحالة.

Constate هي أداة لإدارة الحالة العالمية لـ React مصممة لتقليل عمليات إعادة عرض المكونات غير الضرورية. تعمل كمدير للحالة وأداة تحسين تستخدم سياقات متخصصة لتنظيم البيانات المشتركة عبر شجرة المكونات. تتميز المكتبة بنمط مزود تقسيم الحالة، الذي يقسم الحالة العالمية إلى سياقات متعددة لعزل تبعيات البيانات. تتضمن نظام اختيار حالة يسمح للمكونات باستخراج شرائح محددة من الحالة العالمية، مما يضمن حدوث تحديثات الواجهة فقط عند تغير تبعيات البيانات المحددة. يغطي المشروع قدرات أوسع في تحسين الأداء واختيار الحالة. ويوفر واجهة مبسطة لإنشاء مزودي بيانات مركزيين واستخدام الخطافات (hooks) لاسترداد الحالة المشتقة.

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

يعمل هذا المستودع كقاعدة معرفية شاملة ودليل دراسي للمطورين الذين يستعدون للتقييمات التقنية وفحوصات الوظائف التي تركز على React. يوفر مجموعة مهيكلة من استفسارات وإجابات الصناعة الشائعة المصممة لبناء الكفاءة في المفاهيم والأنماط الأساسية المطلوبة لتطوير واجهات الويب الحديثة. يغطي المورد الركائز الأساسية للمكتبة، بما في ذلك المعمارية القائمة على المكونات، والعرض التعريفي، وتدفق البيانات أحادي الاتجاه. ويفصل الأنماط الأساسية لإدارة حالة التطبيق المحلية والعالمية، بالإضافة إلى تقنيات تحسين الأداء من خلال المذكرة (memoization) ودورات العرض الفعالة. بعيداً عن المنطق الأساسي، تتناول المواد قدرات تطوير أوسع مثل اختبار المكونات، والتدويل، والتوجيه. كما تقدم رؤى حول كيفية هيكلة الواجهات المعيارية، والتعامل مع مزامنة البيانات، وتنفيذ التصميم داخل بيئة تعتمد على المكونات.

This library provides a framework for managing form state, validation, and submission logic within applications. It utilizes a centralized state container to track input values and field metadata, ensuring that user interface elements remain synchronized with data through declarative field bindings. The project is distinguished by its cross-platform abstraction layer, which decouples form logic from specific rendering environments. This allows developers to implement consistent validation rules and state management patterns that function identically across both web and mobile applications. T

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

This library provides a React component for rendering interactive hierarchical data structures. It is designed to visualize nested information through recursive composition, allowing users to navigate deep data hierarchies by expanding and collapsing branches. The component distinguishes itself by integrating drag-and-drop functionality, enabling users to reorganize nodes directly within the interface. It also supports asynchronous data loading, which fetches child branches on demand to manage remote or deep datasets efficiently. The library includes performance optimizations for large datas

This project provides a lightweight Markdown text editing component designed for integration into React applications. It offers a split-pane interface that allows users to author content in a raw text editor while simultaneously viewing a rendered preview, with synchronized scrolling to ensure the two views remain aligned during the writing process. The editor is built to be highly extensible, allowing developers to customize the interface by toggling specific toolbar buttons or preview areas. It supports a plugin-based architecture for custom parsing logic and provides a callback-driven work

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