Playground - 코드 에디터

ReactJSX로 React 컴포넌트 작성

App.jsx

function App() {
  const [count, setCount] = React.useState(0);

return (
    <div style={{
      fontFamily: 'system-ui, sans-serif',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      minHeight: '100vh',
      background: 'linear-gradient(135deg, #06b6d4 0%, #0891b2 100%)'
    }}>
      <div style={{
        background: 'white',
        padding: '2rem',
        borderRadius: '1rem',
        boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
        textAlign: 'center'
      }}>
        <h1 style={{ color: '#1f2937', margin: '0 0 1rem' }}>
          React Playground
        </h1>
        <p style={{ color: '#6b7280', marginBottom: '1rem' }}>
          Count: {count}
        </p>
        <button
          onClick={() => setCount(c => c + 1)}
          style={{
            background: '#06b6d4',
            color: 'white',
            border: 'none',
            padding: '0.5rem 1rem',
            borderRadius: '0.5rem',
            cursor: 'pointer'
          }}
        >
          Increment
        </button>
      </div>
    </div>
  );
}

Preview

css

Console

ReactApp.jsxUTF-8

Ln 1, Col 1Spaces: 2