ساحة React

اكتب الأكواد البرمجية، شغّلها وشاركها - بدون أي إعداد.

معاينةمعاينة تلقائية

وحدة التحكم

ستظهر مخرجات وحدة التحكم هنا.

import { useState } from 'react';

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

export default function App() {
    const [tasks, setTasks] = useState(['Learn JSX', 'Try useState']);
    const [text, setText] = useState('');

    const addTask = () => {
        if (!text.trim()) return;
        setTasks([...tasks, text.trim()]);
        console.log('Added:', text.trim());
        setText('');
    };

    return (
        <main className="app">
            <h1>Hello, React!</h1>
            <Counter label="Clicks" />
            <div className="row">
                <input
                    value={text}
                    onChange={(e) => setText(e.target.value)}
                    onKeyDown={(e) => e.key === 'Enter' && addTask()}
                    placeholder="Add a task"
                />
                <button onClick={addTask}>Add</button>
            </div>
            <ul>
                {tasks.map((task, i) => (
                    <li key={i}>{task}</li>
                ))}
            </ul>
        </main>
    );
}

اكتب React عبر الإنترنت وشاهده يُعرض أمامك

ساحة React مجانية عبر الإنترنت. عدّل App.jsx وستُعاد المعاينة المجاورة بعد لحظة من توقفك عن الكتابة: المكونات والخصائص (props) وuseState وuseEffect وسائر الخطافات تعمل كما تعمل في تطبيق حقيقي. لا حاجة إلى npm install ولا إلى مشروع Vite ولا إلى تشغيل خادم محلي.

يُترجَم كود JSX في متصفحك باستخدام esbuild لإصدار React 19، وهو البناء نفسه الذي يشغّل المعاينة الحية في دروس React على Coddy. يتكون المشروع من أربعة ملفات مرتبة مثل تطبيق Vite: App.jsx وstyles.css وmain.jsx وindex.html. لا يُرسَل أي شيء إلى خادم، لذلك تواكب المعاينة سرعة كتابتك.

ما الذي يجعل ساحة React هذه مفيدة

معاينة حية: يُعاد بناء التطبيق وعرضه بعد لحظة من توقفك عن الكتابة، وزر التحديث (أو Ctrl+Enter) يعيد تركيبه من البداية لإعادة ضبط حالته.
React 19 حقيقي مع جميع الخطافات: useState وuseEffect وuseReducer وuseRef وuseContext وuseMemo وخطافاتك المخصصة.
تشير أخطاء البناء إلى الملف والسطر والعمود في صفحة خطأ واضحة تظهر مكان المعاينة، فلا يتركك قوس معقوف ناقص أمام شاشة فارغة أبدًا.
تعرض وحدة التحكم أسفل المعاينة مخرجات console.log والتحذيرات وأخطاء التشغيل القادمة من مكوناتك.
يُحفظ كودك في متصفحك أثناء الكتابة. افتح المعاينة في علامة تبويب جديدة، أو انسخ أي ملف ونزّله لنقله إلى مشروع حقيقي.

ما يمكنك بناؤه في ساحة React

قائمة مهام: عنصر <input> متحكم به، وuseState للقائمة، و.map() يعرض عنصر <li> لكل مهمة مع key.
عداد أو مؤقت، لترى كيف يتصرف useState وuseEffect مع دالة تنظيف.
مكونات تتواصل فيما بينها: ارفع الحالة إلى مكون أب ومرّر القيم ودوال الاستدعاء إلى الأسفل عبر الخصائص (props).
مبدّل سمات باستخدام createContext وuseContext، بتنسيقات من styles.css.

الأسئلة الشائعة حول ساحة React عبر الإنترنت

هل ساحة React عبر الإنترنت مجانية؟

نعم. هي مجانية ودون تسجيل: افتح الصفحة وعدّل الكود وستتحدث المعاينة.

هل أحتاج إلى Node.js أو npm أو Vite لتشغيل React هنا؟

لا. يُترجَم JSX في متصفحك وReact محمّل مسبقًا في المعاينة، لذلك لا تحتاج إلى تثبيت Node.js ولا إلى تشغيل npm create vite ولا إلى تشغيل خادم تطوير. يعمل أي متصفح حديث على Windows أو macOS أو Linux أو Chromebook.

هل يمكنني استيراد حزم npm؟

يمكنك استيراد react وreact-dom/client، وملفاتك الخاصة بمسار نسبي مثل import App from './App.jsx'. أما حزم npm الأخرى مثل React Router أو Axios فغير متاحة، لذلك تناسب الساحة المكونات والخطافات والحالة أكثر من تطبيق كامل له اعتماديات.

هل هذا هو React Compiler؟

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

كيف أتعلم React بعد تجربة الساحة؟

غيّر التطبيق التجريبي وراقب ما يحدث في المعاينة. وعندما تريد مسارًا منظمًا، تعلّمك دورة React من Coddy لغة JSX والمكونات والخصائص والحالة والأحداث والخطافات في دروس قصيرة مع المعاينة الحية نفسها، ثم تنتقل إلى Next.js.