Skip to main content
LiveCodes provides full support for React with JSX/TSX, automatic imports, and the official React Compiler for optimized rendering.

​
Configuration

Language Name: react (JSX) or react-tsx (TSX)
File Extensions: .react.jsx, .react-jsx (JSX), .react.tsx (TSX)
Editor: Script editor
Compiler: Babel with React Compiler plugin
Runtime: React 18+ with automatic JSX runtime

​
Features

​
JSX Syntax

Write components with JSX: 
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div className="counter">
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <button onClick={() => setCount(count - 1)}>
        Decrement
      </button>
    </div>
  );
}

export default Counter;

​
TypeScript Support

Use TypeScript with React (react-tsx): 
import { useState } from 'react';

interface CounterProps {
  initialCount?: number;
  step?: number;
  onCountChange?: (count: number) => void;
}

function Counter({ 
  initialCount = 0, 
  step = 1,
  onCountChange 
}: CounterProps) {
  const [count, setCount] = useState(initialCount);
  
  const handleIncrement = () => {
    const newCount = count + step;
    setCount(newCount);
    onCountChange?.(newCount);
  };
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>+{step}</button>
    </div>
  );
}

export default Counter;

​
React Compiler

LiveCodes uses the official React Compiler (formerly React Forget) to automatically optimize your components: 
import { useState } from 'react';

// This component is automatically optimized by React Compiler
function ExpensiveList({ items }) {
  const [filter, setFilter] = useState('');
  
  // No need for useMemo - React Compiler handles it
  const filtered = items.filter(item => 
    item.toLowerCase().includes(filter.toLowerCase())
  );
  
  return (
    <div>
      <input 
        value={filter} 
        onChange={e => setFilter(e.target.value)}
        placeholder="Filter items..."
      />
      <ul>
        {filtered.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}
The React Compiler automatically memoizes components and values, reducing the need for manual useMemo and useCallback optimization.

​
Hooks

Full React Hooks support: 
import { useState, useEffect, useRef, useCallback } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const mountedRef = useRef(true);
  
  const fetchUser = useCallback(async () => {
    setLoading(true);
    const response = await fetch(`/api/users/${userId}`);
    const data = await response.json();
    
    if (mountedRef.current) {
      setUser(data);
      setLoading(false);
    }
  }, [userId]);
  
  useEffect(() => {
    fetchUser();
    return () => {
      mountedRef.current = false;
    };
  }, [fetchUser]);
  
  if (loading) return <div>Loading...</div>;
  if (!user) return <div>User not found</div>;
  
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

​
Fragments

Return multiple elements: 
function UserInfo({ user }) {
  return (
    <>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      <p>{user.role}</p>
    </>
  );
}

// Or with explicit Fragment
import { Fragment } from 'react';

function UserList({ users }) {
  return (
    <Fragment>
      {users.map(user => (
        <UserInfo key={user.id} user={user} />
      ))}
    </Fragment>
  );
}

​
Context API

Share data across components: 
import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

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

function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  
  return (
    <button 
      onClick={toggleTheme}
      style={{
        background: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#000' : '#fff',
      }}
    >
      Toggle Theme
    </button>
  );
}

function App() {
  return (
    <ThemeProvider>
      <ThemedButton />
    </ThemeProvider>
  );
}

export default App;

​
Compiler Configuration

Configure Babel and React Compiler options: 
{
  "customSettings": {
    "babel": {
      "sourceMaps": true,
      "comments": false
    },
    "@babel/preset-react": {
      "runtime": "automatic",
      "development": false
    },
    "babel-plugin-react-compiler": {
      "compilationMode": "annotation"
    }
  }
}

​
Preset Configurations

{
  "customSettings": {
    "babel": {
      "presets": ["env", "react"],
      "plugins": [],
      "filename": "script.tsx"
    }
  }
}

​
External Libraries

Import React ecosystem libraries: 
import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { motion } from 'framer-motion';
import styled from 'styled-components';

const Button = styled.button`
  background: #3b82f6;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  
  &:hover {
    background: #2563eb;
  }
`;

function AnimatedCounter() {
  const [count, setCount] = useState(0);
  
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      <h2>{count}</h2>
      <Button onClick={() => setCount(count + 1)}>
        Increment
      </Button>
    </motion.div>
  );
}

​
Example Projects

​
Todo List

import { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');
  
  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, { id: Date.now(), text: input, done: false }]);
      setInput('');
    }
  };
  
  const toggleTodo = (id) => {
    setTodos(todos.map(todo => 
      todo.id === id ? { ...todo, done: !todo.done } : todo
    ));
  };
  
  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };
  
  return (
    <div className="todo-app">
      <h1>Todo List</h1>
      <div>
        <input 
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && addTodo()}
          placeholder="Add a todo..."
        />
        <button onClick={addTodo}>Add</button>
      </div>
      <ul>
        {todos.map(todo => (
          <li key={todo.id} style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>
            <input 
              type="checkbox"
              checked={todo.done}
              onChange={() => toggleTodo(todo.id)}
            />
            {todo.text}
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

​
Data Fetching

import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <strong>{user.name}</strong> - {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

​
Code Formatting

Automatic formatting with Prettier: 
// Before formatting
function App(){return(<div><h1>Hello</h1><p>World</p></div>);}

// After formatting (Ctrl+Shift+F)
function App() {
  return (
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
  );
}

​
Best Practices

Use PascalCase for component names:
// Good
function UserProfile() { }
const TodoItem = () => { };

// Bad
function userProfile() { }
const todoitem = () => { };
Always provide unique keys when rendering lists:
// Good
{items.map(item => (
  <Item key={item.id} {...item} />
))}

// Bad - using index as key
{items.map((item, index) => (
  <Item key={index} {...item} />
))}
Destructure props for cleaner code:
// Good
function User({ name, email, age }) {
  return <div>{name}</div>;
}

// Verbose
function User(props) {
  return <div>{props.name}</div>;
}

​
Limitations

No Server Components: React Server Components are not supported. All components are client components.
React Native components can use the react-native language for React Native specific APIs.

TypeScript

Use TypeScript with React

Vue

Alternative framework

Svelte

Compiler-based framework

Solid

Fine-grained reactivity

Build docs developers (and LLMs) love

Get started for freeTalk to us