Báo cáo Thực Tập Tuần 5 về React và Node | Môn Báo cáo thực tập - Đại học Mỏ – Địa chất

lOMoAR cPSD| 58728417
BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC MỎ - ĐỊA CHẤT VƯƠNG ĐẮC BẮC 2021050104 BÁO CÁO THỰC TẬP DOANH NGHIỆP
NGÀNH CÔNG NGHỆ THÔNG TIN
CHUYÊN NGÀNH CÔNG NGHỆ THÔNG TIN ĐỊA HỌC
TÌM HIỂU FRAMEWORK REACT.JS CHO
FRONTEND, NODE.JS (EXPRESS) CHO
BACKEND ĐỂ XÂY DỰNG WEBSITE
NGHE NHẠC TRỰC TUYẾN HÀ NỘI 02/2025 lOMoAR cPSD| 58728417
Báo cáo thực tập doanh nghiệp ngành Công nghệ thông tin
BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC MỎ - ĐỊA CHẤT BÁO CÁO THỰC TẬP DOANH NGHIỆP
NGÀNH CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH
CÔNG NGHỆ THÔNG TIN ĐỊA HỌC
TÌM HIỂU FRAMEWORK REACT.JS CHO FRONTEND,
NODE.JS (EXPRESS) CHO BACKEND ĐỂ XÂY DỰNG
WEBSITE NGHE NHẠC TRỰC TUYẾN
Sinh viên thực tập : Vương Đắc Bắc
Mã sinh viên : 2021050104 Công ty
thực tập : Người phụ trách :
Giảng viên hướng dẫn: Nguyễn Thị Mai Dung HÀ NỘI 02/2025 MỤC LỤC
MỤC LỤC.........................................................................................................................1
DANH MỤC HÌNH VẼ.....................................................................................................2
CHƯƠNG 1 XÂY DỰNG FRONTEND...........................................................................3
1.1 Thiết kế giao diện trang chủ.....................................................................................4
1.1.1 Thiết kế giao diện Header.................................................................................4
1.1.2 Thiết kế giao diện Sidebar................................................................................6 lOMoAR cPSD| 58728417
1.1.3 Thiết kế giao diện MainContent........................................................................8
1.1.4 Thiết kế giao diện Footer................................................................................10
1.2 Fetch API từ Backend để hiển thị dữ liệu..............................................................12
1.3 Thiết kế giao diện trang phát nhạc.........................................................................14 TỔNG
KẾT......................................................................................................................16 lOMoAR cPSD| 58728417
Báo cáo thực tập doanh nghiệp ngành Công nghệ thông tin DANH MỤC HÌNH VẼ
Hình 1–1 Kết quả chạy thử kiểm tra Tailwind...................................................................4
Hình 1–2 Code giao diện Header (1)..................................................................................5
Hình 1–3 Code giao diện Header (2)..................................................................................5
Hình 1–4 Kết quả giao diện sau khi thêm Header..............................................................6
Hình 1–5 Code giao diện Sidebar (1).................................................................................6
Hình 1–6 Code giao diện Sidebar (2).................................................................................7
Hình 1–7 Kết quả giao diện sau khi thêm Sidebar.............................................................7
Hình 1–8 Code giao diện MainContent (1)........................................................................8
Hình 1–9 Code giao diện MainContent (2)........................................................................9
Hình 1–10 Code giao diện MainContent (3)......................................................................9
Hình 1–11 Kết quả giao diện sau khi thêm MainContent.................................................10
Hình 1–12 Code giao diện Footer (1)...............................................................................10
Hình 1–13 Code giao diện Footer (2)...............................................................................11
Hình 1–14 Code giao diện Footer (3)...............................................................................11
Hình 1–15 Kết quả giao diện sau khi thêm Footer...........................................................12
Hình 1–16 Code fetch api songs (1).................................................................................12
Hình 1–17 Code fetch api songs (2).................................................................................13
Hình 1–18 Kết quả giao diện sau khi fetch dữ liệu..........................................................13
Hình 1–20 Code giao diện MusicPlayer (2).....................................................................14
Hình 1–19 Code giao diện MusicPlayer (1).....................................................................14
Hình 1–21 Kết quả giao diện sau khi thêm trình phát nhạc..............................................15
CHƯƠNG 1 XÂY DỰNG FRONTEND
Các công việc dự kiến sẽ làm trong tuần xây dựng Frontend
Thiết kế giao diện chính lOMoAR cPSD| 58728417
Báo cáo thực tập doanh nghiệp ngành Công nghệ thông tin
Tích hợp API với Frontend
Đầu tiên, để giúp việc phát triển giao diện nhanh chóng và linh hoạt hơn, chúng ta
cần cài đặt Tailwind vào dự án React
Bước 1 : Cài đặt Tailwind CSS v3
Mở terminal trong thư mục dự án React và chạy: npm install -D tailwindcss postcss autoprefixer
Khởi tạo file cấu hình Tailwind: npx tailwindcss init -p
Lệnh này sẽ tạo 1 file: tailwind.config.js (cấu hình Tailwind)
Bước 2 : Cấu Hình tailwind.config.js)
Mở file tailwind.config.js và chỉnh sửa như sau: /** @type
{import('tailwindcss').Config} */ module.exports = { content:
["./src/**/*.{js,jsx,ts,tsx}"], // Quét các file trong thư mục src theme: { extend: {}, }, plugins: [], };
Điều này giúp Tailwind quét các file trong src để tối ưu CSS.
Bước 3 : Import Tailwind vào index.css
Mở file src/index.css và thêm các dòng sau: @tailwind base; @tailwind components; @tailwind utilities;
Điều này sẽ kích hoạt các class của Tailwind trong dự án React.
Bước 4 : Kiểm Tra Xem Tailwind Hoạt Động
Mở file src/App.js và thử sử dụng Tailwind: function App() { return ( Hello world! ); lOMoAR cPSD| 58728417
Báo cáo thực tập doanh nghiệp ngành Công nghệ thông tin } export default App;
Chạy ứng dụng: npm start
Nếu thấy chữ "Hello world!" hiển thị với chữ đậm và gạch chân, Tailwind
đã được tích hợp thành công!
Hình – Kết quả chạy thử kiểm tra Tailwind
1.1 Thiết kế giao diện trang chủ
1.1.1 Thiết kế giao diện Header
Bước 1: Tạo Component Header lOMoAR cPSD| 58728417
Báo cáo thực tập doanh nghiệp ngành Công nghệ thông tin lOMoAR cPSD| 58728417
Báo cáo thực tập doanh nghiệp ngành Công nghệ thông tin
Tạo file src/components/Header.js và thêm code: lOMoAR cPSD| 58728417 Vương Đắc Bắc DCCTDH65B
Báo cáo thực tập doanh nghiệp ngành Công nghệ thông tin lOMoAR cPSD| 58728417
Báo cáo thực tập doanh nghiệp ngành Công nghệ thông tin lOMoAR cPSD| 58728417 Vương Đắc Bắc DCCTDH65B
Hình – Code giao diện Sidebar (2) lOMoAR cPSD| 58728417
Báo cáo thực tập doanh nghiệp ngành Công nghệ thông tin
Bước 2: Thêm Sidebar vào App.js
Mở src/App.js và cập nhật
Bước 3: Chạy ứng dụng
Mở trình duyệt và kiểm tra giao diện tại: http://localhost:3000
Hình – Kết quả giao diện sau khi thêm Sidebar
1.1.3 Thiết kế giao diện MainContent
Bước 1: Tạo Component MainContent
Tạo file src/components/MainContent.js và thêm code: lOMoAR cPSD| 58728417
Báo cáo thực tập doanh nghiệp ngành Công nghệ thông tin
Hình 1–3 Code giao diện MainContent (1) lOMoAR cPSD| 58728417
Báo cáo thực tập doanh nghiệp ngành Công nghệ thông tin
Hình 1–4 Code giao diện MainContent (2)
Hình 1–5 Code giao diện MainContent (3) lOMoAR cPSD| 58728417
Báo cáo thực tập doanh nghiệp ngành Công nghệ thông tin
Bước 2: Thêm MainContent vào App.js
Mở src/App.js và cập nhật
Bước 3: Chạy ứng dụng
Mở trình duyệt và kiểm tra giao diện tại: http://localhost:3000
Hình – Kết quả giao diện sau khi thêm MainContent
1.1.4 Thiết kế giao diện Footer
Bước 1: Tạo Component Footer
Tạo file src/components/Footer.js và thêm code: lOMoAR cPSD| 58728417
Báo cáo thực tập doanh nghiệp ngành Công nghệ thông tin
Hình – Code giao diện Footer (1)
Hình 1–6 Code giao diện Footer (2) lOMoAR cPSD| 58728417
Báo cáo thực tập doanh nghiệp ngành Công nghệ thông tin
Hình 1–7 Code giao diện Footer (3) Bước 2: Thêm Footer vào App.js
Mở src/App.js và cập nhật
Bước 3: Chạy ứng dụng
Mở trình duyệt và kiểm tra giao diện tại: http://localhost:3000
Hình – Kết quả giao diện sau khi thêm Footer
1.2 Fetch API từ Backend để hiển thị dữ liệu
Bước 1: Cập nhật MainContent.js để fetch API songs lOMoAR cPSD| 58728417
Báo cáo thực tập doanh nghiệp ngành Công nghệ thông tin
Hình – Code fetch api songs (1) lOMoAR cPSD| 58728417
Báo cáo thực tập doanh nghiệp ngành Công nghệ thông tin
Hình – Code fetch api songs (2)
Bước 2: Chạy ứng dụng
Mở trình duyệt và kiểm tra giao diện tại: http://localhost:3000
Hình – Kết quả giao diện sau khi fetch dữ liệu lOMoAR cPSD| 58728417
Báo cáo thực tập doanh nghiệp ngành Công nghệ thông tin Vương Đắc Bắc DCCTDH65B
1.3 Thiết kế giao diện trang phát nhạc
Bước 1: Cập nhật Component MusicPlayer
Hình – Code giao diện MusicPlayer (1)