ما هو رياكت

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

مميزات رياكت

المكونات (Components) : تعتمد رياكت على مفهوم المكونات، مما يتيح للمطورين بناء واجهات المستخدم ككتل صغيرة قابلة لإعادة الاستخدام. هذا يعزز التنظيم ويجعل الصيانة أسهل.
التحديث الفعال (Efficient Updates) : تستخدم رياكت DOM الافتراضي (Virtual DOM) لإجراء التحديثات بكفاءة. عند تغيير حالة التطبيق، تقوم ريآكت بتحديث الـ DOM الافتراضي ثم تقارن الاختلافات مع DOM الفعلي، مما يقلل من العمليات الباهظة على DOM الحقيقي.
التفاعل (Interactivity) : يمكن للمطورين بناء تطبيقات تفاعلية ديناميكية بسهولة، حيث يمكن تحديث واجهة المستخدم استجابة لتغييرات البيانات بفضل استخدام حالات المكونات (State) والمجموعات (Props).
التوافق (Compatibility) : يمكن استخدام رياكت لبناء تطبيقات الويب وكذلك التطبيقات الأصلية (Native) من خلال مكتبة رياكت نيتيف (React Native)، مما يوفر تجربة تطوير متسقة عبر مختلف المنصات.
دعم المجتمع (Community Support) : بفضل شعبيتها، تتوفر موارد كثيرة لدعم التعلم والتطوير في رياكت، بما في ذلك الوثائق الرسمية، والأدوات، والمكتبات الإضافية، والدورات التعليمية.

بيئـــــة العمــــــل

Visual Studio Code

فيجوال ستوديو كود (Visual Studio Code) هو برنامج تحرير النصوص بيئة تطوير مفتوحة المصدر وخفيفة الوزن تم تطويرها بواسطة مايكروسوفت. تعتبر أحد أشهر وأكثر الأدوات شعبية بين المطورين لتطوير البرمجيات وتحرير النصوص بفضل ميزاتها القوية والمرونة التي توفرها.

قم بزيارة موقع فيجوال ستوديو كود.
يمكنك الرجوع للمقال الخاص بة لمعرفة المزيد.

Node.js و npm

قبل البدء، تأكد من تثبيت Node.js و npm (مدير الحزم الخاص بـ Node.js) على جهازك. يمكنك تنزيلهما من الموقع الرسمي Node.js.

التحقق من التثبيت:

افتح موجه الأوامر (Command Prompt) أو PowerShell او فيجوال ستوديو كود

ثم قم بادخال الامر

				
					node -v

ليظهر امامك رقم الاصدار الخاص ب node

				
					npm -v

ليظهر امامك رقم الاصدار الخاص ب npm

تثبيت اول مشروع رياكت

				
					npx create-react-app first-react

هنا قمنا بتسمية المشروع first-react ويمكنك تسمية المشروع بأي اسم تريدة

بعد ذلك نقوم بالانتقال الي مجلد المشروع

				
					cd first-react

بعد ذلك نقوم بتشغيل المشروع

				
					npm start

سيفتح هذا الأمر خادم تطوير وسيقوم بفتح التطبيق في المتصفح الافتراضي على العنوان http://localhost:3000.

هيكل المشروع

عند فتح مجلد المشروع، ستجد الهيكل الأساسي التالي

				
					my-first-react-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── ...
├── .gitignore
├── package.json
└── README.md

public/index.html : ملف HTML الرئيسي الذي يتم تحميله عند تشغيل التطبيق.
src/index.js : ملف JavaScript الرئيسي الذي يحتوي على نقطة الدخول لتطبيق React.
src/App.js : المكون الرئيسي للتطبيق.

تحرير المشروع

يمكنك الآن بدء تحرير المشروع. افتح ملف src/App.js وعدل كود المكون الرئيسي

				
					import React from 'react';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          مرحبًا بك في مشروعك الأول باستخدام React!
        </p>
      </header>
    </div>
  );
}

export default App;

مشكلات قد تواجهك عند تثبيت npm

1 – تأكد من أنك تستخدم أحدث إصدار من Node.js

				
					npm install -g npm

إذا كنت تستخدم شبكة تتطلب إعدادات بروكسي، تأكد من أن إعدادات البروكسي صحيحة

				
					npm config set proxy http://username:password@proxyurl:proxyport
npm config set https-proxy http://username:password@proxyurl:proxyport

يمكنك تعيين سجل npm إلى HTTP لتجنب مشاكل SSL. لاحظ أن هذا يقلل من أمان التحميل

				
					npm config set registry http://registry.npmjs.org/

حذف ذاكرة التخزين المؤقت قد يساعد في حل المشاكل

				
					npm cache clean --force

إذا كنت لا تستخدم بروكسي، يمكنك إعادة تعيين إعدادات البروكسي إلى قيمها الافتراضية

				
					npm config delete proxy
npm config delete https-proxy

إذا كنت تواجه مشاكل مع SSL، يمكنك تشغيل npm بدون SSL (لاحظ أن هذا الخيار يقلل من الأمان

				
					npm set strict-ssl false

حاول إصلاح الثغرات الأمنية باستخدام الأمر التالي

				
					npm audit fix

إذا لم يتم إصلاح جميع الثغرات، يمكنك استخدام الأمر --force

				
					npm audit fix --force

Sharing to

Post Views: 24

اول مشروع رياكت React