فهم React: دليل شامل لبناء تطبيقات الويب الحديثة

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

ما هي React؟

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

الميزات الرئيسية لـ React

• الهيكل القائم على المكونات: تستخدم React هيكلًا قائمًا على المكونات، مما يعني أن واجهة المستخدم مقسمة إلى مكونات قابلة لإعادة الاستخدام. كل مكون يدير حالته الخاصة ويمكن دمجه مع غيره لتكوين تطبيقات أكبر.
• الـ DOM الافتراضي: تعتمد React على الـ DOM الافتراضي لتحسين الأداء. بدلاً من التلاعب المباشر بـ DOM الحقيقي، تقوم React بتحديث الـ DOM الافتراضي ثم تتماشى مع الـ DOM الحقيقي، مما يقلل التغييرات ويسرع عملية العرض.
• التركيب الإعلاني: يسمح التركيب الإعلاني لـ React للمطورين بوصف مظهر واجهة المستخدم بدلاً من كيفية تحقيقه. وهذا يؤدي إلى كود أكثر قابلية للتنبؤ وأسهل في تصحيح الأخطاء.
• JSX: تستخدم React JSX، وهي امتداد للتركيب يسمح للمطورين بكتابة عناصر HTML مباشرة في JavaScript. هذا يجعل الكود أكثر قابلية للقراءة وتعبيرًا.
• تدفق البيانات أحادي الاتجاه: في React، تتدفق البيانات في اتجاه واحد — من المكونات الأبوية إلى المكونات الفرعية. هذا التدفق الأحادي يسهل فهم كيفية تأثير تغييرات البيانات على واجهة المستخدم.

البدء مع React

لبدء البناء باستخدام React، ستحتاج إلى فهم أساسي لـ JavaScript وNode.js. دعنا نمر على الخطوات لإعداد مشروع React جديد.

إعداد بيئتك

2. إنشاء تطبيق React جديد: أسهل طريقة لإنشاء تطبيق React جديد هي استخدام Create React App، أداة سطر الأوامر التي تُعد كل شيء لك بأمر واحد. افتح الطرفية وقم بتشغيل:

   npx create-React-app my-app
   cd my-app
   npm start
   

   سيقوم هذا بإنشاء دليل جديد يسمى my-app وتشغيل خادم تطوير. يمكنك عرض تطبيق React الجديد الخاص بك في متصفحك على عنوان http://localhost:3000.

فهم هيكل المجلدات

داخل الدليل my-app، ستجد عدة ملفات ومجلدات مهمة:

• public/: يحتوي على الملفات الثابتة، بما في ذلك index.html، حيث سيتم عرض تطبيق React الخاص بك.
• src/: هذا هو المكان الذي ستقضي فيه معظم وقتك. يحتوي على مكونات React وأساليبك.
• package.json: يدير هذا الملف التبعيات الخاصة بمشروعك والنصوص لتشغيل تطبيقك.

المفاهيم الأساسية لـ React

دعونا نتعمق في بعض المفاهيم الأساسية التي تجعل React قوية وفعالة لبناء واجهات المستخدم.

المكونات

المكونات هي اللبنات الأساسية لتطبيق React. يمكن أن يكون المكون فئة أو دالة. إليك مثالًا على مكون وظيفي بسيط:

import React from 'React';

const HelloWorld = () => {
  return <h1>Hello, World!</h1>;
};

export default HelloWorld;

يمكنك استخدام هذا المكون في ملف تطبيقك الرئيسي (عادةً App.js):

import React from 'React';
import HelloWorld from './HelloWorld';

const App = () => {
  return (
    <div>
      <HelloWorld />
    </div>
  );
};

export default App;

المعلمات

المعلمات (الاختصار لـ الخصائص) هي الطريقة التي تُمرِّر بها البيانات من مكون إلى آخر. وهي قراءة فقط وتساعد على عرض المكونات ديناميكيًا. إليك مثالًا على كيفية استخدام المعلمات:

const Greeting = ({ name }) => {
  return <h2>Hello, {name}!</h2>;
};

const App = () => {
  return <Greeting name="Alice" />;
};

الحالة

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

import React, { useState } from 'React';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};

export default Counter;

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

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

import React, { Component } from 'React';

class Timer extends Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({ seconds: this.state.seconds + 1 });
    }, 1000);
  }

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

  render() {
    return <p>Seconds: {this.state.seconds}</p>;
  }
}

export default Timer;

الدوال المُعلَّقة

الهوكات هي إضافة أحدث إلى React (تم تقديمها في الإصدار 16.8) وتدعمك على استخدام الحالة وميزات أخرى من React دون كتابة فئة. تشمل الهوكات الشائعة useState، useEffect، وuseContext. إليك مثالًا باستخدام هوك useEffect لجلب البيانات:

استيراد React, { useEffect, useState } من 'React';

الثابت DataFetchingComponent = () => {
  الثابت [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://API.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  إرجاع (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

تصدير افتراضي DataFetchingComponent;

بناء تطبيق بسيط React

دعونا نجمع كل شيء وننشئ تطبيقًا بسيطًا React يعرض قائمة بالعناصر. سننشئ مكونًا وظيفيًا يقوم بجلب البيانات من API وعرضها في قائمة.

الخطوة 1: إنشاء المكونات

أولاً، أنشئ ملفًا جديدًا باسم ItemList.js في الدليل src:

import React, { useEffect, useState } from 'React';

const ItemList = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => setItems(data));
  }, []);

  return (
    <div>
      <h1>Item List</h1>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default ItemList;

الخطوة 2: دمج المكون في التطبيق

بعد ذلك، عدّل ملف App.js ليشمل مكون ItemList:

import React from 'React';
import ItemList from './ItemList';

const App = () => {
  return (
    <div>
      <ItemList />
    </div>
  );
};

export default App;

الخطوة 3: تشغيل تطبيقك

الآن بعد أن قمت بإعداد مكوناتك، شغّل تطبيقك عن طريق تنفيذ:

npm start

افتح متصفحك وانتقل إلى http://localhost:3000. يجب أن ترى قائمة بالعناصر المسترجعة من API!

الخاتمة

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

مع استمرارك في التعلم واستكشاف React، ستكتشف مجتمعًا نابضًا بالحياة وكمية هائلة من الموارد التي ستساعدك على طول الطريق. لا تنسَ تجربة مكونات وخطافات ومكتبات مختلفة لتحسين تجربتك في التطوير. تCoding سعيد!