Category: Examples

A simple calculator for addition, subtraction, multiplication, and division.

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

function Calculator() {
  const [num1, setNum1] = useState('');
  const [num2, setNum2] = useState('');
  const [result, setResult] = useState(null);

  const handleCalculation = (operation) => {
const number1 = parseFloat(num1);
const number2 = parseFloat(num2);
let res;
switch (operation) {
  case 'add':
    res = number1 + number2;
    break;
  case 'subtract':
    res = number1 - number2;
    break;
  case 'multiply':
    res = number1 * number2;
    break;
  case 'divide':
    res = number2 !== 0 ? number1 / number2 : 'Error';
    break;
  default:
    break;
}
setResult(res);
  };

  return (
<div>
  <h1>Calculator</h1>
  &lt;input type="number" value={num1} onChange={(e) =&gt; setNum1(e.target.value</code></code></pre>

A simple password strength checker.

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

function PasswordStrengthChecker() {
  const [password, setPassword] = useState('');

  const getStrength = () => {
if (password.length < 6) return 'Weak';
if (password.length < 12) return 'Moderate';
return 'Strong';
  };

  return (
<div>
  <h1>Password Strength Checker</h1>
  <input
    type="password"
    value={password}
    onChange={(e) => setPassword(e.target.value)}
    placeholder="Enter your password"
  />
  <p>Password strength: {getStrength()}</p>
</div>
  );
}

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

This example displays a simple contact list.

jsxCopy codeimport React from 'react';
import ReactDOM from 'react-dom';

const contacts = [
  { name: 'Alice', phone: '123-456-7890' },
  { name: 'Bob', phone: '234-567-8901' },
  { name: 'Charlie', phone: '345-678-9012' },
];

function ContactList() {
  return (
<div>
  <h1>Contact List</h1>
  <ul>
    {contacts.map((contact, index) => (
      <li key={index}>
        {contact.name} - {contact.phone}
      </li>
    ))}
  </ul>
</div>
  );
}

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

This example simulates a weather app interface.

jsxCopy codeimport React from 'react';
import ReactDOM from 'react-dom';

function WeatherApp() {
  const weatherData = {
location: 'New York',
temperature: '22°C',
condition: 'Sunny',
  };

  return (
<div>
  <h1>Weather App</h1>
  <h2>{weatherData.location}</h2>
  <p>{weatherData.temperature}</p>
  <p>{weatherData.condition}</p>
</div>
  );
}

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

This example creates a simple responsive grid layout using CSS grid.

jsxCopy codeimport React from 'react';
import ReactDOM from 'react-dom';

function GridLayout() {
  return (
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))', gap: '10px' }}>
  {Array.from({ length: 20 }, (_, index) => (
    <div key={index} style={{ background: '#ccc', padding: '20px', textAlign: 'center' }}>
      Item {index + 1}
    </div>
  ))}
</div>
  );
}

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

A simple countdown timer example.

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

function CountdownTimer() {
  const [time, setTime] = useState(60);

  useEffect(() => {
if (time > 0) {
  const timer = setInterval(() => setTime(time - 1), 1000);
  return () => clearInterval(timer);
}
  }, [time]);

  return (
<div>
  <h1>Countdown Timer</h1>
  <h2>{time} seconds remaining</h2>
</div>
  );
}

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

This example shows a simple image gallery with a click-to-enlarge feature.

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

const images = [
  'https://via.placeholder.com/150',
  'https://via.placeholder.com/200',
  'https://via.placeholder.com/250',
];

function ImageGallery() {
  const [selectedImage, setSelectedImage] = useState(null);

  return (
<div>
  <h1>Image Gallery</h1>
  <div style={{ display: 'flex', gap: '10px' }}>
    {images.map((image, index) => (
      <img
        key={index}
        src={image}
        alt={Gallery ${index}}
        style={{ cursor: 'pointer' }}
        onClick={() => setSelectedImage(image)}
      />
    ))}
  </div>
  {selectedImage && (
    <div onClick={() => setSelectedImage(null)} style={{ cursor: 'pointer', marginTop: '20px' }}>
      <img src={selectedImage} alt="Selected" style={{ width: '300px', height: 'auto' }} />
    </div>
  )}
</div>
  );
}

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

This example demonstrates a star rating system.

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

function StarRating() {
  const [rating, setRating] = useState(0);

  return (
<div>
  <h1>Star Rating</h1>
  {[1, 2, 3, 4, 5].map((star) => (
    <span
      key={star}
      onClick={() => setRating(star)}
      style={{ cursor: 'pointer', color: star <= rating ? 'gold' : 'gray' }}
    >
      ★
    </span>
  ))}
  <p>Your rating: {rating}</p>
</div>
  );
}

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

This example shows how to create a simple accordion component.

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

function Accordion() {
  const [openIndex, setOpenIndex] = useState(null);
  
  const toggleAccordion = (index) => {
setOpenIndex(openIndex === index ? null : index);
  };

  const items = [
{ title: 'Section 1', content: 'Content for section 1.' },
{ title: 'Section 2', content: 'Content for section 2.' },
{ title: 'Section 3', content: 'Content for section 3.' },
  ];

  return (
<div>
  <h1>Accordion Example</h1>
  {items.map((item, index) => (
    <div key={index}>
      <button onClick={() => toggleAccordion(index)}>
        {item.title}
      </button>
      {openIndex === index && <p>{item.content}</p>}
    </div>
  ))}
</div>
  );
}

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