دليل تعليمي حول إنشاء تطبيق ويب باستخدام React.js

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

بنداهولوان

قبل البدء، تأكد من تثبيت Node.js وnpm (مدير حزم Node) على جهازك. يُعدّ Node.js وnpm ضروريين لأنهما يوفران البيئة والأدوات اللازمة لتطوير تطبيقات الويب باستخدام React.js.

الخطوة 1: تهيئة مشروع React

لإنشاء تطبيق React.js جديد، يمكننا استخدام Create React App، وهي أداة لإنشاء التطبيقات تقلل من الإعدادات الأولية. شغّل الأمر التالي في سطر الأوامر أو موجه الأوامر:

"" باش
npx إنشاء-رد فعل-تطبيق my-app
cd بلدي التطبيق
npm البداية
"`

سيقوم هذا الأمر بإنشاء مجلد جديد باسم `my-app`، وتنزيل وتثبيت جميع التبعيات اللازمة، وتشغيل خادم التطوير. يمكنك الآن فتح متصفح والوصول إلى `http://localhost:3000` لمشاهدة تطبيق React.js الافتراضي.

الخطوة الثانية: بنية المجلدات

دعونا نلقي نظرة على بنية المجلدات التي أنشأها Create React App:

"`
تطبيقي/
├── وحدات العقدة/
├── عام/
│ └── index.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
"`

– `node_modules/`: يحتوي على جميع تبعيات مشروعك.
– `public/`: يحتوي على ملفات ثابتة، بما في ذلك `index.html` الذي يمثل نقطة دخول التطبيق.
– `src/`: حيث ستقضي معظم وقتك. يحتوي على مكونات React وملفات CSS وموارد أخرى.

الخطوة 3: حذف الملفات غير الضرورية

للبدء من جديد، لنحذف بعض الملفات غير الضرورية. احذف الملفين `logo.svg` و`App.test.js` الموجودين داخل مجلد `src/`. ثم افتح الملفين `App.css` و`index.css`، واحذف جميع أكواد CSS الموجودة بداخلهما للبدء بملف أنماط نظيف.

الخطوة الرابعة: إنشاء المكون الأول

تعتمد React.js على المكونات. المكونات هي اللبنات الأساسية لتطبيق الويب الخاص بك. لنقم بتعديل ملف `App.js` لإنشاء أول مكون لدينا.

افتح الملف `src/App.js` واستبدله بالكود التالي:

"شبيبة
استيراد رد من "رد فعل" ؛
استيراد './App.css';

وظيفة التطبيق () {
إرجاع (

);
}

تصدير التطبيق الافتراضي؛
"`

قم بتهيئة كود React داخل ملف `App.js` باستخدام JSX (JavaScript XML)، مما يسمح لنا بكتابة بنية شبيهة بـ HTML داخل JavaScript. احفظ التغييرات واعرض النتائج في متصفحك.

الخطوة 5: إضافة مكونات جديدة

والآن، لنضف بعض المكونات الجديدة. أنشئ مجلدًا جديدًا باسم `components` داخل مجلد `src`. ثم أنشئ ملفًا جديدًا باسم `HelloWorld.js` في مجلد `components`.

"شبيبة
استيراد رد من "رد فعل" ؛

دالة HelloWorld() {
إرجاع (

);
}

export default HelloWorld;
"`

افتح ملف `App.js` واستورد مكون `HelloWorld` الذي أنشأناه للتو:

"شبيبة
استيراد رد من "رد فعل" ؛
استيراد './App.css';
استورد HelloWorld من './components/HelloWorld';

وظيفة التطبيق () {
إرجاع (

);
}

تصدير التطبيق الافتراضي؛
"`

الآن، يقوم ملف `App.js` بعرض مكون `HelloWorld` على الصفحة الرئيسية.

الخطوة 6: إضافة إدارة الحالة باستخدام useState

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

افتح ملف `HelloWorld.js` وأضف الحالة وخطاف `useState`:

"شبيبة
استيراد React، {useState} من 'react'؛

دالة HelloWorld() {
const [count, setCount] = useState(0);

const incrementCount = () => {
setCount(count + 1);
}

إرجاع (

);
}

export default HelloWorld;
"`

يتم تهيئة حالة `count` بقيمة 0، وفي كل مرة يتم النقر على الزر، ستزيد وظيفة `incrementCount` هذه القيمة.

الخطوة 7: إضافة التنسيق

لإضافة تنسيقات، يمكننا استخدام CSS في ملف `App.css` أو استخدام مكتبة CSS-in-JS مثل styled-components. لنلتزم بـ CSS القياسي في الوقت الحالي.

افتح ملف `App.css` وأضف بعض التنسيقات:

"" المغلق
.برنامج {
مواءمة النصوص: المركز؛
}

.App-header {
لون الخلفية: 282c34؛
الحد الأدنى للارتفاع: 100 فولت/ساعة؛
عرض: المرن.
فليكس الاتجاه: العمود.
محاذاة البنود: مركز.
تبرير المحتوى: المركز ؛
حجم الخط: calc(10px + 2vmin);
اللون الابيض؛
}

زر {
الحشو: 10px 20px.
الهامش العلوي: 20px؛
فونت-سيز: شنومكسبس؛
}
"`

الخطوة 8: إضافة التوجيه باستخدام React Router

لإضافة خاصية التنقل بين صفحات تطبيقنا المختلفة، يمكننا استخدام React Router. قم بتثبيت React Router بتشغيل الأمر التالي:

"" باش
تثبيت npm-router-dom
"`

ثم قم بإنشاء مكونين جديدين: `Home.js` و `About.js` في مجلد `components`.

`Home.js`:
"شبيبة
استيراد رد من "رد فعل" ؛

الوظيفة الرئيسية() {
إرجاع (

);
}

تصدير الصفحة الرئيسية الافتراضية ؛
"`

`About.js`:
"شبيبة
استيراد رد من "رد فعل" ؛

وظيفة حول () {
إرجاع (

);
}

تصدير افتراضي حول؛
"`

بعد ذلك، افتح ملف `App.js` وقم بإعداد التوجيه:

"شبيبة
استيراد رد من "رد فعل" ؛
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
استيراد './App.css';
استورد HelloWorld من './components/HelloWorld';
استيراد الصفحة الرئيسية من "./components/Home"؛
استيراد حول من "./components/About"؛

وظيفة التطبيق () {
إرجاع (

);
}

تصدير التطبيق الافتراضي؛
"`

وبهذا، أضفنا خاصية التنقل الأساسية بين الصفحات المختلفة في تطبيقنا.

غطاء

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

أتمنى لك التوفيق، وآمل أن يساعدك هذا الشرح في بدء رحلتك مع React.js!