haithamalgobery5@gmail.com
صورة المقالة

ماهي React js

كل ما تحتاج معرفته عن تقنية React: من البداية إلى الاحتراف

نشر : قبل شهر واحدة

مقدمة

في عالم تطوير الواجهات الأمامية (Front-End)، أصبحت مكتبة React واحدة من أقوى وأشهر الأدوات لبناء تطبيقات ويب تفاعلية وسريعة. طوّرتها شركة Meta (Facebook) وتتميز بسرعة الأداء، سهولة الصيانة، وإمكانية إعادة استخدام المكونات.

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

ما هي React؟

React هي مكتبة JavaScript لبناء واجهات المستخدم (User Interfaces)، تعتمد على مفهوم المكونات (Components). أي أن كل جزء من واجهة المستخدم يتم تمثيله بوحدة مستقلة يمكن إعادة استخدامها.

لماذا React؟

مفاهيم أساسية في React

1. المكونات (Components)

كل واجهة تتكون من مكونات. يمكن أن تكون مكونات:

jsx
function Welcome(props) { return <h1>مرحباً، {props.name}</h1>; }

2. JSX – JavaScript XML

JSX هي صيغة خاصة تسمح بكتابة كود HTML داخل JavaScript:

jsx
const element = <h1>Hello, world!</h1>;

3. Props – الخصائص

تُستخدم لتمرير البيانات من مكون إلى آخر:

jsx
<Welcome name="هيثم" />

4. State – الحالة

تُستخدم لتخزين البيانات داخل المكون والتحكم في التفاعل:

jsx
const [count, setCount] = useState(0);

5. Events – الأحداث

تعامل React مع الأحداث مشابه للـ HTML، لكن مع بعض التعديلات:

jsx
<button onClick={() => alert("تم الضغط")}>اضغط هنا</button>

استخدام React: كيف تبدأ؟

1. تثبيت البيئة

bash
npx create-react-app my-app

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

bash
my-app/ ├── public/ ├── src/ │ ├── App.js ← المكون الرئيسي │ ├── index.js ← نقطة البداية

التفاعل مع المستخدم

- استخدام useState:

jsx
const [name, setName] = useState("");

- استخدام useEffect (لإجراء عمليات عند التحديث أو التحميل):

jsx
useEffect(() => { console.log("تم تحميل المكون"); }, []);

التعامل مع القوائم والتكرار

jsx
const products = ["كتاب", "قلم", "حاسوب"]; return ( <ul> {products.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> );

الربط مع API خارجي

jsx
useEffect(() => { fetch("https://api.example.com/products") .then(response => response.json()) .then(data => setProducts(data)); }, []);

إدارة الحالة المتقدمة – Context API

تُستخدم لمشاركة البيانات بين المكونات بدون تمرير props يدويًا.

jsx
const UserContext = createContext();

استخدام React Router

للتنقل بين الصفحات في تطبيق واحد (SPA):

bash
npm install react-router-dom
jsx
import { BrowserRouter, Route, Routes } from 'react-router-dom'; <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </BrowserRouter>

مكتبات مساعدة

نصائح للمحترفين

خاتمة

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

;

محتوى ذات صلة

...
الفرق بين React و Next.js: دليلك للتمكين والاختيار الواعي

ستتعر في هذه المقالة عن الفرق بين React و Nextjs واين تختار

عرض المحتوى
...
ما هو API و ماهي تقنية ASP.net core

ستتعرف على API وكيف تستخدمة و ايضا ستتعرف على تقنية Asp.net core API وفائدتها

عرض المحتوى
Logoسوفت كور

"نحن لا نكتب مجرد أسطر برمجية، بل نبني حلولًا تصنع الفارق في حياة الأفراد وأعمالهم. في كل مشروع نُنفّذه، ندمج بين كثير من الإبداع وقليل من التعقيد، نُراعي التفاصيل الدقيقة، ونُعلي من قيمة الأداء. نؤمن أن البرمجيات الناجحة لا تُقاس بعدد الأسطر، بل بتأثيرها، استقرارها، وسهولة استخدامها. من خلال رؤيتنا العميقة للتقنية، وخبرتنا المتراكمة في تقديم حلول مبتكرة، نلتزم دائمًا بأن يكون ما نقدمه أكثر من منتج… نلتزم أن نقدّم تجربة استثنائية تثق بها وتفخر بها."

روابط الموقع

من نحن الخدمات المفكرة التخصصات اسئلة شائعة التواصل

العنوان

صنعاء اليمن

البريد الالكتروني

haithamalgobery5@gmail.com

رقم الهاتف الثابت

+967771892497

الثقة تبدأ من أول سطر برمجي.

نحن لا ننجز مشاريع فقط، بل نبني نجاحات مستدامة , نكتب الكود بثقة، ونبني المستقبل باحتراف ,نحن شركاؤك في التحوّل الرقمي الحقيقي
التوصل عبر +967771892497