/react_student_details_app

This React application facilitates the addition and deletion of student details directly from a JSON file. To ensure seamless functionality, the JSON file must be initialized upon launching the app.

Primary LanguageJavaScript

Student Details App Documentation

Overview

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.

Key Components

App.jsx

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.

AddDetail.jsx

A form component for adding new student details. It uses useRef for input focus management.

  • Props: name, age, newName, newAge, handleSubmit.

Content.jsx

Displays the list of student details. It conditionally renders student items or a message when no details are available.

  • Props: details, handleDelete.

DetailsItem.jsx

Represents a single student detail item. Includes functionality to delete the item.

  • Props: detail, handleDelete.

SearchDetail.jsx

A search component to filter displayed student details.

  • Props: search, setSearch.

Header.jsx and Footer.jsx

Components for displaying the application's header and footer, respectively.

  • Header Props: title.
  • Footer Props: rows.

API Interaction

ApiRequest.jsx

A utility function for making API requests. It handles fetch requests and error management.

Configuration Files

  • 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.

Running the Application

  1. Install dependencies: npm install
  2. Start the development server: npm start
  3. Build for production: npm run build

Conclusion

The Student Details App demonstrates essential React concepts and provides a template for managing and displaying data in a web application.