دليل شامل لتعلم React

دليل تعلم React: مقدمة شاملة للمبتدئين والمطورين المتقدمين

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

ما هي React؟

React هي مكتبة مفتوحة المصدر تُستخدم لبناء واجهات المستخدم (UIs) التفاعلية في تطبيقات الويب. تم تطويرها بواسطة شركة فيسبوك في عام 2013، ومنذ ذلك الحين أصبحت واحدة من الأدوات الأساسية في صناعة البرمجيات. React يركز على بناء مكونات (Components) مستقلة يمكن إعادة استخدامها، مما يسهل عملية تطوير وصيانة التطبيقات.

تُعد React مكتبة “من جانب العميل” (Client-Side Library)، حيث تتيح للمطورين بناء واجهات مستخدم سريعة ومتجاوبة باستخدام JavaScript. على الرغم من أن React هو مكتبة لواجهة المستخدم فقط، فإنه يتكامل بسهولة مع مكتبات وأطر عمل أخرى، مثل Redux وReact Router، لإنشاء تطبيقات كاملة.

المميزات الأساسية لـ React

1. التفاعل السلس: تتميز React بقدرتها على تحديث الواجهة بشكل سلس وفوري عند تغيير حالة التطبيق (state).

2. المكونات القابلة لإعادة الاستخدام: يمكن للمطورين تقسيم واجهة المستخدم إلى مكونات مستقلة، مما يعزز إمكانية إعادة استخدام الكود.

3. الأداء العالي: تستخدم React تقنية “التحديث الانتقائي” (Virtual DOM)، مما يحسن الأداء بشكل كبير مقارنةً بالتقنيات الأخرى.

4. سهولة التكيف: تدعم React العديد من الأنظمة الأساسية، من تطبيقات الويب إلى تطبيقات الهواتف المحمولة عبر React Native.

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

1. البدء مع React: إعداد البيئة

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

تثبيت Node.js و npm

أول شيء يجب التأكد منه هو أنك قد قمت بتثبيت Node.js و npm (مدير حزم Node). يمكنك التحقق من التثبيت باستخدام الأوامر التالية في موجه الأوامر أو الطرفية:

bash
CopyEdit
node -v
npm -v

إذا لم يكن لديك Node.js مثبتًا، يمكنك تحميله من الموقع الرسمي.

إنشاء مشروع React

لإنشاء تطبيق جديد باستخدام create-react-app، استخدم الأوامر التالية:

bash
CopyEdit
npx create-react-app my-app
cd my-app
npm start

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

2. المفاهيم الأساسية في React

المكونات (Components)

المكون هو اللبنة الأساسية في React، وهو يمثل جزءًا من واجهة المستخدم. يمكن أن تكون المكونات كائنات أو دوال، ويمكن أن تحتوي على حالة (state) أو خصائص (props).

• المكونات الدالة (Functional Components): هي مكونات تُكتب كدوال جافا سكريبت.

مثال على مكون دالة:

javascript
CopyEdit
function Welcome(props) {
  return <h1>Hello, {props.name}h1>;
}

• المكونات الكائنية (Class Components): هي مكونات تُكتب باستخدام الكائنات وتحتاج إلى استخدام render() لعرض المحتوى.

مثال على مكون كائن:

javascript
CopyEdit
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}h1>;
  }
}

الحالة (State)

في React، يمكن لكل مكون أن يحتوي على حالة (state) التي تُستخدم لتخزين البيانات التي يمكن أن تتغير بمرور الوقت. عند تغيير الحالة، يتم إعادة تحميل المكون لإظهار التغييرات.

مثال على استخدام الحالة في مكون دالة:

javascript
CopyEdit
import React, { useState } from 'react';

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

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

الخصائص (Props)

الخصائص (props) هي وسيلة لتمرير البيانات من مكون إلى آخر. يتم تمرير الخصائص إلى المكونات كما لو كانت سمات في HTML.

مثال:

javascript
CopyEdit
function Greeting(props) {
  return <h1>Welcome, {props.name}h1>;
}

function App() {
  return <Greeting name="Ali" />;
}

3. التحكم في البيانات: الحالة والخصائص

في React، يمكن التحكم في البيانات باستخدام كل من الحالة (state) و الخصائص (props). تكون الخصائص ثابتة ويتم تمريرها من المكونات الأب إلى المكونات الابن، في حين أن الحالة يمكن تعديلها داخل المكون نفسه.

تحديث الحالة

لتحديث الحالة في React، نستخدم setState() في المكونات الكائنية وuseState() في المكونات الدالة. عند تحديث الحالة، React يعيد عرض المكون لتطبيق التغييرات.

مثال على تحديث الحالة في مكون كائن:

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

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} timesp>
        <button onClick={this.increment}>Click mebutton>
      div>
    );
  }
}

4. التفاعل مع الأحداث في React

تدير React الأحداث بطريقة مشابهة لـ JavaScript العادي، لكن مع بعض الاختلافات الطفيفة. على سبيل المثال، في React يتم استخدام camelCase في أسماء الأحداث.

مثال على التعامل مع حدث النقر في React:

javascript
CopyEdit
function Button() {
  const handleClick = () => {
    alert("Button clicked!");
  };

  return <button onClick={handleClick}>Click mebutton>;
}

5. استخدام Hooks في React

منذ إصدار React 16.8، تم تقديم Hooks، وهي دوال تسمح باستخدام حالة المكون (state) والتأثيرات (effects) في المكونات الدالة دون الحاجة إلى مكونات كائنية.

useState

كما ذكرنا سابقًا، useState هو Hook يُستخدم لإضافة حالة إلى المكونات الدالة.

javascript
CopyEdit
const [count, setCount] = useState(0);

useEffect

Hook آخر مهم هو useEffect، والذي يُستخدم لتنفيذ تأثيرات جانبية مثل استدعاء واجهات API أو تحديث العنوان في المستعرض.

javascript
CopyEdit
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // سيعمل التأثير فقط عندما يتغير count

6. إدارة الحالة باستخدام Context وRedux

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

Context API

Context API هو حل مدمج في React يسمح بمشاركة البيانات بين المكونات دون الحاجة إلى تمريرها عبر العديد من الخصائص. يُستخدم Context عندما تحتاج إلى تمرير البيانات عبر شجرة المكونات دون الحاجة إلى مكون وسيط.

مثال على استخدام Context:

javascript
CopyEdit
const MyContext = React.createContext();

function MyProvider({ children }) {
  const [value, setValue] = useState("Hello");

  return (
    <MyContext.Provider value={value}>
      {children}
    MyContext.Provider>
  );
}

function Display() {
  const value = useContext(MyContext);
  return <h1>{value}h1>;
}

Redux

Redux هو مكتبة لإدارة الحالة في التطبيقات الكبيرة والمعقدة. يستخدم Redux مخزنًا مركزيًا لتخزين الحالة ويُسهل التعامل مع البيانات عبر تطبيقك بأكمله.

7. التوجيه باستخدام React Router

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

مثال على استخدام React Router:

javascript
CopyEdit
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact>
          <Home />
        Route>
        <Route path="/about">
          <About />
        Route>
      Switch>
    Router>
  );
}

8. التفاعل مع واجهات API الخارجية

غالبًا ما يحتاج تطبيق React إلى التفاعل مع واجهات برمجة التطبيقات (APIs) الخارجية لجلب