React Online Compiler

Compile and run React components online with our JSX editor. Perfect for learning React, testing components, and frontend development practice.

react Online Compiler

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';

// Functional component with hooks
function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('React Developer');
  const [todos, setTodos] = useState([
    { id: 1, text: 'Learn React', completed: false },
    { id: 2, text: 'Build awesome apps', completed: false }
  ]);

// useEffect hook
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

const addTodo = () => {
    const newTodo = {
      id: todos.length + 1,
      text: `New task ${todos.length + 1}`,
      completed: false
    };
    setTodos([...todos, newTodo]);
  };

const toggleTodo = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <Header title="React Online Compiler" />
      
      <Counter count={count} setCount={setCount} />
      
      <UserGreeting name={name} setName={setName} />
      
      <TodoList 
        todos={todos} 
        onToggle={toggleTodo} 
        onAdd={addTodo} 
      />
    </div>
  );
}

// Header component
function Header({ title }) {
  return (
    <header style={{ 
      backgroundColor: '#61dafb', 
      padding: '20px', 
      borderRadius: '8px',
      marginBottom: '20px'
    }}>
      <h1 style={{ margin: 0, color: '#20232a' }}>{title}</h1>
      <p style={{ margin: '10px 0 0 0', color: '#20232a' }}>
        Welcome to React development!
      </p>
    </header>
  );
}

// Counter component
function Counter({ count, setCount }) {
  return (
    <div style={{ 
      backgroundColor: '#f7f7f7', 
      padding: '20px', 
      borderRadius: '8px',
      marginBottom: '20px'
    }}>
      <h2>Counter: {count}</h2>
      <button 
        onClick={() => setCount(count + 1)}
        style={{
          backgroundColor: '#61dafb',
          border: 'none',
          padding: '10px 20px',
          borderRadius: '4px',
          cursor: 'pointer',
          marginRight: '10px'
        }}
      >
        Increment
      </button>
      <button 
        onClick={() => setCount(count - 1)}
        style={{
          backgroundColor: '#ff6b6b',
          border: 'none',
          padding: '10px 20px',
          borderRadius: '4px',
          cursor: 'pointer',
          color: 'white'
        }}
      >
        Decrement
      </button>
    </div>
  );
}

// User greeting component
function UserGreeting({ name, setName }) {
  return (
    <div style={{ 
      backgroundColor: '#e8f5e8', 
      padding: '20px', 
      borderRadius: '8px',
      marginBottom: '20px'
    }}>
      <h2>Hello, {name}!</h2>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
        style={{
          padding: '8px',
          borderRadius: '4px',
          border: '1px solid #ccc',
          marginRight: '10px'
        }}
      />
      <button
        onClick={() => setName('React Developer')}
        style={{
          backgroundColor: '#4caf50',
          border: 'none',
          padding: '8px 16px',
          borderRadius: '4px',
          cursor: 'pointer',
          color: 'white'
        }}
      >
        Reset Name
      </button>
    </div>
  );
}

// Todo list component
function TodoList({ todos, onToggle, onAdd }) {
  return (
    <div style={{ 
      backgroundColor: '#fff3cd', 
      padding: '20px', 
      borderRadius: '8px'
    }}>
      <h2>Todo List ({todos.filter(t => !t.completed).length} remaining)</h2>
      
      <button
        onClick={onAdd}
        style={{
          backgroundColor: '#007bff',
          border: 'none',
          padding: '10px 20px',
          borderRadius: '4px',
          cursor: 'pointer',
          color: 'white',
          marginBottom: '15px'
        }}
      >
        Add Todo
      </button>
      
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {todos.map(todo => (
          <TodoItem 
            key={todo.id} 
            todo={todo} 
            onToggle={onToggle} 
          />
        ))}
      </ul>
    </div>
  );
}

// Todo item component
function TodoItem({ todo, onToggle }) {
  return (
    <li style={{ 
      padding: '10px', 
      backgroundColor: todo.completed ? '#d4edda' : '#f8f9fa',
      marginBottom: '5px',
      borderRadius: '4px',
      display: 'flex',
      alignItems: 'center'
    }}>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => onToggle(todo.id)}
        style={{ marginRight: '10px' }}
      />
      <span style={{ 
        textDecoration: todo.completed ? 'line-through' : 'none',
        color: todo.completed ? '#6c757d' : '#212529'
      }}>
        {todo.text}
      </span>
    </li>
  );
}

// Render the app
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

console.log('React app rendered successfully!');

Output

Click "Run" to execute your code and see the output here...

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';

// useEffect hook
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

const addTodo = () => {
    const newTodo = {
      id: todos.length + 1,
      text: `New task ${todos.length + 1}`,
      completed: false
    };
    setTodos([...todos, newTodo]);
  };

const toggleTodo = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

// Render the app
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

console.log('React app rendered successfully!');

React Compiler Features

React 18 with latest features
JSX syntax highlighting
Hooks and functional components
Live component rendering
State management examples

About React

React is a popular JavaScript library for building user interfaces, especially web applications. Developed by Facebook, it uses a component-based architecture and virtual DOM for efficient rendering.

React's declarative approach makes it easy to create interactive UIs. You describe what the UI should look like for any given state, and React efficiently updates the DOM when data changes.

Use our React online compiler to learn component development, practice hooks, or prototype React applications without setting up a local development environment.