MDX

---
import Alert from './components/Alert';
import { CodeBlock } from './components/CodeBlock';
import Chart from './components/Chart';

export const meta = {
  title: 'دليل React',
  description: 'تعلم React من الصفر',
  date: '2024-01-15'
};
---

# مرحباً بك في React

import { useState } from 'react';

## المفاهيم الأساسية

<Alert type="info">
  React مكتبة لبناء واجهات المستخدم
  باستخدام **المكونات** (Components).
</Alert>

### مثال على مكون

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

### رسم بياني تفاعلي

<Chart
  data={[10, 20, 30, 40, 50]}
  labels={['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو']}
  type="bar"
/>

### محتوى ديناميكي

{meta.title} - نشر في {meta.date}

<details>
  <summary>معلومات إضافية</summary>
  
  محتوى إضافي قابل للطي...
  
</details>

<Tabs>
  <Tabs.Item title="JavaScript">
    \`\`\`js
    console.log('Hello!');
    \`\`\`
  </Tabs.Item>
  <Tabs.Item title="TypeScript">
    \`\`\`ts
    const msg: string = 'Hello!';
    console.log(msg);
    \`\`\`
  </Tabs.Item>
</Tabs>