React Online

לכתוב, להריץ ולשתף קטעי קוד. בלי שום התקנה.

תצוגה מקדימהתצוגה מקדימה אוטומטית

קונסול

פלט הקונסול יופיע כאן.

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 JS אונליין וצפו בו מתרנדר

קומפיילר ועורך React אונליין וחינמיים. ערכו את App.jsx, והתצוגה המקדימה שלצידו מתרנדרת מחדש רגע אחרי שמפסיקים להקליד: קומפוננטות, props, useState, useEffect וכל hook אחר עובדים כמו באפליקציה אמיתית. אין npm install, אין פרויקט Vite ואין שרת מקומי להפעיל.

ה-JSX שלכם מתקמפל בדפדפן עם esbuild, אותו build שמפעיל את התצוגה המקדימה החיה בשיעורי ה-React של Coddy, מול React 19. הפרויקט כולל ארבעה קבצים, בסידור של אפליקציית Vite: App.jsx, styles.css, main.jsx ו-index.html. שום דבר לא נשלח לשרת, ולכן התצוגה המקדימה עומדת בקצב ההקלדה שלכם.

מה הופך את קומפיילר ה-React האונליין הזה לשימושי

תצוגה מקדימה חיה: האפליקציה נבנית ומתרנדרת מחדש רגע אחרי שמפסיקים להקליד, וכפתור הרענון (או Ctrl+Enter) טוען אותה מחדש מאפס כדי לאפס את ה-state שלה.
React 19 אמיתי עם כל ה-hooks: useState, useEffect, useReducer, useRef, useContext, useMemo וה-hooks המותאמים שלכם.
שגיאות build מצביעות על הקובץ, השורה והעמודה, בדף שגיאה קריא במקום התצוגה המקדימה, כך שסוגר מסולסל חסר אף פעם לא משאיר מסך ריק.
קונסולה מתחת לתצוגה המקדימה מציגה console.log, אזהרות ושגיאות ריצה מהקומפוננטות שלכם.
הקוד שלכם נשמר בדפדפן תוך כדי הקלדה. פתחו את התצוגה המקדימה בלשונית חדשה, או העתיקו והורידו כל קובץ כדי להעביר אותו לפרויקט אמיתי.

מה אפשר לבנות בקומפיילר ה-React האונליין

רשימת משימות: <input> מבוקר, useState לרשימה, ו-.map() שמרנדר <li> אחד לכל משימה עם key.
מונה או טיימר, כדי לראות איך useState ו-useEffect עם פונקציית ניקוי מתנהגים.
קומפוננטות שמדברות זו עם זו: העלו state לקומפוננטת אב והעבירו ערכים ו-callbacks למטה כ-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 לא זמינות, ולכן העורך מתאים במיוחד לקומפוננטות, ל-hooks ול-state, ופחות לאפליקציה מלאה עם תלויות.

זה ה-React Compiler?

לא. ה-React Compiler הוא תוסף build שמוסיף memoization לקומפוננטות שלכם באופן אוטומטי. כאן, קומפילציה פירושה הפיכת JSX ל-JavaScript, ש-esbuild עושה בדפדפן כדי שהתצוגה המקדימה תוכל להריץ אותו. אנשים מחפשים לעיתים קרובות קומפיילר React אונליין כשהם מתכוונים למקום להריץ בו קוד React, וזה בדיוק מה שהדף הזה.

איך ממשיכים ללמוד React אחרי שמנסים את הקומפיילר?

שנו את האפליקציה לדוגמה וצפו במה שקורה בתצוגה המקדימה. כשתרצו מסלול מובנה, קורס ה-React של Coddy מלמד JSX, קומפוננטות, props, state, אירועים ו-hooks בשיעורים קצרים עם אותה תצוגה מקדימה חיה, ואז ממשיך ל-Next.js.