Reactإنشاء مشروع

إنشاء مشروع React

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

لإنشاء مشروع React يمكننا استخدام الأمر create-react-app على النحو التالي.

npx create-react-app my-react-app 

عند تنفيذ الأمر السابق فإنه سيتم إنشاء مجلد إسمه my-react-app و من ثم تحميل المكتبات الأساسية التي يحتاجها من النت و سيتم تضمينها فيه بشكل تلقائي.

تشغيل مشروع React

لتتمكن من تشغيل المشروع، عليك التوجه إلى المجلد الذي يوجد فيه المشروع و من ثم يمكنك تشغيله.

الآن أدخل إلى المجلد my-react-app باستخدام الأمر cd على النحو التالي.

cd my-react-app

الآن يمكنك استخدام الأمر start على النحو التالي لتشغيل المشروع و فتحه في المتصفح.

مثال

npm start

النتيجة

جرب الكود

الملفات الإفتراضية في React

إذا فتحت مجلد المشروع بواسطة VSCode فإنه سيبدو كما يلي.

1- المجلد node_modules

هذا المجلد يوضع فيه جميع المكتبات التي يعتمدها المشروع بالإضافة إلى المكتبات التي قد تضاف فيه لاحقاً.

2- المجلد public

هذا المجلد يوضع فيه المحتوى الثابت ( Static Content ) المستخدم في المشروع كالصور، الأيقونات، ملفات الخطوط، ملفات نصية، ملفات جيسون، و حتى صفحات HTML جاهزة.

3- المجلد src

هذا أهم مجلد في المشروع حيث يتم وضع كل الملفات الخاصة بالمكونات المستخدمة في المشروع.

من المجلدات الإفتراضية الموجودة فيه نذكر:

• الملف index.js الذي يربط كل ملفات المشروع الرئيسية ببعضها مع تضمين مكتبات React.
• الملف App.js الذي يمثل الحاوية الرئيسية لكل مكونات المشروع.
• الملف App.css الذي يمكن وضع كود CSS يتم تطبيقه على الحاوية الرئيسية و أي مكوّن موضوع فيها.

4- الملف package.json

هذا الملف يحتوي على جميع أسماء و إصدارات المكتبات التي يستعملها المشروع و التي هي بالأساس موجودة في المجلد node_modules.

5- الملف README.md

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

تعديل الصفحة الإفتراضية في React

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

إفتح مجلد المشروع بواسطة VSCode و توجه إلى المجلد src ثم افتح الملف App.js.
بعدها قم بحذف كل الكود الموجود في هذا الملف و وضع الكود التالي بدلاً منه.

ملاحظة: لا تنسى حفظ الملف بالضغط على الزرين Ctrl + S حتى تحفظ التعديلات التي قمت بإجرائها.

مثال

/src/App.js

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

export default App;

النتيجة

جرب الكود