Learn React - 10 Code Examples & CST Typing Practice Test

React is a declarative, component-based JavaScript library for building user interfaces, primarily for single-page applications. It allows developers to create reusable UI components and manage application state efficiently.

View all 10 React code examples →

React Counter with useState React Theme Toggle with Context React Todo List with useState React Fetch Data with useEffect React Form Handling React Modal Component React useReducer Counter React Context Counter Example React Tab Component React LocalStorage Counter

Learn REACT with Real Code Examples

Updated Nov 21, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

React Counter with useState

import React, { useState } from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
};

export default Counter;

Demonstrates a simple counter using React useState hook.

Let’s Try →

React Theme Toggle with Context

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

const ThemeContext = createContext();

export const useTheme = () => useContext(ThemeContext);

const ThemeProvider = ({ children }) => {
    const [isDark, setIsDark] = useState(false);
    const toggleTheme = () => setIsDark(!isDark);
    return <ThemeContext.Provider value={{ isDark, toggleTheme }}>{children}</ThemeContext.Provider>;
};

export default ThemeProvider;

Uses React Context and useState to toggle dark/light theme.

Let’s Try →

React Todo List with useState

import React, { useState } from 'react';

const TodoApp = () => {
    const [todos, setTodos] = useState([]);
    const [task, setTask] = useState('');
    const addTodo = () => setTodos([...todos, { task, completed: false }]);
    const toggleTodo = index => {
        const newTodos = [...todos];
        newTodos[index].completed = !newTodos[index].completed;
        setTodos(newTodos);
    };
    return (
        <div>
        <input value={task} onChange={e => setTask(e.target.value)} />
        <button onClick={addTodo}>Add</button>
        <ul>{todos.map((todo, i) => <li key={i} onClick={() => toggleTodo(i)} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>{todo.task}</li>)}</ul>
        </div>
    );
};

export default TodoApp;

Simple Todo list with add, remove, and toggle completion using useState.

Let’s Try →

React Fetch Data with useEffect

import React, { useEffect, useState } from 'react';

const DataFetcher = () => {
    const [data, setData] = useState([]);
    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/posts')
        .then(res => res.json())
        .then(setData);
    }, []);
    return <ul>{data.map(item => <li key={item.id}>{item.title}</li>)}</ul>;
};

export default DataFetcher;

Fetches data from API and displays it using useEffect and useState.

Let’s Try →

React Form Handling

import React, { useState } from 'react';

const FormExample = () => {
    const [name, setName] = useState('');
    const handleSubmit = e => { e.preventDefault(); alert(`Hello, ${name}`); };
    return (
        <form onSubmit={handleSubmit}>
        <input value={name} onChange={e => setName(e.target.value)} placeholder="Enter name" />
        <button type="submit">Submit</button>
        </form>
    );
};

export default FormExample;

Demonstrates controlled form inputs and submission handling.

Let’s Try →

React Modal Component

import React, { useState } from 'react';

const ModalExample = () => {
    const [isOpen, setIsOpen] = useState(false);
    return (
        <div>
        <button onClick={() => setIsOpen(true)}>Open Modal</button>
        {isOpen && <div className="modal"><p>Modal Content</p><button onClick={() => setIsOpen(false)}>Close</button></div>}
        </div>
    );
};

export default ModalExample;

Displays a modal using conditional rendering and state.

Let’s Try →

React useReducer Counter

import React, { useReducer } from 'react';

const reducer = (state, action) => {
    switch(action.type) {
        case 'INCREMENT': return { count: state.count + 1 };
        case 'DECREMENT': return { count: state.count - 1 };
        case 'RESET': return { count: 0 };
        default: return state;
    }
};

const ReducerCounter = () => {
    const [state, dispatch] = useReducer(reducer, { count: 0 });
    return (
        <div>
        <h2>Count: {state.count}</h2>
        <button onClick={() => dispatch({type: 'INCREMENT'})}>+</button>
        <button onClick={() => dispatch({type: 'DECREMENT'})}>-</button>
        <button onClick={() => dispatch({type: 'RESET'})}>Reset</button>
        </div>
    );
};

