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:

ftaletdsuv

knee pain from prednisone prednisone is for what prednisone and plavix https://canadianphx.com/ - prednisone side effects for dogs

TyronThara

Choosing a professional chiropractor is a proven way to address back discomfort long-term. Whether Youre dealing with persistent back tension sciatic discomfort or everyday tightness a licensed chiropractic expert can deliver measurable relief. many individuals search for terms like “back pain chiropractor” or “spinal adjustment specialist” Near Them because they understand that proper spine treatment requires expertise and hands-on precision. A qualified specialist targets long-term healing by developing custom care strategies. This includes chiropractic adjustments soft tissue therapy and Nervous system balance. By working with a spinal care expert who specializes in long-term discomfort and alignment issues patients often experience less discomfort more energy and improved quality of life. For anyone considering Chiropractic Care you should look for a specialist with demonstrated skill in addressing lumbar tension nerve pinching and spinal misalignment. back pain Chiropractor Salt lake city Why children can benefit from young patients 06f81ba

LanguageExplorerSic

Greetings Im glad to join this community. Im currently learning Hindi and enjoy exploring new languages. Happy to connect with other language learners here

Donalddex

Greetings to every single one of our soothing water buffs Theres absolutely nothing really like sinking into a steaming hot tub after a tiring day. For anyone in search of the ultimate serenity experience a hot tub is indeed unparalleled. Diversity is indeed the spiciness of lifetime and we wholeheartedly pride ourselves on offering a vast selection of spas to meet every preference. Craftsmanship to us is more than a simple word. Its our hallmark. Each of our products are subjected to intense testing to ensure they continuously provide the best relaxing experience for numerous years to come. Our well-informed staff are always on hand to guide you in selecting the best-suited hot tub for your needs and residence. Have you ever considered having your very own pleasure oasis? Things are your must-haves when it involves choosing the best jacuzzi? Lets discuss regarding it Keep lively and peaceful By the bye I launched my very own creative organization web pages not long ago you can view here: Spa tub repair Sun Lakes Arizona Adding Yoga and Hot Tubs for an Whole Health Method 56_d7af

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>