React online editor

Write, Run & Share React code online using OneCompiler's React online editor for free. It's one of the robust, feature-rich online editors for React. Getting started with the OneCompiler's React online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'React' and start writing code to learn and test online without worrying about tedious process of installation.

About React

React is a popular open-source JavaScript library developed by Facebook for building user interfaces, especially for single-page applications. It uses a component-based architecture where UI is broken into reusable, self-contained pieces. React's virtual DOM efficiently updates only the parts of the page that change, resulting in fast performance.

Syntax help

JSX

JSX is a syntax extension that lets you write HTML-like markup directly in JavaScript, making component code more readable and expressive. You can embed any JavaScript expression inside curly braces, and JSX attributes use camelCase naming (e.g., className instead of class). Fragments <>...</> let you return multiple elements without a wrapper div.

// Basic JSX with expressions
const element = <h1>Hello, {name}!</h1>;
const math = <p>2 + 2 = {2 + 2}</p>;

// Attributes: className, htmlFor, onClick, onChange, style (object)
<div className="card" style={{ backgroundColor: 'blue', fontSize: '16px' }}>
  <input type="text" placeholder="Enter text" />
</div>

// Fragments (return multiple elements)
<>
  <h1>Title</h1>
  <p>Paragraph</p>
</>

Components

Components are the building blocks of React applications, encapsulating UI and logic into reusable pieces. Function components accept props as a parameter and return JSX. The children prop allows components to wrap other content.

// Function component with props
function Welcome({ name, age = 0 }) {
  return <h1>Hello, {name}! Age: {age}</h1>;
}

// Component with children
function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </div>
  );
}

// Usage
<Welcome name="John" age={25} />
<Card title="My Card"><p>Card content</p></Card>

useState Hook

The useState hook lets function components manage local state, returning a state value and a setter function. For updates based on previous state, pass a function to the setter. Always spread objects/arrays when updating to avoid mutating state directly.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(prev => prev + 1)}>+</button>
    </div>
  );
}

// Object state (spread previous values)
const [form, setForm] = useState({ name: '', email: '' });
const handleChange = (e) => {
  setForm(prev => ({ ...prev, [e.target.name]: e.target.value }));
};

// Array state
const [items, setItems] = useState([]);
const addItem = (item) => setItems(prev => [...prev, item]);
const removeItem = (id) => setItems(prev => prev.filter(i => i.id !== id));

useEffect Hook

The useEffect hook handles side effects like data fetching, subscriptions, or DOM manipulation. Control when it runs with the dependency array: empty [] for once on mount, or list dependencies to re-run when they change. Return a cleanup function for subscriptions or timers.

import { useState, useEffect } from 'react';

// Run once on mount
useEffect(() => {
  fetchData();
}, []);

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

// With cleanup (timers, subscriptions)
useEffect(() => {
  const timer = setInterval(() => setSeconds(s => s + 1), 1000);
  return () => clearInterval(timer);  // Cleanup on unmount
}, []);

// Data fetching pattern
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => { if (!cancelled) { setUser(data); setLoading(false); }});
    return () => { cancelled = true; };
  }, [userId]);

  if (loading) return <p>Loading...</p>;
  return <div>{user.name}</div>;
}

Event Handling

React events use camelCase naming and pass functions as handlers. The event object provides target.value for inputs, preventDefault() for forms, and stopPropagation() to stop bubbling.

// Click handler
<button onClick={() => console.log('Clicked!')}>Click</button>
<button onClick={handleClick}>Click</button>

// Form events
const handleSubmit = (e) => {
  e.preventDefault();
  console.log('Submitted');
};
const handleChange = (e) => console.log(e.target.value);

<form onSubmit={handleSubmit}>
  <input onChange={handleChange} onFocus={...} onBlur={...} />
</form>

// Passing arguments
{items.map(item => (
  <button key={item.id} onClick={() => handleDelete(item.id)}>Delete</button>
))}

// Keyboard events
<input onKeyDown={(e) => e.key === 'Enter' && handleSubmit()} />

Conditional Rendering

Use ternary operators for if-else, logical AND && for show-or-nothing, and early returns for loading/error states. Note that 0 && <Component /> renders "0", so use explicit boolean checks.

// Ternary (if-else)
{isLoggedIn ? <Dashboard /> : <Login />}

