About this sandbox: React
Here you can try React in a constrained runner that favors clarity over project setup. The editing pane is meant for quick edits, quick failures, and quick confirmation when a language rule is fuzzy.
The React page uses Babel in the browser to transform JSX and render a preview in this tab. The page returns output after the runner or preview finishes, which is usually only a few seconds for the kind of examples that belong here.
Hooks must be called in the same order on every render; putting a hook inside a condition is still a bug in a tiny playground. We would rather be blunt about that limit than make the page sound bigger than it is.
Things to watch
The runner is not a production environment. It will not carry durable state between serious sessions, and it should not be asked to handle routing, SSR, package-heavy component libraries, and production performance tuning. Good. Boundaries make bugs easier to see.
The sweet spot is state snippets, props, event handlers, controlled inputs, and rendering reproductions. If your example needs a package manager, a database full of private rows, a web server listening on a port, or special build flags, move it to a local workspace before you draw conclusions.
A small runner should feel disposable. Try the idea, keep the useful lesson, and leave the accidental environment behind when the next step needs real project context.
From editor to output
- Start with the smallest React snippet that can show the behavior.
- Add input only when the program reads it. Empty STDIN is a valid test case.
- Press Run, inspect stdout and stderr, then change one line. That rhythm keeps accidental fixes from hiding the real bug.
The page keeps the run path short. We keep the run cycle compact because this page is meant to answer one question at a time, not manage a full project tree.
That style also makes the result easier to share. A reader can scan a short React snippet, run it, and see the same error without first recreating your directory structure or guessing which dependency you forgot to mention.
A tiny run
The editor itself is the example on this page. Change one visible value first, run or refresh the preview, and confirm that the output changed for the reason you expected.
Then test the part you actually care about. Hooks must be called in the same order on every render; putting a hook inside a condition is still a bug in a tiny playground. If the behavior still looks wrong in a tiny example, you have something worth investigating; if it only breaks in your app, the missing piece is probably project state, packages, or configuration.
Useful jobs
Use it when you are stuck on someone else's machine, teaching a small concept, or separating a language question from a project question. No ceremony.
It also works well as a note-taking tool: paste the final snippet into your lesson, issue, or commit message after you have proved it in the runner.
Keep the example slightly smaller than feels natural. That sounds fussy, but it prevents a common debugging mistake: changing five pieces of code, getting a different result, and no longer knowing which piece mattered.
Reader questions
This FAQ is intentionally mixed: short answers for quick checks, longer notes where React has environment traps. Scan it once before assuming the runner and your local setup behave the same.
Can online compilers run modern React features like Hooks?
Yes, small Hook examples work well in an online React preview. Keep the rules strict: call Hooks at the top level, not inside conditions or loops. A good test is one useState value and one button that changes it. For routing, data loading, or large component trees, use a local app. Start with one component. A good browser-side test changes one prop, one state value, or one DOM element at a time.
Can I use external libraries like Redux or React Router online?
Assume package installs are not available here unless the page already loads a library for the demo. That keeps the run predictable and quick. If your example needs a package manager, create a local project and add the dependency there, then use this page only for the small language part. That keeps the example focused on the bug instead of package installation or module resolution.
Can I save and share my React projects?
Use the page’s share feature if it has one, or keep the snippet in your own files. Do not treat an online editor as the only copy of a project. A shareable React example should include the component, the props it needs, and the exact action that shows the issue. A short setup script is usually safer than trusting browser state to remember your work.
How do I troubleshoot 'unnecessary re-renders' online?
Start by logging when the component renders, then remove pieces until the extra render disappears. Common causes include changing object or array props on every render, setting state in an effect loop, or passing new callback functions everywhere. Online previews are good for tiny reproductions before you profile locally. Check the console before rewriting the component; one earlier error can stop the update you expected.
Is React Compiler stable?
Treat React Compiler as version-sensitive. It is not a general fix for every render problem, and support depends on the React version and tooling you use. For this page, focus on writing normal React clearly. Before enabling compiler features in a real app, check the official React documentation. Profile first, then optimize. A good browser-side test changes one prop, one state value, or one DOM element at a time.
How to compile React JS code?
React code with JSX is usually transformed by tools such as Babel, Vite, Next.js, or a similar build setup. The browser does not understand JSX directly. In an online preview, that transform is handled for you. Locally, create a project and let the build tool compile the JSX. Build errors often point at JSX syntax. Check the console before rewriting the component; one earlier error can stop the update you expected.
Is React compiled or interpreted?
React is a JavaScript library, so the components ultimately run as JavaScript in the browser. JSX is transformed before it runs, and modern JavaScript engines may JIT-compile hot code internally. For day-to-day work, think of React as authored in components and rendered by JavaScript. The build step mostly prepares the code. A good browser-side test changes one prop, one state value, or one DOM element at a time.
Where does the preview run?
The preview runs in the browser, usually after JSX has been transformed. That is enough for props, state, events, and simple effects. It is not the same as a full app with routing, server rendering, authentication, and a production build. Use it to isolate one component problem. Then retest inside your app. Check the console before rewriting the component; one earlier error can stop the update you expected.
Can I import npm packages?
Assume package installs are not available here unless the page already loads a library for the demo. That keeps the run predictable and quick. If your example needs a package manager, create a local project and add the dependency there, then use this page only for the small language part. For online testing, replace the dependency call with a tiny mock value and test your own logic around it.
Why did the screen not update?
Check state first. In React, mutating an object or array without calling the state setter will not reliably update the screen. Make a new value instead: setItems([...items, next]). Also check the console for errors, because one thrown error can stop the render you expected. If props are involved, log the value passed by the parent. Check the console before rewriting the component; one earlier error can stop the update you expected.
How to run React code online?
Write your React component in the editor - function components, hooks, JSX, anything. The page compiles JSX with Babel and renders it live on the right. Press Run when you want to re-render, or watch it update as you type. No npm install, no project setup.
Is this React playground free to use?
Yes, free and browser-based. No signup, no React install, and no project setup. The whole stack - Babel, React 18, ReactDOM - runs in your browser.
Can I use this for React programming practice?
Yes - components, hooks like useState, useEffect, and useMemo, prop passing, conditional rendering, lists, and small forms all work well. For routing, fetching from your own APIs, or testing with Jest, you'll want a real local React project.
Official docs and references
Reference pages are better than folklore when an error message gets specific. Start with official docs, then use tutorials for context once the rule is clear.