Bookmark this page

React Playground

Edit each snippet below and click "Execute" to see it run in one click.

Table of Contents

Basic Components
Hooks
Render Example

Basic Components

Creating a Functional Component

Basic setup of a React component (no top-level imports).

// A simple functional component
function App() {
  return <h1>Hello World from React!</h1>;
}
console.log("Component loaded successfully");

// A simple functional component
function App() {
  return <h1>Hello World from React!</h1>;
}
console.log("Component loaded successfully");

Props Usage

How props are passed into components.

// Using props in React
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

function App() {
  return <Greeting name="Hi there" />;
}

// Using props in React
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

function App() {
  return <Greeting name="Hi there" />;
}

Hooks

useState Hook: manage state in functional components.

// Demonstration of useState
function App() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
console.log("useState example ready");

// Demonstration of useState
function App() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
console.log("useState example ready");

useEffect Hook: side effects / lifecycle in functional components.

// Demonstration of useEffect for side effects
function App() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setCount((prev) => prev + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return <p>Timer: {count} second(s)</p>;
}
console.log("useEffect example ready");

// Demonstration of useEffect for side effects
function App() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setCount((prev) => prev + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return <p>Timer: {count} second(s)</p>;
}
console.log("useEffect example ready");

Render Example

Render a component that modifies the DOM at #root.

function App() {
  return (
    <div>
      <h2>Rendered by React</h2>
      <p>Try editing this code to see changes!</p>
    </div>
  );
}
console.log("App component rendered successfully");

function App() {
  return (
    <div>
      <h2>Rendered by React</h2>
      <p>Try editing this code to see changes!</p>
    </div>
  );
}
console.log("App component rendered successfully");