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

1. ما هو React.js؟

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

2. إعداد بيئة التفاعل الخاصة بك

قبل البدء في البرمجة، ستحتاج إلى إعداد بيئة التطوير الخاصة بك. اتبع الخطوات التالية:

الخطوة 1: تثبيت Node.js وnpm

• Node.js: تتطلب React Node.js لأدوات البناء الخاصة بها.
• npm: يتم استخدام Node Package Manager (npm) لتثبيت المكتبات والحزم.

يمكنك تنزيل وتثبيت Node.js من الموقع الرسمي. يأتي npm مرفقًا مع Node.js.

الخطوة 2: تثبيت إنشاء تطبيق React

أنشأ Facebook أداة تسمى Create React App تساعدك على إعداد مشروع React جديد بسرعة وكفاءة. قم بتشغيل الأمر التالي في جهازك الطرفي:

npx create-react-app my-app

يقوم هذا الأمر بإنشاء دليل جديد باسم my-app يحتوي على جميع الملفات والتبعيات الضرورية لبدء مشروع React.

الخطوة 3: بدء تشغيل خادم التطوير

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

cd my-app
npm start

يجب الآن تشغيل تطبيق React الجديد على http://localhost:3000.

3. فهم مكونات التفاعل

React يدور حول المكونات. المكون في React هو وحدة قائمة بذاتها تعرض بعض المخرجات، عادةً HTML. يمكن تعريف المكونات إما على أنها مكونات وظيفية أو مكونات فئة.

المكونات الوظيفية

المكون الوظيفي هو وظيفة JavaScript بسيطة تقوم بإرجاع HTML (باستخدام JSX).

مثال:

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

مكونات الفصل

يعد مكون الفئة طريقة أكثر قوة لتحديد المكونات ويسمح لك بإدارة الحالة المحلية وأساليب دورة الحياة.

مثال:

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

4. JSX – جافا سكريبت XML

JSX هو امتداد بناء جملة لـ JavaScript يشبه HTML. فهو يسمح لك بكتابة HTML مباشرة داخل JavaScript، والتي ستحولها React بعد ذلك إلى عناصر DOM حقيقية.

مثال:

const element = 
Hello, world!
;

تسهل JSX كتابة وتصور بنية واجهة المستخدم الخاصة بك. ومع ذلك، تحت الغطاء، يتم تحويل JSX إلى استدعاءات React.createElement().

5. الدولة والدعائم

الدعائم

تُستخدم الدعائم (اختصار لـ "الخصائص") لتمرير البيانات من مكون إلى آخر. وهي غير قابلة للتغيير، مما يعني أنه لا يمكن تعديلها بواسطة المكون المتلقي.

مثال:

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

ولاية

تشبه الحالة الدعائم، ولكن تتم إدارتها داخل المكون ويمكن أن تتغير بمرور الوقت. غالبًا ما تُستخدم الحالة للبيانات التي يحتاج المكون إلى تتبعها، مثل إدخال المستخدم.

مثال:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count   1 });
  }

  render() {
    return (
      

        
Count: {this.state.count}
        Increment
      
    );
  }
}

6. التعامل مع الأحداث

التعامل مع الأحداث في React يشبه التعامل مع الأحداث في عناصر DOM. ومع ذلك، هناك بعض الاختلافات النحوية:

• تتم تسمية أحداث React باستخدام حالة الجمل بدلاً من الأحرف الصغيرة.
• باستخدام JSX، يمكنك تمرير دالة كمعالج للحدث، بدلاً من تمريرها كسلسلة.

مثال:

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return (
    
      Click me
    
  );
}

7. طرق دورة الحياة

تحتوي مكونات الفئة في React على أساليب دورة حياة خاصة تسمح لك بتشغيل التعليمات البرمجية في أوقات معينة خلال حياة المكون. وتشمل هذه:

• componentDidMount: يتم استدعاؤه بعد تثبيت المكون.
• componentDidUpdate: يتم استدعاؤه بعد تحديثات المكون.
• componentWillUnmount: يتم استدعاؤه قبل إلغاء تحميل المكون.

مثال:

class Timer extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  render() {
    return (
      

        
{this.state.date.toLocaleTimeString()}
      
    );
  }
}

8. العرض الشرطي

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

مثال:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return 
Welcome back!
;
  }
  return 
Please sign up.
;
}

9. القوائم والمفاتيح

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

مثال:

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    

{listItems}

10. خطافات التفاعل

تسمح لك React Hooks باستخدام الحالة وميزات React الأخرى في المكونات الوظيفية. تتضمن بعض الخطافات الأكثر استخدامًا ما يلي:

• useState: يسمح لك بإضافة حالة إلى مكون وظيفي.
• useEffect: يتيح لك إجراء تأثيرات جانبية في مكونات وظيفتك.
• useContext: يوفر طريقة لتمرير البيانات عبر شجرة المكونات دون الحاجة إلى تمرير الدعائم يدويًا على كل مستوى.

مثال للاستخدام الحالة:

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

  return (
    

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

11. بناء ونشر تطبيقات React

بمجرد أن يصبح التطبيق الخاص بك جاهزًا، يمكنك إنشائه للإنتاج. استخدم الأمر التالي:

npm run build

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

خاتمة

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

بينما تواصل رحلتك مع React، تذكر الاستفادة من الموارد الغنية عبر الإنترنت، بما في ذلك وثائق React الرسمية ومنتديات المجتمع والبرامج التعليمية. برمجة سعيدة!