كيفية إنشاء تطبيق ويب باستخدام React.js

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

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

ما هو React.js؟

قبل أن نبدأ بالتنفيذ، دعنا نفهم أولًا: ما هو React؟
React.js هي مكتبة جافا سكريبت مفتوحة المصدر تُستخدم لبناء واجهات المستخدم (UI) بشكل خاص. لا تعتبر إطار عمل كامل مثل Angular أو Vue.js، بل تركز على الطبقة الأمامية فقط، مما يجعلها مرنة وسهلة الدمج مع تقنيات أخرى.

ما يميز React هو استخدامه لـ العنصر (Component) كوحدة بناء أساسية، حيث يمكن تجزئة الواجهة إلى أجزاء قابلة لإعادة الاستخدام، مما يسهل الصيانة والتطوير.

متطلبات العمل مع React

قبل أن تبدأ في إنشاء التطبيق، تحتاج إلى بعض المتطلبات الأساسية:

1. معرفة أساسية بجافا سكريبت (JavaScript)
2. معرفة بأساسيات HTML وCSS
3. Node.js وnpm (أو yarn أو pnpm) مثبتة على جهازك
4. محرر أكواد (VS Code مثلاً)
5. متصفح ويب حديث

الخطوة الأولى: إعداد البيئة المحلية

1. تثبيت Node.js وnpm

قم بزيارة الموقع الرسمي لـ Node.js وتثبيت الإصدار LTS (الأكثر استقرارًا). سيتم تثبيت npm تلقائيًا مع Node.

للتأكد من التثبيت:

bash

node -v

npm -v

2. إنشاء مشروع React باستخدام Create React App

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

تنفيذ الأمر:

bash

npx create-react-app my-first-app

يمكنك استبدال my-first-app باسم مشروعك.

انتظر حتى يتم إنشاء المشروع تلقائيًا، ثم انتقل إليه:

bash

cd my-first-app

ثم ابدأ الخادم المحلي:

bash

npm start

سيقوم هذا الأمر بتشغيل تطبيقك على http://localhost:3000 .

هيكل مشروع React الأساسي

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

my-first-app/

├── node_modules/

├── public/

│ ├── index.html

├── src/

│ ├── App.css

│ ├── App.js

│ ├── App.test.js

│ ├── index.css

│ ├── index.js

│ └── logo.svg

├── package.json

├── README.md

└── yarn.lock (أو package-lock.json)

• src/ : تحتوي على ملفات JavaScript وCSS الخاصة بالتطبيق.
• public/ : تحتوي على ملفات ثابتة مثل index.html.
• package.json : يحتوي على معلومات المشروع والdependencies.

الخطوة الثانية: فهم الأساسيات – المكونات (Components)

ما هو المكون (Component) في React؟

المكون هو كائن JS يُعيد عنصرًا JSX (نحو مشابه لـ HTML)، ويمكنه تضمين حالة (state) وخصائص (props) ويُستخدم لإنشاء واجهات قابلة لإعادة الاستخدام.

مثال بسيط لمكون

افتح الملف src/App.js وغيّره إلى:

jsx

importReactfrom’react’;

functionApp() {

return (

<div>

<h1>مرحبًا بك في تطبيق React الأول!</h1>

<p>هذا هو أول مكون لك.</p>

</div>

);

}

exportdefault App;

سترى التغيير مباشرًا في المتصفح.

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

لنفترض أننا نريد إنشاء مكون جديد لعرض قائمة من العناصر.

1. إنشاء ملف جديد

أنشئ ملفًا جديدًا داخل src/ باسم TodoList.js.

2. كتابة الكود

jsx

⌄

importReactfrom’react’;

functionTodoList({ items }) {

return (

<ul>

{items.map((item, index) => (

<li key={index}>{item}</li>

))}

</ul>

);

}

exportdefault TodoList;

3. استخدام المكون في App.js

عدل ملف App.js كما يلي:

jsx

⌄

importReactfrom’react’;

importTodoListfrom’./TodoList’;

functionApp() {

consttodos = [‘شراء البقالة’, ‘تنظيف المنزل’, ‘مراجعة الدروس’];

return (

<div>

<h1>قائمة المهام</h1>

<TodoList items={todos} />

</div>

);

}

exportdefault App;

الآن ستظهر القائمة في الصفحة!

الخطوة الرابعة: التعامل مع الحالة (State) واستخدام hooks

React يتيح لنا إدارة الحالة (state) داخل المكونات باستخدام Hooks ، وأشهرها هو useState.

مثال: إضافة مهمة جديدة

1. تعديل App.js:

jsx

importReact, { useState } from’react’;

importTodoListfrom’./TodoList’;

functionApp() {

const [task, setTask] = useState(”);

const [tasks, setTasks] = useState([‘قراءة كتاب’, ‘تمرين رياضي’]);

consthandleAddTask = () => {

if (task.trim()) {

setTasks([…tasks, task]);

setTask(”);

}

};

return (

<div>

<h1>قائمة المهام</h1>

<input

type=”text”

value={task}

onChange={(e) => setTask(e.target.value)}

placeholder=”أدخل مهمة جديدة”

/>

<button onClick={handleAddTask}>إضافة</button>

<TodoList items={tasks} />

</div>

);

}

exportdefault App;

الآن يمكنك إضافة مهام جديدة مباشرة من خلال النموذج.

الخطوة الخامسة: تحسين تصميم التطبيق باستخدام CSS

يمكنك تعديل ملف App.css وإضافة أسلوب جذاب.

مثال:

css

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

padding: 20px;

}

input {

padding: 8px;

margin-right: 10px;

}

button {

padding: 8px12px;

background-color: #007bff;

color: white;

border: none;

cursor: pointer;

}

ul {

list-style-type: none;

padding-left: 0;

}

li {

background: #fff;

margin: 5px0;

padding: 10px;

border-radius: 5px;

}

ثم استدعِه في App.js:

jsx

1

import’./App.css’;

الخطوة السادسة: نشر التطبيق على الإنترنت

بعد الانتهاء من التطوير، يمكنك نشر تطبيقك باستخدام خدمات مثل:

• Vercel
• Netlify
• GitHub Pages

1. إنشاء نسخة إنتاجية

bash

1

npm run build

سيتم إنشاء مجلد build/ يحتوي على ملفات جاهزة للنشر.

2. رفع الملفات

يمكنك رفع محتوى المجلد build/ إلى الخدمة التي تختارها.