export default ReducerCounter;

Manages counter state using useReducer hook for more complex logic.

Let’s Try →

React Context Counter Example

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

const CounterContext = createContext();
export const useCounter = () => useContext(CounterContext);

const CounterProvider = ({ children }) => {
    const [count, setCount] = useState(0);
    return <CounterContext.Provider value={{ count, setCount }}>{children}</CounterContext.Provider>;
};

export default CounterProvider;

Shares counter state across components using React Context.

Let’s Try →

React Tab Component

import React, { useState } from 'react';

const Tabs = () => {
    const [active, setActive] = useState('tab1');
    return (
        <div>
        <button onClick={() => setActive('tab1')}>Tab 1</button>
        <button onClick={() => setActive('tab2')}>Tab 2</button>
        <div>{active === 'tab1' ? <p>Content 1</p> : <p>Content 2</p>}</div>
        </div>
    );
};

export default Tabs;

Switches between tab content using useState and conditional rendering.

Let’s Try →

React LocalStorage Counter

import React, { useState, useEffect } from 'react';

const LocalStorageCounter = () => {
    const [count, setCount] = useState(0);
    useEffect(() => {
        const saved = localStorage.getItem('count');
        if (saved) setCount(parseInt(saved, 10));
    }, []);
    useEffect(() => {
        localStorage.setItem('count', count);
    }, [count]);
    return (
        <div>
        <h2>Count: {count}</h2>
        <button onClick={() => setCount(c => c + 1)}>+</button>
        <button onClick={() => setCount(c => c - 1)}>-</button>
        </div>
    );
};

export default LocalStorageCounter;

Persists counter value in localStorage using useEffect.

Let’s Try →

Frequently Asked Questions about React

What is React?

What are the primary use cases for React?

Single-page web applications (SPAs). Dynamic user interfaces for web apps. Mobile apps via React Native. Reusable component libraries. Interactive dashboards and admin panels

What are the strengths of React?

Reusable and maintainable components. High performance with virtual DOM. Large community and ecosystem. Rich tooling and developer support. Supports both web and mobile (React Native)

What are the limitations of React?

Requires build tools (Webpack, Babel) for JSX. Learning curve for hooks and state management. Not a full framework (needs routing, state libraries). Frequent updates may require learning new APIs. SEO optimization requires server-side rendering or frameworks like Next.js

How can I practice React typing speed?

CodeSpeedTest offers 10+ real React code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp Julia View all languages →

Code Sample Descriptions

React Counter with useState

import React, { useState } from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
};

export default Counter;

Demonstrates a simple counter using React useState hook.

Let’s Try →

React Theme Toggle with Context

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

const ThemeContext = createContext();

export const useTheme = () => useContext(ThemeContext);

const ThemeProvider = ({ children }) => {
    const [isDark, setIsDark] = useState(false);
    const toggleTheme = () => setIsDark(!isDark);
    return <ThemeContext.Provider value={{ isDark, toggleTheme }}>{children}</ThemeContext.Provider>;
};

export default ThemeProvider;

Uses React Context and useState to toggle dark/light theme.

Let’s Try →

React Todo List with useState

import React, { useState } from 'react';

const TodoApp = () => {
    const [todos, setTodos] = useState([]);
    const [task, setTask] = useState('');
    const addTodo = () => setTodos([...todos, { task, completed: false }]);
    const toggleTodo = index => {
        const newTodos = [...todos];
        newTodos[index].completed = !newTodos[index].completed;
        setTodos(newTodos);
    };
    return (
        <div>
        <input value={task} onChange={e => setTask(e.target.value)} />
        <button onClick={addTodo}>Add</button>
        <ul>{todos.map((todo, i) => <li key={i} onClick={() => toggleTodo(i)} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>{todo.task}</li>)}</ul>
        </div>
    );
};

export default TodoApp;

Simple Todo list with add, remove, and toggle completion using useState.

Let’s Try →

React Fetch Data with useEffect

import React, { useEffect, useState } from 'react';

const DataFetcher = () => {
    const [data, setData] = useState([]);
    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/posts')
        .then(res => res.json())
        .then(setData);
    }, []);
    return <ul>{data.map(item => <li key={item.id}>{item.title}</li>)}</ul>;
};

