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

سواء كنت تتطلع إلى إنشاء تطبيقات معقدة من صفحة واحدة أو ببساطة تحسين مهاراتك في تطوير الويب، فإن إتقان React يعد أحد الأصول القيمة.

في هذا الدليل، سنرشدك عبر المفاهيم والخطوات الأساسية لبدء استخدام React، بما في ذلك إعداد بيئة التطوير الخاصة بك، وفهم أساسيات React، وإنشاء المكون الأول الخاص بك.

ما هو رد الفعل؟

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

تاريخ موجز وتطور رد الفعل

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

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

الميزات الرئيسية للرد

1. البنية القائمة على المكونات : يتيح النهج القائم على المكونات في React للمطورين تقسيم واجهات المستخدم المعقدة إلى أجزاء أصغر قابلة لإعادة الاستخدام، ولكل منها منطقها وعرضها الخاص.

2. Virtual DOM : DOM الافتراضي هو تمثيل في الذاكرة لـ DOM الحقيقي. تستخدم React نموذج DOM الافتراضي هذا لتحديث واجهة المستخدم بكفاءة من خلال مقارنتها بالحالة السابقة وتطبيق التغييرات الضرورية فقط.

3. البناء التعريفي : بناء الجملة التعريفي لـ React يجعل من السهل تصميم واجهات المستخدم من خلال وصف الشكل الذي يجب أن تبدو عليه واجهة المستخدم لأي حالة معينة، بدلاً من تحديد كيفية تغيير واجهة المستخدم.

4. تدفق البيانات أحادي الاتجاه: تفرض React تدفق بيانات أحادي الاتجاه، مما يعني أن البيانات تتدفق من المكونات الأصلية إلى المكونات الفرعية، مما يسهل تتبع وإدارة تغييرات الحالة.

تهيئة بيئة التطوير

قبل الغوص في React، يجب أن يكون لديك فهم أساسي لـ HTML وCSS وJavaScript. سيساعدك الإلمام بهذه التقنيات على فهم مفاهيم React بشكل أكثر فعالية، حيث تعتمد React على تقنيات الويب الأساسية هذه.

تثبيت Node.js وnpm

يتطلب تطوير React Node.js وnpm (Node Package Manager)، اللذين يتم استخدامهما لإدارة تبعيات المشروع وتشغيل أدوات التطوير.

كيفية تثبيت Node.js وnpm:

1. تنزيل وتثبيت Node.js : انتقل إلى الموقع الرسمي لـ Node.js وقم بتنزيل أحدث إصدار LTS (دعم طويل الأمد) لنظام التشغيل الخاص بك. تتضمن حزمة التثبيت هذه npm.

2. التحقق من التثبيت: بعد التثبيت، افتح الوحدة الطرفية (أو موجه الأوامر) وقم بتشغيل الأوامر التالية للتحقق من تثبيت Node.js وnpm بشكل صحيح:
   

   node -v
   npm -v

من المفترض أن ترى أرقام إصدارات كل من Node.js وnpm، مما يؤكد نجاح التثبيت.

إنشاء تطبيق رد الفعل

أسهل طريقة للبدء في استخدام React هي استخدام أداة create-react-app، التي تقوم بإعداد مشروع React جديد بتكوين افتراضي معقول.

دليل خطوة بخطوة لتهيئة مشروع React جديد:

1. تثبيت create-react-app على مستوى العالم: افتح جهازك الطرفي وقم بتشغيل:

   npx create-react-app my-app

استبدل تطبيقي باسم المشروع الذي تريده. يقوم هذا الأمر بإنشاء دليل جديد بالاسم المحدد وإعداد مشروع React بداخله.

1. انتقل إلى دليل المشروع الخاص بك:

   cd my-app

1. بدء تشغيل خادم التطوير:

   npm start

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

فهم أساسيات الرد

المكونات هي اللبنات الأساسية لتطبيق React. فهي تقوم بتغليف عناصر واجهة المستخدم والمنطق، مما يسهل إدارة التعليمات البرمجية وإعادة استخدامها. يمكن تصنيف المكونات إلى نوعين:

