مدونة أحمد زعـــــــــكان

 مكتبة React: مقدمة وإستخداماتها 1. مقدمة: تعتبر React مكتبة جافا سكريبت شائعة لتطوير واجهات المستخدم. يتم تطويرها من قبل فيسبوك، وتهدف إلى تسهيل بناء واجهات سريعة وقابلة للتطوير. تتفاعل React مع DOM وتساعد في تحسين أداء التطبيقات. 2. الميزات الأساسية: تُعرف React بمرونتها وسهولة التفاعل مع المكونات. تُستخدم المكونات لإعادة استخدام الكود وتقسيم المشروع إلى أجزاء يمكن إدارتها. هذا يساعد المطورين على تسهيل صيانة التنظيمات الكبيرة. 3. JSX: تستخدم React لغة JSX، وهي امتداد لجافا سكريبت. تتيح JSX دمج HTML مع جافا سكريبت داخل الكود. هذا يجعل الكود أكثر سهولة للفهم ويُعزز تجربة التطوير. 4. إدارة الحالة: تُعتبر إدارة الحالة أساسية في React. تُستخدم الأدوات مثل Redux وContext API لتسهيل نقل البيانات والمعلومات بين المكونات. هذا يجعل التطبيقات أكثر استجابة ويوفر تجربة استخدام مميزة. 5. التفاعل مع DOM: تستخدم React مفهوم الشجرة الافتراضية (Virtual DOM) للتعامل مع DOM الفعلي بشكل أكثر فعالية. هذا يُقلل من عمليات إعادة الرسم غير الضرورية، مما يحسن من أداء التطبيق وسرعته. 6. استخدامات شائعة: تُس...

تطبيق درجة الحرارة باستخدام React مقدمة: هل تساءلت يومًا عن كيفية بناء واجهة تفاعلية تعرض درجة الحرارة وتسمح للمستخدم بزيادة أو تقليل درجة الحرارة بشكل ديناميكي؟ في هذا المقال، سنستعرض مشروعًا بسيطًا وممتعًا يستخدم مكتبة React لتحقيق هذا الهدف. يعرض التطبيق درجة الحرارة الحالية ويسمح للمستخدم بتغييرها عبر الضغط على أزرار محددة. مكونات المشروع: المشروع يعتمد على مجموعة من المكونات الأساسية في React، ونستخدم مكتبة Bootstrap لتوفير تنسيقات أنيقة وسهلة الاستخدام. المكونات الرئيسية في هذا المشروع هي: Title , Button , و Tempreature . الكود ومكوناته: App.js : الملف الرئيسي الذي يجمع مكونات التطبيق. import React, { useState } from 'react' ; import Title from '../Title' ; import './tempreature.css' ; import Button from '../Button' ; export default function Tempreature () {   const [degre, setDegre] = useState( 0 );   function increaseDegre () {     setDegre( c => c + 1 ); // زيادة القيمة بمقدار 1   }   function decreaseDegre () {     setDe...

import React from 'react' ; // استيراد مكتبة React import Title from '../Title' ; // استيراد مكون Title من ملف آخر // مكون RandomColor لتغيير ألوان الخلفية عند النقر على الأزرار export default function RandomColor () {   // دالة handleClick لتغيير لون الخلفية ولون الزر الذي تم النقر عليه   function handleClick ( e ) {     console .log(getRandomColo()); // طباعة اللون العشوائي في الكونسول     let body = document .querySelector( "body" ); // الحصول على عنصر الجسم في الصفحة     body.style.background = getRandomColo(); // تعيين لون الخلفية للجسم بلون عشوائي     e.target.style.background = getRandomColo(); // تعيين لون خلفية الزر الذي تم النقر عليه بلون عشوائي   }   // دالة getRandomColo لتوليد لون عشوائي   function getRandomColo () {     let letters = '0123456789ABCDEF' ; // حروف وأرقام اللون الست عشري     let color = "#" ; // بداية الكود اللوني     for ( let i = 0 ; i < 6 ; i++) ...