React.js هي مكتبة JavaScript شائعة لبناء واجهات المستخدم. يستخدم على نطاق واسع من قبل المطورين لإنشاء تطبيقات ويب سريعة وقابلة للتطوير وتفاعلية. إذا كنت مستخدمًا جديدًا لـ React.js وترغب في معرفة كيفية البدء به ، فهذه المقالة مناسبة لك.

1. قم بتثبيت Node.js

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

2. قم بإعداد مشروع React.js

   بمجرد تثبيت Node.js ، يمكنك إنشاء مشروع React.js جديد باستخدام الأمر create-react-app. سيعمل هذا الأمر على دعم مشروع جديد بكل الملفات والتبعيات الضرورية ، حتى تتمكن من التركيز على كتابة التعليمات البرمجية.

   لإنشاء مشروع React.js جديد ، افتح Terminal أو موجه الأوامر وقم بتشغيل الأمر التالي:

npx create-react-app my-app

استبدل my-app باسم مشروعك.

سيؤدي هذا الأمر إلى إنشاء دليل جديد باسم مشروعك وجميع الملفات والتبعيات الضرورية بداخله.

3. قم بتشغيل خادم التطوير

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

لبدء خادم التطوير ، افتح Terminal أو موجه الأوامر ، وانتقل إلى الدليل الجذر لمشروعك ، وقم بتشغيل الأمر التالي:

npm start

سيؤدي هذا إلى تشغيل خادم التطوير وفتح الصفحة الافتراضية لمشروعك في مستعرض ويب.

4. اكتب أول مكون لديك من React.js

الآن بعد أن أعددت مشروع React.js وأطلقت خادم التطوير ، يمكنك البدء في كتابة مكون React.js الأول.

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

لإنشاء مكون جديد في React.js ، افتح ملف src / App.js في مشروعك واستبدل محتواه بالشفرة التالية:

import React from 'react';

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

export default App;