1. المكونات الوظيفية: هذه هي وظائف JavaScript التي تُرجع عناصر React. يتم استخدامها غالبًا للمكونات البسيطة عديمة الحالة.

مثال:

   function Welcome(props) {
     return 
Hello, {props.name}
;
   }

1. مكونات الفئة: هذه هي فئات ES6 التي توسع React.Component وتتضمن طريقة عرض. يتم استخدامها لمكونات أكثر تعقيدًا مع أساليب الحالة ودورة الحياة المحلية.

مثال:

   class Welcome extends React.Component {
     render() {
       return 
Hello, {this.props.name}
;
     }
   }

JSX (جافا سكريبت XML)

JSX هو امتداد بناء جملة لجافا سكريبت يسمح لك بكتابة تعليمات برمجية تشبه HTML داخل جافا سكريبت. يجعل من السهل إنشاء عناصر ومكونات React.

كيف يتم تحويل JSX إلى JavaScript:

JSX ليس جافا سكريبت صالحًا في حد ذاته. أثناء عملية الإنشاء، تقوم أداة مثل Babel بتحويل JSX إلى JavaScript عادي. على سبيل المثال:

JSX:

const element = 
Hello, world!
;

تحويل جافا سكريبت:

const element = React.createElement('h1', null, 'Hello, world!');

الدعائم (الخصائص)

تُستخدم الدعائم لتمرير البيانات من المكون الأصلي إلى المكون الفرعي. إنها للقراءة فقط وتساعد في جعل المكونات قابلة لإعادة الاستخدام.

مثال على تمرير الدعائم إلى المكون:

function Greeting(props) {
  return 
Welcome, {props.username}!
;
}

function App() {
  return ;
}

في هذا المثال، يتلقى مكون الترحيب خاصية اسم المستخدم من مكون التطبيق ويعرضها.

ولاية

تسمح الحالة للمكونات بإدارة بياناتها الخاصة والتفاعل مع تفاعلات المستخدم. في المكونات الوظيفية، يتم استخدام الخطاف useState لإدارة الحالة.

مقدمة عن استخدامState Hook:

خطاف useState هو دالة تقوم بإرجاع مصفوفة تحتوي على عنصرين: قيمة الحالة الحالية ووظيفة لتحديثها.

مثال على إدارة الحالة باستخدام useState:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count   1)}>Click me
    
  );
}

في هذا المثال، يحتفظ مكون العداد بحالة العد. يؤدي النقر فوق الزر إلى تحديث الحالة، وتعكس واجهة المستخدم قيمة العدد الجديدة.

بناء مكون التفاعل الأول الخاص بك

لنقم بإنشاء مكون وظيفي بسيط لعرض رسالة الترحيب.

مثال خطوة بخطوة:

1. إنشاء ملف جديد: في دليل src الخاص بمشروعك، قم بإنشاء ملف باسم Greeting.js.

2. تحديد المكون:
   

   import React from 'react';

   function Greeting() {
     return 
Hello, React!
;
   }

   export default Greeting;

1. عرض المكون: افتح src/App.js وقم بعرض مكون الترحيب.

   import React from 'react';
   import Greeting from './Greeting';

   function App() {
     return (
       

         
     );
   }

   export default App;

إضافة الأنماط الأساسية

يمكنك تصميم مكوناتك باستخدام الأنماط المضمنة أو ملفات CSS الخارجية. إليك كيفية إضافة الأنماط الأساسية:

1. الأنماط المضمنة:

   function StyledGreeting() {
     const style = {
       color: 'blue',
       textAlign: 'center'
     };

     return 
Hello, styled React!
;
   }

1. CSS خارجي: قم بإنشاء ملف CSS (Greeting.css) في دليل src.

   .greeting {
     color: green;
     text-align: center;
   }

استيراد ملف CSS في Greeting.js وتطبيق الفئة:

   import React from 'react';
   import './Greeting.css';

   function Greeting() {
     return 
Hello, styled React!
;
   }

   export default Greeting;

خاتمة

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