مقدمة إلى React: الأساسيات وكيفية البدء

ما هو React؟

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

لماذا تستخدم React؟

تتمثل أهم مزايا استخدام React في:

1. المكونات القابلة لإعادة الاستخدام (Reusable Components):
   React يسمح بإنشاء مكونات مستقلة وقابلة لإعادة الاستخدام، مما يعزز الكفاءة ويجعل الكود أكثر تنظيماً.
2. التحديث التلقائي للواجهة (Automatic UI Updates):
   React يستخدم الـ Virtual DOM، وهي نسخة افتراضية من الـ DOM، ما يجعل التحديثات أسرع وأكثر كفاءة. عند حدوث تغييرات في البيانات، React يقوم بتحديث الجزء المحدد فقط من واجهة المستخدم بدلاً من إعادة تحميل الصفحة بأكملها.
3. إدارة الحالة (State Management):
   React يسمح للمطورين بإدارة الحالة الداخلية للتطبيق بسهولة من خلال استخدام hooks مثل useState و useEffect.
4. دعم المجتمع الكبير والمكتبات الإضافية:
   React يملك مجتمعًا كبيرًا من المطورين والمكتبات التي تسهل عملية التطوير، مما يجعل العثور على حلول للمشاكل أمرًا سهلاً.

الأساسيات في React

1. المكونات (Components)

المكونات هي قلب React. يمكن اعتبار المكون عبارة عن وحدة قابلة لإعادة الاستخدام تمثل جزءًا من واجهة المستخدم. في React، هناك نوعان من المكونات:

• المكونات الوظائفية (Functional Components):
  هي مكونات تكون عبارة عن دوال تعيد JSX، ولا تحتاج إلى استخدام this أو حالات داخلية معقدة. jsxCopyEditfunction Welcome(props) { return <h1>Hello, {props.name}</h1>; }
• المكونات الكائنية (Class Components):
  هي مكونات تستخدم بشكل أساسي عند الحاجة إلى استخدام state أو مميزات الدورة الحياتية للمكونات. تستخدم this للوصول إلى الحالة (state) وخصائص المكون. jsxCopyEditclass Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }

2. JSX (JavaScript XML)

JSX هو امتداد للـ JavaScript يسمح بكتابة الكود الذي يشبه HTML داخل JavaScript. JSX يجعل كتابة React أكثر مرونة وسهولة.

مثال على JSX:

jsxCopyEditconst element = <h1>Hello, world!</h1>;

باستخدام JSX، يمكن دمج منطق JavaScript مع العناصر HTML بسهولة، مما يساعد في تطوير التطبيقات بشكل أسرع.

3. التعامل مع البيانات: Props و State

• Props:
  هي وسيلة لتمرير البيانات من مكون أب إلى مكون طفل. يمكن للمكون الطفل الوصول إلى هذه البيانات من خلال props. jsxCopyEditfunction Greeting(props) { return <h1>Hello, {props.name}</h1>; }
• State:
  هي حالة المكون، وهي بيانات يتم تخزينها داخل المكون وتؤثر في طريقة عرض المكون. عند تحديث الحالة، React يعيد-render للمكون. jsxCopyEditclass Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); } }

4. Hooks في React

الـ Hooks هي وظائف توفر للمطورين طريقة للتفاعل مع الحالة (state) وأحداث الدورة الحياتية للمكونات في المكونات الوظائفية. من أشهر الـ Hooks في React:

• useState:
  يسمح بإضافة الحالة للمكونات الوظائفية. jsxCopyEditconst [count, setCount] = useState(0);
• useEffect:
  يستخدم لتنفيذ العمليات الجانبية (side effects) مثل استدعاء API أو التعامل مع المؤقتات (timers). jsxCopyEdituseEffect(() => { document.title = `You clicked ${count} times`; }, [count]);

5. React Router

React Router هو مكتبة مخصصة لإدارة التوجيه (routing) في تطبيقات React. تسمح بتوزيع الصفحات المختلفة داخل التطبيق بدون الحاجة إلى إعادة تحميل الصفحة.

مثال بسيط:

jsxCopyEditimport { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

كيفية البدء مع React

1. تثبيت Node.js

لتبدأ في استخدام React، يجب أولاً تثبيت Node.js، وهو بيئة تشغيل JavaScript التي تسمح بتشغيل React والأدوات المتعلقة بها. يمكنك تحميل Node.js من الموقع الرسمي nodejs.org.

2. استخدام Create React App

أفضل طريقة لبدء مشروع React هي استخدام أداة Create React App، وهي أداة توفر إعدادات مبدئية جاهزة لتطوير تطبيقات React.

لتثبيت Create React App:

bashCopyEditnpx create-react-app my-app

بعد التثبيت، يمكنك الانتقال إلى مجلد المشروع وبدء الخادم المحلي:

bashCopyEditcd my-app
npm start

3. هيكل مشروع React

عند إنشاء مشروع باستخدام create-react-app، ستلاحظ هيكلًا معينًا للمجلدات:

• public/: يحتوي على الملفات العامة مثل index.html.
• src/: يحتوي على ملفات JavaScript التي تضم المكونات والمنطق الخاص بتطبيقك.
• package.json: يحتوي على إعدادات المشروع وجميع الحزم المثبتة.

4. كتابة أول مكون في React

بمجرد أن يكون لديك بيئة تطوير جاهزة، يمكنك البدء بكتابة أول مكون لك داخل الملف src/App.js:

jsxCopyEditimport React from 'react';

function App() {
  return <h1>Hello, React!</h1>;
}

export default App;

5. التفاعل مع API باستخدام React

React يسهل التفاعل مع APIs باستخدام الـ Hooks مثل useEffect و fetch. على سبيل المثال، يمكنك استخدام useEffect لاستدعاء بيانات من API وعرضها في واجهة المستخدم.

مثال:

jsxCopyEditimport React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);

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

  return (
    <div>
      <h1>Fetched Data</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

الخلاصة

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