React Live

Playground for live editing React code powered by React Live.

Get started

Write your React on the live code-editor:

live-code-editor

Live Editor

const project = 'The SpaceHub Project';

const Greeting = () => <p>Introducing <br></br> {project}</p>;

render(<Greeting />);

Result

Loading...

Examples

Real-Time Clock

Displays the current time and updates every second. It uses useState to manage the time state and useEffect to set up and clean up a timer for real-time updates.

function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}
render(Clock)

Enhanced Clock

Showing both 24-hour and 12-hour formats.

function Clock(props) {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return () => clearInterval(timerID); // Cleanup timer on unmount
  }, []); // Add empty dependency array for one-time setup

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h4>
        Date: {date.toLocaleDateString()}, {date.toLocaleDateString(undefined, { weekday: "long" })}
      </h4>
      <h4>
        Time: {date.toLocaleTimeString([], { hour12: false })} · {date.toLocaleTimeString([])}
      </h4>
    </div>
  );
}

render(<Clock />);

Likes Counter

A simple component that allows users to increase a like count.

const LikeButton = (props: Props) => {
  const [likes, increaseLikes] = React.useState<number>(0);
  
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <h3 style={{
        background: 'darkslateblue',
        color: 'white',
        padding: 8,
        borderRadius: 4,
        textAlign: 'center', // Center text within the h3
      }}>
        {props.label} {likes} Likes
      </h3>
      <button
        className="button button--md button--danger"
        onClick={() => increaseLikes(c => c + 1)}
      >
        {"🤍"}
      </button>
    </div>
  );
};

render(<LikeButton/>);

Likes/Dislikes

Counts for likes and dislikes using useState

const LikeDislikeButton = (props: Props) => {
  const [likes, setLikes] = React.useState<number>(0);
  const [dislikes, setDislikes] = React.useState<number>(0);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <h3 style={{
        background: 'darkslateblue',
        color: 'white',
        padding: 8,
        borderRadius: 4,
        textAlign: 'center',
      }}>
        {props.label} {likes} Likes | {dislikes} Dislikes
      </h3>
      <div>
        <button
          className="button button--md button--outline button--success"
          onClick={() => setLikes(likes + 1)}
          style={{ marginRight: 8 }} // Add gap between buttons
        >
          👍
        </button>
        <button
          className="button button--md button--outline button--danger"
          onClick={() => setDislikes(dislikes + 1)}
        >
          👎
        </button>
      </div>
    </div>
  );
};

render(<LikeDislikeButton/>);

Extra

const project = 'The SpaceHub Project';

const Greeting = () => (
  <div style={{ marginBottom: '1rem' }}>
    <h1>🚀 Welcome to {project}</h1>
  </div>
);

function Clock() {
  const [date, setDate] = React.useState(new Date());

  React.useEffect(() => {
    const timerID = setInterval(() => setDate(new Date()), 1000);
    return () => clearInterval(timerID);
  }, []);

  const formattedDay = date.toLocaleDateString(undefined, { weekday: 'long' });
  const formattedDate = date.toLocaleDateString(undefined, {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });
  const formattedTime = date.toLocaleTimeString(undefined, {
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
  });

  return (
    <div>
      <p><strong>Today:</strong> {formattedDay}, {formattedDate}</p>
      <p><strong>Current Time:</strong> {formattedTime}</p>
    </div>
  );
}

function App() {
  return (
    <div style={{ fontFamily: 'sans-serif', lineHeight: '1.6' }}>
      <Greeting />
      <Clock />
    </div>
  );
}

render(<App />);