مرحبًا بالعالم في React.js

مرحبًا بكم في “برنامج تعليمي React.js لـ Hello World” الخاص بنا حيث سنرشدك خلال بناء تطبيق React الأول لديك. أصبحت React.js واحدة من أشهر مكتبات JavaScript الأمامية لبناء واجهات المستخدم. تُجعل هندستها المُبنية على المكونات و DOM الافتراضيها فعّالة ومرنة. إذا كنت جديدًا على React.js، فمثال “Hello World” هو نقطة البداية المثالية لفهم المفاهيم الأساسية له. في هذه المقالة، سنقوم بشرح إنشاء تطبيق “Hello World” بسيط في React.js.

المتطلبات الأولية

قبل أن نبدأ، تأكد من تثبيت Node.js و npm (Node Package Manager) على جهازك. يمكنك تنزيلهم وتثبيتهم من موقع Node.js الرسمي.

إعداد تطبيق React

توفر React أداة تُسمى create-react-app لإعداد مشروع React جديد بسرعة. افتح الطرفية أو نافذة الأوامر الخاصة بك وقم بتشغيل الأمر التالي لإنشاء تطبيق React جديد يُسمى hello-world-react:

npx create-react-app hello-world-react

سينشئ هذا الأمر دليلاً جديدًا يسمى hello-world-react ويقوم بإعداد هيكل مشروع React الأساسي داخله.

ثم، انتقل إلى دليل المشروع:

cd hello-world-react

إنشاء مكون Hello World

في React، كل شيء هو مكون. سنقوم بإنشاء مكون وظيفي بسيط لعرض رسالة “Hello World” لدينا.

افتح دليل src في محرر الكود الخاص بك وأنشئ ملفًا جديدًا يُسمى HelloWorld.js. ثم، أضف الرمز التالي لتعريف مكوننا:

// src/HelloWorld.js

import React from 'react';

function HelloWorld() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a basic React.js application.</p>
    </div>
  );
}

export default HelloWorld;

في هذا الرمز:

نستورد React لأن كل مكون React يحتاج إلى الوصول إلى مكتبة React.
الدالة HelloWorld هي مكون وظيفي بسيط يُعيد JSX (JavaScript XML).
يتيح لنا JSX كتابة رمز شبيه بـ HTML داخل ملفات JavaScript.
نصدر مكون HelloWorld لكي نتمكن من استخدامه في أجزاء أخرى من تطبيقنا.

عرض مكون Hello World

الآن، دعونا نعرض مكوننا HelloWorld داخل المكون الرئيسي App.

افتح دليل src وحرر ملف App.js. استبدل محتوياته بالرمز التالي:

// src/App.js

import React from 'react';
import './App.css';
import HelloWorld from './HelloWorld';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <HelloWorld />
      </header>
    </div>
  );
}

export default App;

في هذا الرمز:

نستورد مكون HelloWorld الذي أنشأناه سابقًا.
داخل المكون App، نقوم بعرض مكون HelloWorld.
الـ className=”App” والـ className=”App-header” هما للتنسيق. يمكنك العثور على هذه الأنماط في ملف src/App.css.

تشغيل تطبيق React

الآن بعد أن قمنا بإنشاء مكون “Hello World” الخاص بنا وعرضه، دعونا نقوم بتشغيل تطبيقنا React!

في الطرفية، تأكد أنك في دليل hello-world-react، ثم قم بتشغيل:

npm start

هذا الأمر يبدأ خادم التطوير ويفتح التطبيق في المستعرض الافتراضي. يجب أن ترى “Hello, World!” يتم عرضه في المتصفح بجانب الفقرة المرافقة.

فهم الكود في React

المكونات: في React، نقوم بإنشاء مكونات واجهة مستخدم قابلة لإعادة الاستخدام. مكون HelloWorld الخاص بنا هو مكون وظيفي بسيط يعيد JSX.

JSX: JSX يسمح لنا بكتابة رمز شبيه بـ HTML مباشرة في ملفات JavaScript الخاصة بنا. هذا يجعل كودنا أكثر قراءة وإيجازًا.

التقديم: في المكون App، نقوم بتقديم المكون HelloWorld. React يستخدم DOM الافتراضي لتحديث الDOM الفعلي بكفاءة عندما تتغير المكونات.

npm start: هذا الأمر يبدأ خادم التطوير. أي تغييرات تقوم بها على الشيفرة ستقوم بإعادة تحميل التطبيق تلقائيًا في المتصفح.

الاستنتاج

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

الآن بعد أن لديك فهم أساسي، لا تتردد في تجربة إضافة المزيد من المكونات، أو التنسيق، أو حتى جلب البيانات من واجهات برمجة التطبيقات. مرونة React والبيئة البيئية الواسعة للمكتبات تجعله أداة قوية لبناء تطبيقات الويب الحديثة.