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

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

ما هو React؟

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

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

• الهيكل القائم على المكونات: تستخدم React هيكلًا قائمًا على المكونات، مما يعني تقسيم واجهة المستخدم إلى مكونات قابلة لإعادة الاستخدام. كل مكون يدير حالته الخاصة ويمكن دمجه مع مكونات أخرى لإنشاء تطبيقات أكبر.
• Virtual DOM: تستخدم React Virtual DOM لتحسين الأداء. بدلًا من التعامل المباشر مع الـ DOM الحقيقي، تقوم React بتحديث الـ Virtual 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;

الخصائص (Props)

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

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 لجلب البيانات:

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

const DataFetchingComponent = () => {
  const [data, setData] = useState([]);

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

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default 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، ستجد مجتمعًا حيويًا وموارد وفيرة لمساعدتك في رحلتك. لا تنسَ تجربة مكونات مختلفة، Hooks، ومكتبات لتحسين تجربة التطوير. Coding ممتع!