PixelPioneer

Setting Up Your Environment

If you haven’t set up a React project yet, you can use Create React App:

bashCopy codenpx create-react-app pixel-pioneer
cd pixel-pioneer

Step 2: Create Basic Components

We will create two main components: ArtList and AddArt.

1. Create ArtList.js

In the src folder, create a new file called ArtList.js:

jsxCopy code// src/ArtList.js
import React from 'react';

const ArtList = ({ artProjects, onDelete }) => {
  return (
    <ul>
      {artProjects.map((art, index) => (
        <li key={index}>
          {art}
          <button onClick={() => onDelete(index)}>Delete</button>
        </li>
      ))}
    </ul>
  );
};

export default ArtList;

2. Create AddArt.js

Now create another file called AddArt.js:

jsxCopy code// src/AddArt.js
import React, { useState } from 'react';

const AddArt = ({ onAdd }) => {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputValue) {
      onAdd(inputValue);
      setInputValue('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Add a new pixel art project"
      />
      <button type="submit">Add</button>
    </form>
  );
};

export default AddArt;

Step 3: Main Application Component

Now, let’s integrate everything in App.js.

jsxCopy code// src/App.js
import React, { useState } from 'react';
import ArtList from './ArtList';
import AddArt from './AddArt';

const App = () => {
  const [artProjects, setArtProjects] = useState([]);

  const addArt = (art) => {
    setArtProjects([...artProjects, art]);
  };

  const deleteArt = (index) => {
    const newArtProjects = artProjects.filter((_, i) => i !== index);
    setArtProjects(newArtProjects);
  };

  return (
    <div>
      <h1>PixelPioneer: Pixel Art Manager</h1>
      <AddArt onAdd={addArt} />
      <ArtList artProjects={artProjects} onDelete={deleteArt} />
    </div>
  );
};

export default App;

Step 4: Run Your Application

Now you can start your application. In your terminal, run:

bashCopy codenpm start

Step 5: Explore and Enhance

You now have a basic React application called “PixelPioneer” that allows you to manage a list of pixel art projects. You can enhance it by adding features like:

• Editing art project names
• Adding categories or tags for each project
• Storing projects in local storage for persistence

Summary

In this tutorial, you created a simple project manager app for pixel art with React. You learned how to manage state, create reusable components, and handle user interactions.