Scribd
Upload
2 views

js

The document provides essential JavaScript files for a React application using Node.js, including App.js, Home.js, and StudentDetail.js. It outlines the folder structure and includes code snippets for each file, detailing how to fetch student data from a JSON file and display it. Additionally, it emphasizes the importance of placing the database.json file in the correct location for the application to function properly.

Uploaded by

Phạm Quốc Bình 　
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

js

The document provides essential JavaScript files for a React application using Node.js, including App.js, Home.js, and StudentDetail.js. It outlines the folder structure and includes code snippets for each file, detailing how to fetch student data from a JSON file and display it. Additionally, it emphasizes the importance of placing the database.json file in the correct location for the application to function properly.

Uploaded by

Phạm Quốc Bình 　
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Dưới đây là các file `.

js` cần thiết để bạn có thể copy và chạy trên Visual Studio Code với Node.js và
React:

---

### 1. **App.js**

```javascript

import React from 'react';

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './Home';

import StudentDetail from './StudentDetail';

function App() {

return (

<Router>

<Switch>

<Route path="/" exact component={Home} />

<Route path="/student/:code" component={StudentDetail} />

</Switch>

</Router>

);

export default App;

```

---
### 2. **Home.js**

```javascript

import React, { useState, useEffect } from 'react';

import { Link } from 'react-router-dom';

const Home = () => {

const [students, setStudents] = useState([]);

const [majors, setMajors] = useState([]);

useEffect(() => {

// Load student data from the database.json (replace '/path/to/database.json' with the correct path)

fetch('/path/to/database.json')

.then((response) => response.json())

.then((data) => {

const studentData = data.students;

const uniqueMajors = [...new Set(studentData.map((student) => student.major))];

setStudents(studentData);

setMajors(uniqueMajors);

});

}, []);

const handleMajorClick = (major) => {

fetch('/path/to/database.json')

.then((response) => response.json())

.then((data) => {

const filteredStudents = data.students.filter((student) => student.major === major);

setStudents(filteredStudents);

});
};

return (

<div className="home">

<h1>Student List</h1>

<div>

<h2>Majors</h2>

<ul>

{majors.map((major, index) => (

<li key={index} onClick={() => handleMajorClick(major)}>

{major}

</li>

))}

</ul>

</div>

<div>

<h2>Total Students: {students.length}</h2>

<ul>

{students.map((student) => (

<li key={student.id}>

{student.fullName} - {student.major}

<Link to={`/student/${student.code}`}>Detail</Link>

</li>

))}

</ul>

</div>

</div>

);

};
export default Home;

```

---

### 3. **StudentDetail.js**

```javascript

import React, { useState, useEffect } from 'react';

import { useParams } from 'react-router-dom';

const StudentDetail = () => {

const { code } = useParams();

const [student, setStudent] = useState(null);

const [subjects, setSubjects] = useState([]);

const [searchTerm, setSearchTerm] = useState('');

useEffect(() => {

fetch('/path/to/database.json')

.then((response) => response.json())

.then((data) => {

const studentDetail = data.students.find((student) => student.code === code);

setStudent(studentDetail);

const studentSubjects = data.student_details.find((detail) => detail.studentCode === code);

if (studentSubjects) {

const subjectNames = studentSubjects.subjects.map((subjectCode) => {

const subject = data.subjects.find((sub) => sub.subjectCode === subjectCode);


return subject ? subject.subjectName : '';

});

setSubjects(subjectNames);

});

}, [code]);

const handleAddNewSubject = () => {

setSubjects((prevSubjects) => [...prevSubjects, searchTerm]);

};

if (!student) return <div>Loading...</div>;

return (

<div>

<h1>{student.fullName}</h1>

<h2>CPA: {student.cpa}</h2>

<h3>Subjects</h3>

<input

type="text"

placeholder="Search subjects"

onChange={(e) => setSearchTerm(e.target.value.toLowerCase())}

/>

<ul>

{subjects

.filter((subject) => subject.toLowerCase().startsWith(searchTerm))

.map((subject, index) => (

<li key={index}>{subject}</li>

))}
</ul>

<h3>Add New Subject</h3>

<input

type="text"

placeholder="New Subject"

value={searchTerm}

onChange={(e) => setSearchTerm(e.target.value)}

/>

<button onClick={handleAddNewSubject}>Add New</button>

</div>

);

};

export default StudentDetail;

```

---

### **Folder Structure Suggestion:**

```

- src/

- App.js

- Home.js

- StudentDetail.js

- public/

- database.json (Place this file here or adjust the path in fetch API calls)

```
Ensure that `database.json` is placed in the correct location as specified in the fetch request. You may
need to use a relative path like `/database.json` if it's in your `public` folder.

Let me know if you need further assistance!

You might also like