Build a simple Student Management App using React to understand JSX, props, components, and React Router. Ideal for beginners and classroom teaching.
Features:
-
View student list
-
Add a new student
-
Learn routing, props, state, and component interactions
Project Structure
npx create-react-app student-management
cd student-management
npm install react-router-dom
npm start
src/
├── App.js
├── index.js
├── components/ │
├── Navbar.js │
├── StudentList.js │
├── StudentCard.js │
└── AddStudentForm.js
├── pages/ │
├── Home.js │
├── Students.js │
└── AddStudent.js
1. index.js
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
2. App.js
import React, { useState } from "react";
import { Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./pages/Home";
import Students from "./pages/Students";
import AddStudent from "./pages/AddStudent";
function App() {
const [students, setStudents] = useState([
{ id: 1, name: "Aman", age: 23 },
{ id: 2, name: "Anjali", age: 21 }
]);
return (
<div>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/students" element={<Students students={students} />} />
<Route path="/add-student" element={<AddStudent setStudents={setStudents} />} />
</Routes>
</div>
);
}
export default App;
3. components/Navbar.js
import React from "react";
import { Link } from "react-router-dom";
const Navbar = () => {
return (
<nav style={{ padding: "1rem", backgroundColor: "#eee", display: "flex", gap: "1rem" }}>
<Link to="/">Home</Link>
<Link to="/students">Students</Link>
<Link to="/add-student">Add Student</Link>
</nav>
);
};
export default Navbar;
4. pages/Home.js
import React from "react";
const Home = () => {
return <h2>Welcome to the Student Management System</h2>;
};
export default Home;
5. pages/Students.js
import React from "react";
import StudentList from "../components/StudentList";
const Students = ({ students }) => {
return (
<div>
<h2>Student List</h2>
<StudentList students={students} />
</div>
);
};
export default Students;
6. components/StudentList.js
import React from "react";
import StudentCard from "./StudentCard";
const StudentList = ({ students }) => {
return (
<div>
{students.map((student) => (
<StudentCard key={student.id} student={student} />
))}
</div>
);
};
export default StudentList;
7. components/StudentCard.js
import React from "react";
const StudentCard = ({ student }) => {
return (
<div style={{ border: "1px solid #ccc", margin: "10px", padding: "10px", borderRadius: "6px" }}>
<h4>Name: {student.name}</h4>
<p>Age: {student.age}</p>
</div>
);
};
export default StudentCard;
8. pages/AddStudent.js
import React from "react";
import AddStudentForm from "../components/AddStudentForm";
const AddStudent = ({ setStudents }) => {
return (
<div>
<h2>Add New Student</h2>
<AddStudentForm setStudents={setStudents} />
</div>
);
};
export default AddStudent;
9. components/AddStudentForm.js
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
const AddStudentForm = ({ setStudents }) => {
const [name, setName] = useState("");
const [age, setAge] = useState("");
const navigate = useNavigate();
const handleSubmit = (e) => {
e.preventDefault();
const newStudent = {
id: Date.now(),
name,
age: parseInt(age, 10)
};
setStudents((prev) => [...prev, newStudent]);
navigate("/students");
};
return (
<form onSubmit={handleSubmit}>
<div style={{ marginBottom: "10px" }}>
<label>Name: </label>
<input value={name} onChange={(e) => setName(e.target.value)} required />
</div>
<div style={{ marginBottom: "10px" }}>
<label>Age: </label>
<input type="number" value={age} onChange={(e) => setAge(e.target.value)} required />
</div>
<button type="submit">Add Student</button>
</form>
);
};
export default AddStudentForm;
Concepts Covered in This Project
| Concept | Where It's Used |
|---|---|
| JSX | All components use JSX |
useState |
To store student data in App.js |
useNavigate |
To redirect after form submission |
| Props | Passing data/functions to components |
| Routing | BrowserRouter, Routes, and Route |
| Component Structure | Navbar, StudentList, StudentCard, Form |
Add a comment: