Instagram
youtube
Facebook

Student Management App (JSX + Components + Routing)

Mradul Mishra
Table of Contents

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:

Comments:

SamuelVon

1xBet prides itself on its comprehensive sportsbook which encompasses a vast range of sports from all corners of the globe. Whether you have a passion for popular international sports such as football basketball tennis cricket or you prefer more niche sports 1xBet has something for everyone. You can place bets on both pre-match and live events taking advantage of competitive odds and a diverse selection of betting options to enhance your chances of winning. 1xbet Promo Code Welcome Get 100 Bonus Up To /€130 http://cvaa.com.ar/06inc/articles/1xbet_kenya_sign_up.html Promo code for 1xBet use this combination to increase your welcome bonus up to 100 on an amount reaching /€130 for registration. These funds are available to all new players who have already created an account or are planning to do so. The bonus requires wagering and it must be done in the sports section by placing bets with odds of at least 1.4 and a fivefold turnover. You have 30 days to use the code before it expires at the end of 2025. 1xBet Promo Code 2025 - this is a huge bonus of up to 1950 for the casino and 150 free spins on slots. An exclusive offer for new players aged 18 and above. To activate the code you need to make a deposit of 10. The second and subsequent deposits must be at least 15. You can participate in this promotion until the end of 2025.

LindaRewly

Finding your way about the a Social Security Disability application procedure may be an intimidating task for some. The process could be frustrating and time intensive, while the likelihood of getting dismissed are raised. That is where a social security disability legal representative is available in. Legal counsel can help you navigate the application process, enhance your likelihood of becoming authorized, then appeal a denied claim. In this essay, we are going to explore at least five tips linked to the activity of a social security disability attorney. Going through the maze of the Social Security Disability application procedure by using a legal professional The social security disability application function could be perplexing then stressful. Legal counsel will allow you to comprehend the requirements and show you through the method. They are able to also assist you to gather the necessary medical data and proof to aid your request. They are able to further help out with prepping someone for the proceeding, if necessary. The necessity of professional medical information in a Social Security Disability case Medical evidence is essential in a social security disability case. It is utilized to prove that you maintain a medical condition that prevents you from performing. Legal counsel will allow you to produce the mandatory medical information and offer it in a manner that is most probably to be acknowledged by the social security organisation. They may be able also allow you to acquire medical records and other forms that maintain your claim. Typical false beliefs up to Social Security Disability and how a lawyer might help There are lots of misinterpretations more than social security disability. For instance, many individuals genuinely believe that only those people who are permanently disabled are eligible for benefits. Although, this is simply not true. An attorney makes it possible to comprehend the eligibility requirements and dispel any misconceptions you may possibly have. They are able to also provide assistance with just how to present your case when you look at the most favorable light. The appeals process for waived Social Security Disability scenarios and just how legal counsel will help In the event the claim is denied, you've got the directly to appeal. A lawyer will allow you to understand the appeals plan and represent you through the hearing. They are able to also allow you to gather additional evidence and create a stronger case to boost your chances of triumph. How to pick the best Social Security Disability lawyer for your case It is vital to choose legal counsel who may have skills approaching social security disability cases. Seek out a legal professional that is acquainted with the social security administration's procedures and processes. You should also feel comfortable chatting with them and trust their judgment. Search for a lawyer who is able to create obvious and straightforward suggestions to your questions and supply assistance through the duration of the method. In summary, a social security disability legal practitioner can play a crucial role when you look at the application and appeals process. They could assist you to get around the process, enhance your odds of getting accredited, and appeal a rejected claim. A legal professional can also help you recognize the qualifications requirements and eliminate any fallacies you might have. You need to choose legal counsel who may have experience maneuvering social security disability situations, sufficient reason for that you feel at ease communicating. if you'd like to practice more about this subject have a look at my favorite ssa attorney website:   <a href=https://elpasodisabilitylawyer.com/age-50-and-disability/><font color=#000_url>top rated disability attorney near me in Las Cruces, NM</font></a>