CodeCompass

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 code-compass
cd code-compass

Step 2: Create Basic Components

We’ll create two main components: ProjectList and AddProject.

1. Create ProjectList.js

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

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

const ProjectList = ({ projects, onDelete }) => {
  return (
    <ul>
      {projects.map((project, index) => (
        <li key={index}>
          {project.name} - {project.description}
          <button onClick={() => onDelete(index)}>Delete</button>
        </li>
      ))}
    </ul>
  );
};

export default ProjectList;

2. Create AddProject.js

Now create another file called AddProject.js:

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

const AddProject = ({ onAdd }) => {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (name && description) {
      onAdd({ name, description });
      setName('');
      setDescription('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Project Name"
      />
      <input
        type="text"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        placeholder="Project Description"
      />
      <button type="submit">Add Project</button>
    </form>
  );
};

export default AddProject;

Step 3: Main Application Component

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

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

const App = () => {
  const [projects, setProjects] = useState([]);

  const addProject = (project) => {
    setProjects([...projects, project]);
  };

  const deleteProject = (index) => {
    const newProjects = projects.filter((_, i) => i !== index);
    setProjects(newProjects);
  };

  return (
    <div>
      <h1>CodeCompass: Project Manager</h1>
      <AddProject onAdd={addProject} />
      <ProjectList projects={projects} onDelete={deleteProject} />
    </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 “CodeCompass” that allows you to manage a list of coding projects. You can enhance it by adding features like:

• Editing project details
• Filtering projects by category or status
• Persisting project data in local storage

Summary

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