The Student Details App is a React-based application designed to manage student information, including adding, displaying, and deleting student details. It utilizes a local API for data management and showcases React's capabilities in handling state, effects, and component-based architecture.
The main component that orchestrates the application. It initializes state for student details, handles API requests, and renders child components.
- State Variables: details, newName, newAge, search, error.
- Functions: addDetails, handleDelete, handleSubmit.
A form component for adding new student details. It uses useRef for input focus management.
- Props:
name,age,newName,newAge,handleSubmit.
Displays the list of student details. It conditionally renders student items or a message when no details are available.
- Props:
details,handleDelete.
Represents a single student detail item. Includes functionality to delete the item.
- Props:
detail,handleDelete.
A search component to filter displayed student details.
- Props:
search,setSearch.
Components for displaying the application's header and footer, respectively.
- Header Props:
title. - Footer Props:
rows.
A utility function for making API requests. It handles fetch requests and error management.
manifest.json: Contains metadata for the web application.package.json: Defines project dependencies and scripts.robots.txt: Instructs web robots on how to interact with the website.
- Install dependencies: npm install
- Start the development server: npm start
- Build for production: npm run build
The Student Details App demonstrates essential React concepts and provides a template for managing and displaying data in a web application.