اول مشروع رياكت React
ما هو رياكت
رياكت (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
