⚛️
React Playground
Write JSX and see it render instantly
Format
Reset
JSX Code
React 18
JSX
function App() { const [count, setCount] = React.useState(0); return ( <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}> <h1 style={{ color: '#3b82f6' }}>React Playground</h1> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)} style={{ padding: '10px 20px', backgroundColor: '#3b82f6', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', fontSize: '16px' }} > Click me </button> </div> ); } // Render the component ReactDOM.render(<App />, document.getElementById('root'));
💡 Tip: Use React hooks like useState, useEffect directly
Live Preview