export default DataFetcher;

Fetches data from API and displays it using useEffect and useState.

Let’s Try →

React Form Handling

import React, { useState } from 'react';

const FormExample = () => {
    const [name, setName] = useState('');
    const handleSubmit = e => { e.preventDefault(); alert(`Hello, ${name}`); };
    return (
        <form onSubmit={handleSubmit}>
        <input value={name} onChange={e => setName(e.target.value)} placeholder="Enter name" />
        <button type="submit">Submit</button>
        </form>
    );
};

export default FormExample;

Demonstrates controlled form inputs and submission handling.

Let’s Try →

React Modal Component

import React, { useState } from 'react';

const ModalExample = () => {
    const [isOpen, setIsOpen] = useState(false);
    return (
        <div>
        <button onClick={() => setIsOpen(true)}>Open Modal</button>
        {isOpen && <div className="modal"><p>Modal Content</p><button onClick={() => setIsOpen(false)}>Close</button></div>}
        </div>
    );
};

export default ModalExample;

Displays a modal using conditional rendering and state.

Let’s Try →

React useReducer Counter

import React, { useReducer } from 'react';

const reducer = (state, action) => {
    switch(action.type) {
        case 'INCREMENT': return { count: state.count + 1 };
        case 'DECREMENT': return { count: state.count - 1 };
        case 'RESET': return { count: 0 };
        default: return state;
    }
};

const ReducerCounter = () => {
    const [state, dispatch] = useReducer(reducer, { count: 0 });
    return (
        <div>
        <h2>Count: {state.count}</h2>
        <button onClick={() => dispatch({type: 'INCREMENT'})}>+</button>
        <button onClick={() => dispatch({type: 'DECREMENT'})}>-</button>
        <button onClick={() => dispatch({type: 'RESET'})}>Reset</button>
        </div>
    );
};

export default ReducerCounter;

Manages counter state using useReducer hook for more complex logic.

Let’s Try →

React Context Counter Example

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

const CounterContext = createContext();
export const useCounter = () => useContext(CounterContext);

const CounterProvider = ({ children }) => {
    const [count, setCount] = useState(0);
    return <CounterContext.Provider value={{ count, setCount }}>{children}</CounterContext.Provider>;
};

export default CounterProvider;

Shares counter state across components using React Context.

Let’s Try →

React Tab Component

import React, { useState } from 'react';

const Tabs = () => {
    const [active, setActive] = useState('tab1');
    return (
        <div>
        <button onClick={() => setActive('tab1')}>Tab 1</button>
        <button onClick={() => setActive('tab2')}>Tab 2</button>
        <div>{active === 'tab1' ? <p>Content 1</p> : <p>Content 2</p>}</div>
        </div>
    );
};

export default Tabs;

Switches between tab content using useState and conditional rendering.

Let’s Try →

React LocalStorage Counter

import React, { useState, useEffect } from 'react';

const LocalStorageCounter = () => {
    const [count, setCount] = useState(0);
    useEffect(() => {
        const saved = localStorage.getItem('count');
        if (saved) setCount(parseInt(saved, 10));
    }, []);
    useEffect(() => {
        localStorage.setItem('count', count);
    }, [count]);
    return (
        <div>
        <h2>Count: {count}</h2>
        <button onClick={() => setCount(c => c + 1)}>+</button>
        <button onClick={() => setCount(c => c - 1)}>-</button>
        </div>
    );
};

export default LocalStorageCounter;

Persists counter value in localStorage using useEffect.

Let’s Try →

Frequently Asked Questions about React

What is React?

What are the primary use cases for React?

Single-page web applications (SPAs). Dynamic user interfaces for web apps. Mobile apps via React Native. Reusable component libraries. Interactive dashboards and admin panels

What are the strengths of React?

Reusable and maintainable components. High performance with virtual DOM. Large community and ecosystem. Rich tooling and developer support. Supports both web and mobile (React Native)

What are the limitations of React?

How can I practice React typing speed?

CodeSpeedTest offers 10+ real React code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.