Category: Examples

This example demonstrates how to toggle between light and dark themes.

jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

function App() {
  const [darkMode, setDarkMode] = useState(false);

  const toggleTheme = () => setDarkMode(!darkMode);

  return (
<div style={{ background: darkMode ? '#333' : '#FFF', color: darkMode ? '#FFF' : '#000', padding: '20px' }}>
  <h1>Theme Switcher</h1>
  <button onClick={toggleTheme}>
    Switch to {darkMode ? 'Light' : 'Dark'} Mode
  </button>
  <p>This is a simple theme switcher example!</p>
</div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

This example shows a simple responsive navigation menu.

jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

function NavBar() {
  const [isOpen, setIsOpen] = useState(false);

  const toggleMenu = () => setIsOpen(!isOpen);

  return (
<nav>
  <button onClick={toggleMenu}>
    {isOpen ? 'Close Menu' : 'Open Menu'}
  </button>
  {isOpen && (
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  )}
</nav>
  );
}

ReactDOM.render(<NavBar />, document.getElementById('root'));

A simple modal component implementation.

jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Modal({ isOpen, onClose }) {
  if (!isOpen) return null;

  return (
<div style={modalStyle}>
  <h2>Modal Title</h2>
  <p>This is a simple modal!</p>
  <button onClick={onClose}>Close</button>
</div>
  );
}

const modalStyle = {
  position: 'fixed',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  padding: '20px',
  backgroundColor: 'white',
  boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
};

function App() {
  const [isModalOpen, setModalOpen] = useState(false);

  return (
<div>
  <h1>Modal Example</h1>
  <button onClick={() => setModalOpen(true)}>Open Modal</button>
  <Modal isOpen={isModalOpen} onClose={() => setModalOpen(false)} />
</div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

This example shows how to create a simple tabbed interface.

jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Tabs() {
  const [activeTab, setActiveTab] = useState('Tab1');

  const renderContent = () => {
switch (activeTab) {
  case 'Tab1':
    return <div>This is content for Tab 1.</div>;
  case 'Tab2':
    return <div>This is content for Tab 2.</div>;
  case 'Tab3':
    return <div>This is content for Tab 3.</div>;
  default:
    return null;
}
  };

  return (
<div>
  <h1>Tabs Example</h1>
  <div>
    <button onClick={() => setActiveTab('Tab1')}>Tab 1</button>
    <button onClick={() => setActiveTab('Tab2')}>Tab 2</button>
    <button onClick={() => setActiveTab('Tab3')}>Tab 3</button>
  </div>
  <div>{renderContent()}</div>
</div>
  );
}

ReactDOM.render(<Tabs />, document.getElementById('root'));

This example demonstrates how to build a basic shopping cart with the ability to add and remove items.

jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

const items = [
  { id: 1, name: 'Apple', price: 1 },
  { id: 2, name: 'Banana', price: 0.5 },
  { id: 3, name: 'Orange', price: 0.8 },
];

function ShoppingCart() {
  const [cart, setCart] = useState([]);

  const addItem = (item) => {
setCart([...cart, item]);
  };

  const removeItem = (id) => {
setCart(cart.filter(item => item.id !== id));
  };

  const total = cart.reduce((acc, item) => acc + item.price, 0);

  return (
<div>
  <h1>Shopping Cart</h1>
  <h2>Items:</h2>
  <ul>
    {items.map(item => (
      <li key={item.id}>
        {item.name} - ${item.price}
        <button onClick={() => addItem(item)}>Add to Cart</button>
      </li>
    ))}
  </ul>
  <h2>Cart:</h2>
  <ul>
    {cart.map(item => (
      <li key={item.id}>
        {item.name} - ${item.price}
        <button onClick={() => removeItem(item.id)}>Remove</button>
      </li>
    ))}
  </ul>
  <h3>Total: ${total.toFixed(2)}</h3>
</div>
  );
}

ReactDOM.render(<ShoppingCart />, document.getElementById('root'));

This example demonstrates communication between parent and child components.

jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

function ParentComponent() {
  const [message, setMessage] = useState('Hello from Parent!');

  return (
<div>
  <h1>Parent Component</h1>
  <ChildComponent message={message} />
  <button onClick={() => setMessage('Message Updated!')}>Update Message</button>
</div>
  );
}

function ChildComponent({ message }) {
  return <h2>Child Component: {message}</h2>;
}

ReactDOM.render(<ParentComponent />, document.getElementById('root'));

A simple counter application using hooks.

jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Counter() {
  const [count, setCount] = useState(0);

  return (
<div>
  <h1>Count: {count}</h1>
  <button onClick={() => setCount(count + 1)}>Increment</button>
  <button onClick={() => setCount(count - 1)}>Decrement</button>
  <button onClick={() => setCount(0)}>Reset</button>
</div>
  );
}

ReactDOM.render(<Counter />, document.getElementById('root'));

This example demonstrates form handling with controlled components.

jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

function FormExample() {
  const [formData, setFormData] = useState({ name: '', email: '' });

  const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (e) => {
e.preventDefault();
alert(Name: ${formData.name}, Email: ${formData.email});
  };

  return (
<form onSubmit={handleSubmit}>
  <h1>Contact Form</h1>
  <input
    type="text"
    name="name"
    placeholder="Name"
    value={formData.name}
    onChange={handleChange}
  />
  <input
    type="email"
    name="email"
    placeholder="Email"
    value={formData.email}
    onChange={handleChange}
  />
  <button type="submit">Submit</button>
</form>
  );
}

ReactDOM.render(<FormExample />, document.getElementById('root'));

This example fetches data from a public API and displays it.

jsxCopy codeimport React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
const fetchUsers = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const data = await response.json();
  setUsers(data);
  setLoading(false);
};
fetchUsers();
  }, []);

  if (loading) return <div>Loading...</div>;

  return (
&lt;div&gt;
  &lt;h1&gt;User List&lt;/h1&gt;
  &lt;ul&gt;
    {users.map(user =&gt; (
      &lt;li key={user.id}&gt;{user.name} - {user.email}&lt;/li&gt;
    ))}
  &lt;/ul&gt;
&lt;/div&gt;
  );
}

ReactDOM.render(<UserList />, document.getElementById('root'));

This example demonstrates managing a list of tasks using state.

jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

function TodoApp() {
  const [tasks, setTasks] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTask = () => {
if (inputValue) {
  setTasks([...tasks, inputValue]);
  setInputValue('');
}
  };

  const removeTask = (index) => {
const newTasks = tasks.filter((_, i) => i !== index);
setTasks(newTasks);
  };

  return (
<div>
  <h1>Todo List</h1>
  <input
    type="text"
    value={inputValue}
    onChange={(e) => setInputValue(e.target.value)}
    placeholder="Add a new task"
  />
  <button onClick={addTask}>Add</button>
  <ul>
    {tasks.map((task, index) => (
      <li key={index}>
        {task} <button onClick={() => removeTask(index)}>Remove</button>
      </li>
    ))}
  </ul>
</div>
  );
}

ReactDOM.render(<TodoApp />, document.getElementById('root'));