Mini Project: Student Management App

Build a multi-page React app with student management features

---

Project Goals

• Multi-page React app
• Pages: Home, Add Student, Student List, About
• Add students via form
• Show student list dynamically
• Navigate between pages using React Router
• Store data in state

Step 1: Project Setup

npx create-react-app student-app
cd student-app
npm install react-router-dom
npm start
            

Browser opens default React app. src/ is the main folder.

Step 2: Create Pages

2.1 Home Page (src/Home.js)

function Home() {
  return (
    <div>
      <h1>Welcome to Student Management App</h1>
      <p>Use the navigation above to add or view students.</p>
    </div>
  );
}

export default Home;
            

2.2 About Page (src/About.js)

function About() {
  return (
    <div>
      <h1>About</h1>
      <p>This is a mini React project for learning purposes.</p>
    </div>
  );
}

export default About;
            

2.3 Add Student Page (src/AddStudent.js)

import { useState } from "react";

function AddStudent({ addStudent }) {
  const [name, setName] = useState("");
  const [className, setClassName] = useState("");

  function handleSubmit(e) {
    e.preventDefault();
    if(name && className){
      addStudent({ name, className });
      setName("");
      setClassName("");
      alert("Student Added Successfully!");
    } else {
      alert("Please fill all fields!");
    }
  }

  return (
    <div>
      <h1>Add Student</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" placeholder="Student Name" value={name} onChange={(e) => setName(e.target.value)} />
        <input type="text" placeholder="Class" value={className} onChange={(e) => setClassName(e.target.value)} />
        <button type="submit">Add Student</button>
      </form>
    </div>
  );
}

export default AddStudent;
            

2.4 Student List Page (src/StudentList.js)

function StudentList({ students }) {
  return (
    <div>
      <h1>Student List</h1>
      {students.length === 0 ? (
        <p>No students added yet.</p>
      ) : (
        <ul>
          {students.map((student, index) => (
            <li key={index}>{student.name} - Class {student.className}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default StudentList;
            

Step 3: Setup Routing in App.js

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import { useState } from "react";
import Home from "./Home";
import About from "./About";
import AddStudent from "./AddStudent";
import StudentList from "./StudentList";

function App() {
  const [students, setStudents] = useState([]);

  function addStudent(student) {
    setStudents([...students, student]);
  }

  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | 
        <Link to="/add">Add Student</Link> | 
        <Link to="/list">Student List</Link> | 
        <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element=<Home /> />
        <Route path="/add" element=<AddStudent addStudent={addStudent} /> />
        <Route path="/list" element=<StudentList students={students} /> />
        <Route path="/about" element=<About /> />
      </Routes>
    </Router>
  );
}

export default App;
            

Step 4: Test the App

• Navigate using links
• Add students on "Add Student" page
• Check "Student List" page → students appear dynamically
• Navigate "About" / "Home" → no page reload

Step 5: Explanation

Part	Explanation
useState in App	Stores student list globally
addStudent function	Updates state when new student is added
Props (students, addStudent)	Pass data & function between components
<Router>	Wraps app for routing
<Routes> & <Route>	Define pages & URLs
<Link>	Navigation without reload
Form in AddStudent	Handles user input, updates parent state
StudentList	Dynamically renders list of students using map
Alerts	Simple feedback for user

Step 6: Bonus (Optional Improvements)

• Delete student → add a button in StudentList
• Edit student → add form prefilled
• useEffect + localStorage → save students after page reload