---
title: 'JSX و React: تعلم كيفية كتابة كود قابل للصيانة – بطاقة مرجعية'
description: ملخص سريع لـ JSX و React لعام 2025 يغطي المكونات، الخصائص، الحالة، هوكس، الأحداث، العرض الشرطي، وممارسات البرمجة القابلة للصيانة.
url: https://nerdleveltech.com/ar/react-jsx-cheatsheet-2025
language: ar
date: '2025-09-16'
updated: '2025-09-16'
category: frontend
tags:
  - React
  - JSX
  - Frontend
  - JavaScript
  - Cheatsheet
markdown_url: https://nerdleveltech.com/ar/react-jsx-cheatsheet-2025.md
attribution: 'Source: NerdLevelTech — https://nerdleveltech.com/ar/react-jsx-cheatsheet-2025'
terms: https://nerdleveltech.com/llms.txt
---

# JSX و React: تعلم كيفية كتابة كود قابل للصيانة – بطاقة مرجعية

مرحبًا بكم في **React استكشاف!** في هذه المقالة، سنغطي **قيمة React في عام 2025** ونوضح الأساسيات بصيغة **دليل سريع**. توقع وجود أمثلة كود موثقة، شروحات، ومرجعات سريعة لمساعدتك على كتابة **كود React نظيف وقابل للصيانة**. 🚀

![React غطاء دليل سريع](https://nerdleveltech.com/images/React-jsx-vdom.png)

---

## 1. قيمة React في عام 2025

React لا يزال **أحد أكثر مكتبات الواجهة الأمامية هيمنة** بفضل:

- المرونة (مكتبة، وليس إطار عمل كامل).
- بيئة ضخمة (Redux Toolkit, Zustand, React Router, TanStack Query).
- **الميزات الحديثة**: Hooks، التصيير المتزامن، Suspense، ومكونات الخادم.
- الاعتماد على المدى الطويل وطلب الوظائف.

👉 إذا كنت مطور ويب، **تعلم React لا يزال يستحق الجهد**.

---

## 2. أساسيات React

### 2.1 المكونات

الوحدات الأساسية لتطبيقات React.

- **المكونات الوظيفية** (مفضلة)
- **مكونات الفئة** (قديمة، نادرًا ما تحتاجها)

```jsx
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}
```

### 2.2 Virtual DOM & Reconciliation

![React Virtual DOM Illustration](https://nerdleveltech.com/images/React-vdom-flow.png)

- React يحافظ على **Virtual DOM** لتحسين التحديثات.
- يتم مقارنة التغييرات (“diffed”) ويتم تطبيق تحديثات محدودة فقط على الـ DOM الحقيقي.

### 2.3 State & Props

- **Props** → مدخلات من الأب إلى الطفل.
- **State** → بيانات محلية قابلة للتغيير داخل المكون.

```jsx
import { useState } from "React";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
```

### 2.4 Event Handling

```jsx
function ButtonClick() {
  function handleClick() {
    console.log("Button clicked!");
  }
  return <button onClick={handleClick}>Click me</button>;
}
```

---

## 3. شرح JSX

### 3.1 الصيغة الأساسية

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

### 3.2 تضمين التعبيرات

```jsx
const name = "John";
const element = <h1>Hello, {name}!</h1>;
```

### 3.3 الخصائص & بروبز

```jsx
const image = <img src="scenery.jpg" alt="A beautiful scenery" />;
```

⚡ ملاحظة: استخدم **camelCase** للخصائص (`className`, `onClick`).

### 3.4 الأطفال & العلامات المغلقة ذاتياً

```jsx
const element = (
  <div>
    <h1>Welcome</h1>
    <p>This is JSX</p>
  </div>
);

const img = <img src="pic.jpg" alt="scenery" />;
```

### 3.5 المكونات & JSX

```jsx
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}
```

---

## 4. React أساسيات ملخص سريع

![React هوكس ملخص سريع](https://nerdleveltech.com/images/React-hooks-cheatsheet.png)

### 4.1 التصيير في React 18+

```jsx
import React from "React";
import ReactDOM from "React-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
```

### 4.2 بروبز

```jsx
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}
<Welcome name="Jane" />;
```

### 4.3 الحالة

```jsx
import { useState } from "React";

function Clock() {
  const [date, setDate] = useState(new Date());
  return <div>{date.toLocaleTimeString()}</div>;
}
```

### 4.4 دورة الحياة مع Hooks

```jsx
import { useEffect, useState } from "React";

function Clock() {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setDate(new Date()), 1000);
    return () => clearInterval(timer); // cleanup
  }, []);

  return <div>{date.toLocaleTimeString()}</div>;
}
```

### 4.5 العرض الشرطي

```jsx
function Greeting({ isLoggedIn }) {
  return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>;
}
```

---

## 5. Conclusion

JSX يدمج JavaScript + ترميز واجهة المستخدم في تركيب واحد قابل للصيانة. مع ميزات React الحديثة مثل **Hooks, Suspense, و Server Components**, كتابة **كود نظيف وقابل للصيانة** لم تكن أسهل من أي وقت مضى.

✅ احتفظ بهذا الدليل السريع جاهزًا عند بناء مشروع React القادم!

---