Cấp bậc tác giả:

TRAINING

PE ReactJS: Tour Management System for Da Nang City using ReactJS, Hooks, and Bootstrap

Được viết bởi webmaster ngày 04/07/2024 lúc 11:30 PM
You are required to create a tour management application for Da Nang City that uses JSON Server, ReactJS, Hooks, and Bootstrap. Use the useReducer hook to manage the state instead of Redux. The application should include functionalities to add, edit, delete, and display a list of tours with routing using React Router, and implement lazy loading with suspense.
  • 0
  • 362

PE ReactJS: Tour Management System for Da Nang City using ReactJS, Hooks, and Bootstrap

Overview

You are required to create a tour management application for Da Nang City that uses JSON Server, ReactJS, Hooks, and Bootstrap. Use the useReducer hook to manage the state instead of Redux. The application should include functionalities to add, edit, delete, and display a list of tours with routing using React Router, and implement lazy loading with suspense.

Requirements

Setup JSON Server:

Create a file named db.json to initialize a virtual server using JSON Server with the sample data below:

{
  "tours": [
    {
      "id": 1,
      "name": "Da Nang City Tour",
      "description": "A comprehensive tour of Da Nang City",
      "price": 1000000,
      "duration": "1 day",
      "guide": "Nguyen Van A"
    },
    {
      "id": 2,
      "name": "Ba Na Hills Tour",
      "description": "Experience the beauty of Ba Na Hills",
      "price": 1500000,
      "duration": "1 day",
      "guide": "Le Thi B"
    }
  ]
}
  • Install and configure JSON Server to serve this data on port 5000.

Create ReactJS Application:

  • Initialize a new ReactJS project.
  • Use functional components and React hooks (useState, useEffect, useReducer).
  • Use Bootstrap for styling.

Create Login Form:

  • Create a login form with two input fields: Username and Password.
  • Check login information: If the Username is "admin" and the Password is "admin", allow the user to log in successfully and continue to the Tour management form. Otherwise, show the message "Login failed".

Create Tour Management Form:

  • Show Tour List:
    • Retrieve the tour list from JSON Server and display the tour's name, description, price, duration, and guide.
    • Show "Edit" and "Delete" buttons for each tour.
  • Add New Tour:
    • Allow users to enter new tour details into the form.
    • When the user presses the "Add" button, add the new tour to the list and update JSON Server.
  • Edit Tour:
    • When the user presses the "Edit" button on a tour, allow the user to edit the tour details in the form.
    • When the user presses the "Save" button, update the tour information and update JSON Server.
  • Delete Tour:
    • When the user presses the "Delete" button on a tour, show a confirmation modal.
    • If the user confirms, remove the tour from the list and update JSON Server.

Use Reducer Hook

  • Use the useReducer hook to manage the state of the tour list instead of using Redux.

User Interface

  • Use Bootstrap to style the interface and make it responsive on mobile devices.
  • Build a user-friendly and easy-to-use user interface.

Routing:

  • Use React Router to navigate between the login form and the tour management form.

Lazy Loading and Suspense:

  • Implement lazy loading for the components with a simulated delay using React.lazy and React.Suspense.
Project Structure

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML