info@ramimaki.com

كيفية بدء مشروع باستخدام React.js

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

ما هي React.js؟

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

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

لماذا تستخدم React.js؟

قبل أن نتعمق في تفاصيل إعداد مشروع React، من المهم أن نفهم لماذا تُعتبر React مكتبة شائعة جدًا:

  1. بنية قائمة على المكونات: تُعزز React من كتابة الكود القابل لإعادة الاستخدام، مما يسهل صيانته وتوسيعه.
  2. DOM افتراضي: تستخدم React DOM افتراضي لتحسين عملية التقديم، مما يزيد من أداء التطبيقات.
  3. بيئة غنية ومكتبات متعددة: تتمتع React ببيئة كبيرة من الأدوات والمكتبات مثل React Router و Redux و Next.js التي تعزز قدراتها.
  4. التركيب التصريحي: يسمح التركيب التصريحي في React للمطورين بوصف كيفية ظهور واجهة المستخدم بناءً على الحالة، مما يجعل الكود أكثر وضوحًا وأسهل في التصحيح.
  5. دعم مجتمعي قوي: تتمتع React بمجتمع نشط وكبير، مما يضمن للمطورين الوصول إلى الكثير من الدروس التوجيهية والوثائق والدعم.

الآن بعد أن ناقشنا فوائد استخدام React، دعونا ننتقل إلى خطوات بدء مشروع React الأول.

1. إعداد بيئة التطوير

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

الخطوة 1: تثبيت Node.js

تتطلب React.js تثبيت Node.js لأدوات البناء ونظام إدارة الحزم (npm). للبدء، قم بتنزيل وتثبيت أحدث إصدار من Node.js من الموقع الرسمي: تحميل Node.js.

بعد التثبيت، تحقق من التثبيت عبر تشغيل الأوامر التالية في الطرفية أو موجه الأوامر:

bash
node -v
npm -v

سيعرض هذا الإصدار المثبت من Node.js و npm.

الخطوة 2: تثبيت أدوات تطوير React

تأتي React مع أداة سطر الأوامر تسمى create-react-app التي تقوم بأتمتة عملية إعداد مشروع React. تقوم هذه الأداة بتكوين كل ما تحتاجه للبدء في البناء، بما في ذلك هيكل المشروع، وأدوات البناء، والتبعيات.

لتثبيت create-react-app، قم بتشغيل الأمر التالي:

bash
npm install -g create-react-app

بمجرد التثبيت، يمكنك إنشاء مشروع React جديد باستخدام الأمر التالي:

bash
npx create-react-app my-first-react-app

سيقوم هذا بإنشاء مجلد جديد يسمى my-first-react-app يحتوي على جميع الملفات والهيكل اللازم للمشروع.

الخطوة 3: بدء الخادم المحلي

انتقل إلى مجلد المشروع الذي تم إنشاؤه حديثًا:

bash
cd my-first-react-app

ثم شغّل الخادم المحلي باستخدام:

bash
npm start

سيقوم هذا بتشغيل خادم محلي وفتح التطبيق الافتراضي لـ React في متصفح الويب الخاص بك، عادةً على http://localhost:3000. الآن لديك تطبيق React يعمل محليًا وأنت جاهز للبدء في تطويره!

2. فهم هيكل المشروع

عندما تنشئ مشروعًا جديدًا باستخدام create-react-app، سترى عدة مجلدات وملفات. إليك نظرة عامة على الملفات والمجلدات الأساسية التي ستعمل معها:

  • public/index.html: ملف HTML الرئيسي لمشروعك. سيقوم React برسم مكوناتك داخل العنصر div الذي يحمل المعرف root في هذا الملف.
  • src/index.js: نقطة الدخول لتطبيق React. هنا يتم رسم React داخل العنصر root في ملف HTML.
  • src/App.js: المكون الافتراضي الذي تقدمه create-react-app. ستقوم بتعديل هذا الملف لإضافة مكوناتك الخاصة ومنطقك.
  • src/App.css: ملف CSS الافتراضي حيث يمكنك تنسيق مكوناتك.

تدعم React استخدام جافا سكريبت (أو TypeScript) وCSS من أجل التنسيق، لذا لن تحتاج إلى التعامل مع تكوينات بناء معقدة في البداية. يتولى create-react-app كل هذا نيابة عنك.

3. بناء أول مكون لك

تُبنى تطبيقات React باستخدام المكونات. المكونات هي اللبنات الأساسية في React ويمكن اعتبارها أجزاء قابلة لإعادة الاستخدام من الكود التي تحدد جزءًا من واجهة المستخدم. دعونا نبدأ بإنشاء مكون بسيط.

الخطوة 1: تعديل مكون App.js

افتح ملف App.js في مجلد src. يحتوي هذا الملف افتراضيًا على بعض الأكواد الأولية. يمكنك حذف كل شيء داخل هذا الملف واستبداله بمكون وظيفي بسيط.

إليك مثال على مكون React الأساسي:

javascript
import React from 'react';
import './App.css';function App() {
return (
<div className=“App”>
<h1>مرحبًا، React!</h1>
<p>أهلاً بك في مشروعك الأول باستخدام React.</p>
</div>
);
}

export default App;

الخطوة 2: إضافة تنسيق للمكون

تدعم React التنسيق باستخدام CSS، ويتضمن الإعداد الافتراضي ملف App.css للتنسيق. يمكنك تعديل هذا الملف لإضافة التنسيق الخاص بك للمكونات.

على سبيل المثال، يمكنك إضافة CSS التالي لتوسيط النص وتغيير لون الخلفية:

css
.App {
text-align: center;
background-color: #f0f0f0;
padding: 20px;
}h1 {
color: #333;
}

سيقوم هذا بتنسيق مكون App ليظهر بتخطيط مركزي وخلفية فاتحة.

الخطوة 3: حفظ وعرض التغييرات

بعد إجراء هذه التعديلات، احفظ الملف. نظرًا لأن الخادم المحلي قيد التشغيل، ستنعكس التغييرات تلقائيًا في المتصفح.

4. استخدام الحالة (State) و الخصائص (Props) في React

تعد إدارة الحالة وتمرير البيانات بين المكونات باستخدام الخصائص من الميزات الأساسية في React. دعونا نعدّل ملف App.js لعرض هذه المفاهيم.

الخطوة 1: إضافة حالة إلى المكون

يمكن للمكونات في React أن تحتوي على حالة (State) تسمح لها بتخزين البيانات التي تتغير بمرور الوقت. إليك كيفية إضافة حالة إلى مكون App باستخدام الـ useState hook:

javascript
import React, { useState } from 'react';
import './App.css';function App() {
const [count, setCount] = useState(0);

return (
<div className=“App”>
<h1>مرحبًا، React!</h1>
<p>أهلاً بك في مشروعك الأول باستخدام React.</p>
<button onClick={() => setCount(count + 1)}>
تم النقر {count} مرة
</button>
</div>
);
}

export default App;

في هذا المثال، نستخدم الـ useState hook لإنشاء متغير حالة يسمى count. يقوم دالة setCount بتحديث الحالة كلما تم النقر على الزر.

الخطوة 2: تمرير الخصائص إلى مكون فرعي

الآن، دعنا ننشئ مكونًا فرعيًا يقبل الخصائص. قم بإنشاء ملف جديد يسمى Greeting.js داخل مجلد src وأضف الكود التالي:

javascript

import React from 'react';

function Greeting(props) {
return <h2>{props.message}</h2>;
}

export default Greeting;

بعد ذلك، استورد هذا المكون الفرعي واستخدمه في ملف App.js:

javascript
import React, { useState } from 'react';
import './App.css';
import Greeting from './Greeting';function App() {
const [count, setCount] = useState(0);

return (
<div className=“App”>
<h1>مرحبًا، React!</h1>
<Greeting message=“هذه رسالة من المكون الأب.” />
<button onClick={() => setCount(count + 1)}>
تم النقر {count} مرة
</button>
</div>
);
}

export default App;

هنا، نقوم بتمرير خاصية اسمها message إلى المكون Greeting، والذي سيعرض الرسالة المرسلة من المكون الأب.

5. الخلاصة

إن بدء مشروع باستخدام React.js أمر بسيط، خاصة مع الأدوات مثل create-react-app التي تقوم بأتمتة الكثير من عملية الإعداد. من خلال اتباع الخطوات الموضحة أعلاه، يمكنك بسرعة إعداد بيئة التطوير، وبناء أول مكون لك، واستخدام ميزات React القوية مثل الحالة (State) والخصائص (Props) لجعل تطبيقك ديناميكيًا.

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

من خلال بساطتها ومرونتها، يمكنك البدء بسرعة في بناء تطبيقات الويب التي يحبها المستخدمون، مما يضمن لك بداية ناجحة في رحلتك كمطور React.

مقالات ذات صلة

Back To Top