Overview

In the "Magic Garden" project, you will build a virtual garden that evolves in real-time. Flowers in this garden will grow, bloom, and change colors over time, all managed through React's state management and effects. This project will help you understand how to apply <strong>useState</strong> and <strong>useEffect</strong> to create dynamic and interactive applications.

Goals

• Implement state management using <strong>useState</strong> to track changes in the garden.
• Use <strong>useEffect</strong> to handle lifecycle events like growing flowers and changing environmental factors.
• Create a visually engaging and interactive garden simulation.

Instructions

Step 1: Set Up Your Project

 Ensure your React development environment is ready. If needed, set up a new project:

npm create vite@latest magic-garden -- --template react
cd magic-garden
npm install
npm run dev

Step 2: Create the Garden Component 

This component will be the main area where your flowers are displayed and managed.

• Garden.js

import React, { useState, useEffect } from 'react';
import Flower from './Flower';

function Garden() {
  const [flowers, setFlowers] = useState([]);

  useEffect(() => {
    const interval = setInterval(() => {
      const newFlowers = flowers.map(flower => ({
        ...flower,
        size: flower.size * 1.1, // Flowers grow over time
      }));
      setFlowers(newFlowers);
    }, 1000); // Update every second to grow flowers

    return () => clearInterval(interval); // Clean up the interval on component unmount
  }, [flowers]);

  // Function to plant a new flower
  const plantFlower = () => {
    setFlowers([...flowers, { id: flowers.length, size: 1, color: 'pink' }]);
  };

  return (
    <div>
      <button onClick={plantFlower}>Plant a Flower</button>
      <div className="garden">
        {flowers.map(flower => (
          <Flower key={flower.id} size={flower.size} color={flower.color} />
        ))}
      </div>
    </div>
  );
}

export default Garden;

• Flower.js This component will represent an individual flower in the garden.

import React from 'react';

function Flower({ size, color }) {
  return (
    <div style={{
      width: size,
      height: size,
      backgroundColor: color,
      borderRadius: '50%',
    }}></div>
  );
}

export default Flower;

Step 3: Styling Your Garden 

Add basic CSS to your application to make the garden and flowers look more appealing.

.garden {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

button {
  margin: 20px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

Step 4: Testing Your Garden 

Run your application and test planting flowers. Observe how they grow in size over time automatically.

Expanding the Project

As you become more comfortable with state and effects, consider adding features like:

• Different types of flowers with different growth rates and colors.
• Environmental factors like weather conditions that can accelerate or inhibit growth.
• A feature to remove or prune flowers.

This project will help you solidify your understanding of React's state management and effects, providing a fun and interactive way to see these concepts in action. Enjoy building your magical garden and watch it come to life!