// Logical AND (show or nothing)
{show && <Modal />}
{items.length > 0 && <ItemList items={items} />}  // Avoid rendering 0

// Early return for loading/error
function UserProfile({ user }) {
  if (!user) return <p>Loading...</p>;
  return <div>{user.name}</div>;
}

// Object mapping for multiple conditions
const icons = { success: <CheckIcon />, error: <ErrorIcon /> };
return icons[status] || <DefaultIcon />;

Lists and Keys

Use map() to render arrays. Each item needs a unique key prop (use IDs, not indices) so React can efficiently track changes. Keys only need to be unique among siblings.

function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

// With filtering
{users.filter(u => u.active).map(u => <UserCard key={u.id} user={u} />)}

// Empty state
{items.length === 0 ? <p>No items</p> : items.map(...)}

Forms

Controlled components keep form data in React state. Bind input value to state and update via onChange. Handle checkboxes with checked property.

function Form() {
  const [form, setForm] = useState({ email: '', password: '', remember: false });

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setForm(prev => ({ ...prev, [name]: type === 'checkbox' ? checked : value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(form);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" value={form.email} onChange={handleChange} />
      <input name="password" type="password" value={form.password} onChange={handleChange} />
      <label>
        <input name="remember" type="checkbox" checked={form.remember} onChange={handleChange} />
        Remember me
      </label>
      <select value={form.country} onChange={handleChange} name="country">
        <option value="us">USA</option>
        <option value="uk">UK</option>
      </select>
      <button type="submit">Submit</button>
    </form>
  );
}

useContext Hook

Context passes data through the component tree without prop drilling. Create with createContext, provide with Provider, consume with useContext. Ideal for themes, auth, or language preferences.

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext('light');

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  const toggle = () => setTheme(t => t === 'light' ? 'dark' : 'light');
  return (
    <ThemeContext.Provider value={{ theme, toggle }}>
      {children}
    </ThemeContext.Provider>
  );
}

// Custom hook pattern (recommended)
function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) throw new Error('useTheme must be within ThemeProvider');
  return context;
}

// Usage in component
function ThemedButton() {
  const { theme, toggle } = useTheme();
  return <button onClick={toggle}>Theme: {theme}</button>;
}

Other Essential Hooks

React provides additional hooks for refs, complex state, and performance optimization. Use useRef for DOM access or mutable values that don't trigger re-renders. Use useReducer for complex state logic, and useMemo/useCallback for performance optimization.

import { useRef, useReducer, useMemo, useCallback, memo } from 'react';

// useRef - DOM access, mutable values without re-render
const inputRef = useRef(null);
const focusInput = () => inputRef.current.focus();
<input ref={inputRef} />

// useReducer - complex state logic
function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    default: return state;
  }
}
const [state, dispatch] = useReducer(reducer, { count: 0 });
<button onClick={() => dispatch({ type: 'increment' })}>+</button>

// useMemo - memoize expensive calculations
const filtered = useMemo(() => items.filter(i => i.active), [items]);
const total = useMemo(() => items.reduce((sum, i) => sum + i.price, 0), [items]);

// useCallback - memoize functions (for child components)
const handleClick = useCallback(() => console.log('clicked'), []);
const handleDelete = useCallback((id) => setItems(prev => prev.filter(i => i.id !== id)), []);

// memo - prevent child re-renders
const MemoizedChild = memo(function Child({ onClick }) {
  return <button onClick={onClick}>Click</button>;
});

Custom Hooks

Custom hooks extract reusable stateful logic into functions starting with "use". Each component using a custom hook gets its own independent state.

// useToggle
function useToggle(initial = false) {
  const [value, setValue] = useState(initial);
  const toggle = () => setValue(v => !v);
  return [value, toggle];
}

// useLocalStorage
function useLocalStorage(key, initial) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initial;
  });
  useEffect(() => localStorage.setItem(key, JSON.stringify(value)), [key, value]);
  return [value, setValue];
}

// useFetch
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch(url).then(r => r.json()).then(d => { setData(d); setLoading(false); });
  }, [url]);
  return { data, loading };
}

// Usage
const [isOpen, toggleOpen] = useToggle();
const [theme, setTheme] = useLocalStorage('theme', 'light');
const { data, loading } = useFetch('/api/users');