BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM THÀNH PHỐ HỒ CHÍ MINH □«□□«□ Tiểu Luận Tìm hi ểu vềề React JS Học Phần Công Nghệ Phần Mềm – COMP104402 BỘ GIÁO DỤC VÀ ĐÀO TẠO TP HỒỒ CHÍ MINH – 9/2021 BỘ[.]
BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM THÀNH PHỐ HỒ CHÍ MINH □«□□«□ Tiểu Luận Tìm hi ểu vềề React JS Học Phần: Công Nghệ Phần Mềm – COMP104402 BỘ GIÁO DỤC VÀ ĐÀO TẠO TP HỒỒ CHÍ MINH – 9/2021 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM THÀNH PHỐ HỒ CHÍ MINH □«□□«□ Tiểu Luận Tìm hi ểu vềề React JS Học Phần: Công Nghệ Phần Mềm – COMP104402 Họ Tên SVHT: GVHD: Nguyễn Bá Đức – 45.01.104.056 Phạm Thị Xuân Tấn – 45.01.104.209 Nguyễn Tuấn Phong – 45.01.104.174 Huỳnh Hoàng Lam – 45.01.104.120 TP HỒỒ CHÍ MINH – 9/2021 GV Trần Sơn Hải GV Nguyễn Tấn Duẩn MỤC LỤC PHẦN I MỞ ĐẦU Đề tài: Tính cấp thiết đề tài 2 Mục đích đề tài .2 Đối tượng nghiên cứu .2 Phạm vi nghiên cứu Lý chọn đề tài .2 Phương pháp nghiên cứu Kết cấu tiểu luận PHẦN II NỘI DUNG .2 CHƯƠNG TỔNG QUAN VỀ CÀI ĐẶT VÀ THỬ NGHIỆM 1.1 Khái niệm .2 1.2 Cài đặt 1.3 Thử nghiệm: 1.4 Kết CHƯƠNG SƠ ĐỒ TƯ DUY HỆ THỐNG HÓA TÀI LIỆU .2 CHƯƠNG NGHIÊN CỨU CÁCH THỰC HIỆN VÀ TẠO PROJECT 3.1 Quá trình tìm hiểu xây dụng cài đặt xây dựng project 3.2 App To-Do React PHẦN III XÂY DỰNG ĐỒ ÁN Mô trang web chat Real-times KẾT LUẬN Tài liệu kham khảo .2 NHIỆM VỤ CÁC THÀNH VIÊN TRONG NHÓM Họ Và Tên MSSV Nhiệm vụ Nguyễn Bá Đức 45.01.104.056 Tìm kiếm tài liệu, link, vẽ sơ đồ tư thực thi chương trình Phạm Thị Xuân Tấn 45.01.104.209 Tìm kiếm tài liệu, nghiên cứu thực thi chương trình Nguyễn Tuấn Phong 45.01.104.174 Tìm kiếm tài liệu cài đặt React js xây dựng dự án Github Huỳnh Hồng Lam 45.01.104.120 Tìm kiếm tài liệu, tổng hợp tài liệu nhóm, viết báo cáo (Word + PPT) Nhận xét: Nhiệm vụ bạn thành viên nhóm thống đồng ý PHẦN I MỞ ĐẦU Đề tài: Tìm hiểu công nghệ React JS môi trường WEB Tính cấp thiết đề tài Ngày nay, phát triển phần mềm thật khó kiểm sốt, dự án phần mềm thường kéo dài vượt chi phí cho phép Những nhà lập trình chun nghiệp phải cố gắng hoàn thành dự án phần mềm cách chất lượng, hạn chi phí cho phép Mục đích đề tài Tìm hiểu cơng nghệ React JS xây dựng Web Cách cài đặt thực câu lệnh Cách xây dựng Project đưa lên Github, thực thi sử dụng phần mềm Qua sử dụng Github ta trang bị kỹ quản lý phiên dự án, đặc biệt thành viên tham gia có khoảng cách lớn mặt địa lý Đối tượng nghiên cứu Công nghệ React JS phát triển ứng dụng Web thực thi mơ chương trình Phạm vi nghiên cứu vi nhỏ Phần mềm thực thi mơ q trình tìm hiểu nghiên cứu, nên phạm hoạt động nhiều hạn chế nên thực thi trường học doanh nghiệp Lý chọn đề tài Trong trình phát triển phần mềm, thường gặp phải nhiều vấn đề như: Làm để quản lý phiên trình quản lý phần mềm? Làm để quản lý mã nguồn chung cho nhóm? Phần code viết, người phải chịu trách nghiệm có lỗi xảy ra? Khách hàng muốn sử dụng lại phiên phát hình cũ làm nào? … Để giải vấn đề đó, sử dụng công cụ quản lý phiên hỗ trợ từ Github, với cơng cụ này, tồn phiên lưu trữ thư mục (Repository) tất thành viên tham gia dự án thực thao tác đưa thay đổi lên, cập nhật thay đổi về, cập nhật thay đổi, lấy thay đổi thành viên khác cập nhật trước đó, Hơn việc quản lý cấu hình tốt đem lại nhiều lợi ích: Giảm thiểu nhầm lẫn, tổ chức quản lý tốt khoản mục phần mềm Tổ chức hoạt động cần thiết để đảm bảo tính tồn vẹn nhiều sản phẩm phần mềm Đảm bảo tính nguyên vẹn cấu hình sản phẩm Tối ưu hóa chi phí phát triển, bảo trì hỗ trợ sau bán hàng Cung cấp môi trường phát triển, bảo trì, thử nghiệm sản xuất ổn định Nâng cao chất lượng tuân thủ tiêu chuẩn kỹ thuật phần mềm Giảm chi phí làm lại thành phần thực trước … Phương pháp nghiên cứu - Tìm kiếm thơng tin Đọc hiểu tài liệu Cài đặt thực thi project Kết cấu tiểu luận - Cài đặt chương trình, tạo Project phát triển sơ đồ tư - Tìm hiểu, nghiên cứu thực chương trình - Xây dựng Project PHẦN II NỘI DUNG CHƯƠNG TỔNG QUAN VỀ CÀI ĐẶT VÀ THỬ NGHIỆM 1.1 Khái niệm React Js thư viện javascript dùng để xây dựng UI, UI dùng tảng Web Mobile Ở lĩnh vực Web, sử dụng React Js đem lại trải nghiệm tốt cho người dùng, khả Hot Reload giúp bạn lập trình nhanh 1.2 Cài đặt Hướng dẫn cài đặt JS thử nghiệm chương trình “Hello Word” Trước hết ta cần phải cài đặt môi trường React JS máy để sử dụng cho trang web: Đầu tiên ta cần cài đặt node.js máy Node.js mã nguồn xây dựng dựa tảng Javascript V8 Engine, sử dụng để xây dựng ứng dụng web trang video clip, forum đặc biệt trang mạng xã hội phạm vi hẹp NodeJS mã nguồn mở sử dụng rộng hàng ngàn lập trình viên toàn giới Bước 1: Cài đặt cài app React Có thể cài ổ đĩa hay thư mục lệnh cmd Ta gõ câu lệnh sau cmd: npm install -g create-react-app Bước 2: Tạo project React.js ổ đĩa D với tên react-project Ta tiến hành: trỏ vào ổ đĩa D Chạy lệnh tạo project với tên bất kỳ, ví dụ đặt tên react-project sau: create-react-app react-project Khi xuất thư mục react-project bên ổ đĩa D, chứa file thư mục sau: Bước 3: Thực thi lệnh chạy project Ta tiến hành: trỏ vào thư mục react-project với lệnh cmd sau: cd react-project Thực thi chạy project React lệnh: npm start Như hoàn thành bước cài đặt React để sử dụng 1.3 Thử nghiệm: Chạy ví dụ “Hello World” Ta vào thư mục scr tạo folder components Trong folder components ta tạo file đặt tên Hello.js với nội dung sau: Sau nhập xong ta qua file App.js điền thêm import gọi hàm sau: Sau ta reload lại trang web ta thực thi 1.4 Kết CHƯƠNG SƠ ĐỒ TƯ DUY HỆ THỐNG HÓA TÀI LIỆU CHƯƠNG NGHIÊN CỨU CÁCH THỰC HIỆN VÀ TẠO PROJECT 3.1 Quá trình tìm hiểu xây dụng cài đặt xây dựng project Bước 1: Cài đặt package create-react-app Bước 2: Tạo app react cho bạn Điều tạo ứng dụng react, với tất function cần thiết mà bạn cần Đã tích hợp sẵn ứng dụng với tên-app-của-bạn Khi q trình xử lý hồn tất, bạn thấy sau: Bước 3: Đi đến thư mục tên-app-của-bạn Bước 4: Start npm kiểm tra xem app có hoạt động khơng Bạn thấy kết sau terminal Là trang localhost hiển thị sau Web localhost hiển thị Bây giờ, chuyển sang xây dựng App To-Do 3.1 App To-Do React - Phân tích: Tạo app To Do List với chức đơn giản thêm/ xóa danh sách cơng việc - Thiết kế - Lập trình Sau bạn khởi động app, tiếp tục mở app trình soạn thảo văn bạn Điều bạn nên xem cấu trúc tệp Create-React-App tên-app-của-bạn cài đặt số tệp cho bạn tổ chức số tệp số chúng thành thư mục hình Các thư mục bạn cần làm việc thư mục src thư mục public Structure of the created App - Component Package.json: Đây tệp thực thi chứa tất thơng tin ứng dụng bạn, dependency, tập lệnh cài đặt, v.v Khơng app thực thi khơng có tệp Public -> index.html: Điều đơn giản để xác định giao diện app bạn với tham chiếu đến kiểu (style.css) xử lý (index.js) Ngoài index.html, cần tệp manifest.json thư mục chung Lưu ý: div với id “root” Dưới div này, tất nội dung ứng dụng react bạn xuất Bạn không cần phải thay đổi điều mà cần biết vị trí liệu đặt tệp Src -> index.js: Ở đây, import React ReactDOM Chúng ta render thứ phần tử ‘root’ Bạn không cần phải chạm thay đổi tệp này, cần biết cách cấu trúc tệp index.js file Src -> styling files (style.css, index.css): Các tệp để tùy chỉnh style để làm cho giao diện người dùng trơng đẹp Hãy tùy chỉnh theo sở thích bạn Như đề cập, React có khả tuyệt vời để mơ-đun hóa code component riêng biệt Mặc dù bạn tạo tất component tệp App.js để tránh App.js dài để viết clean code, bạn nên tạo thư mục component giữ tệp js riêng biệt cho component bạn cần Src -> App.js: Đây tệp xử lý Chúng ta import tất class cần thiết mơ-đun thấp Giải thích Class App extends Components: syntax sử dụng component khác Về bản, điều nói lên attribute (thuộc tính) có React.Component, mở rộng (về khả truy cập sử dụng) thông qua App Class Constructor(): Phương thức gọi sau mở rộng component phương thức khởi tạo constructor cho component React gọi trước mout Khi triển khai constructor cho lớp React.Component, bạn nên gọi super (props) trước câu lệnh khác Nếu không, this.props không xác định constructor, điều dẫn đến lỗi HandleChange():Như tên nói (Hãy nhớ: đặt tên 90% chương trình), phương pháp sử dụng để xác định cách App thực thay đổi state (đã chọn / bỏ chọn tác vụ trường hợp này) Src -> TodoItem.js : Tệp chuẩn bị dạng mô-đun thấp App.js Để xác định component mục cụ thể to-do-list Src -> todosData.js: Tệp lại tạo dạng tệp data Và phải thêm / xóa công việc cụ thể khỏi công việc cần làm mình, cần hard code file liệu (kể từ bây giờ) Cuối Kiểm tra: Kiểm chứng thành phần app PHẦN III XÂY DỰNG ĐỒ ÁN Mơ trang web chat Real-times Nhóm em chọn đề tài: “ Tìm hiểu ReactJS xây dựng trang web chat Real-times” Trang web chat Real-times hỗ trợ cho người dùng có khơng gian trị chuyện trực tuyến bạn bè gần xa thông qua internet Các tính trang web bao gồm: - Đăng nhập Google/Facebook Quản lý phòng chat Thêm thành viên vào phòng chat Hiển thị danh sách thành viên phòng chat Nhắn tin Các component app bao gồm: ChatRoom: giao diện phòng chat Login: Giao diện đăng nhập Modals: chức thêm phòng chat, mời thêm người dùng vào phòng chat