tiểu luận tìm hiểu về react js

NHIỆM VỤ CÁC THÀNH VIÊN TRONG NHÓMNguyễn Bá Đức45.01.104.056Tìm kiếm tài liệu, link, vẽ sơ đồ tư duy và thực thi chương trìnhPhạm Thị Xuân Tấn45.01.104.209Tìm kiếm tài liệu, nghiên cứu v

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM THÀNH PHỐHỒ CHÍ MINH

BỘ GIÁO DỤC VÀ ĐÀO TẠO

Học Phần: Công Nghệ Phần Mềm – COMP104402

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM THÀNH PHỐHỒ CHÍ MINH

GVHD: GV Trần Sơn Hải GV Nguyễn Tấn DuẩnHọ và Tên SVHT:

1 Nguyễn Bá Đức – 45.01.104.0562 Phạm Thị Xuân Tấn – 45.01.104.2093 Nguyễn Tuấn Phong – 45.01.104.1744 Huỳnh Hoàng Lam – 45.01.104.120

Học Phần: Công Nghệ Phần Mềm – COMP104402

6 Phương pháp nghiên cứu 2

7 Kết cấu tiểu luận 2

PHẦN II NỘI DUNG 2

CHƯƠNG 1 TỔNG QUAN VỀ CÀI ĐẶT VÀ THỬ NGHIỆM 2

1.1 Khái niệm 2

1.2 Cài đặt 2

1.3 Thử nghiệm: 2

1.4 Kết quả 2

CHƯƠNG 2 SƠ ĐỒ TƯ DUY HỆ THỐNG HÓA TÀI LIỆU 2

CHƯƠNG 3 NGHIÊN CỨU CÁCH THỰC HIỆN VÀ TẠO PROJECT 2

3.1 Quá trình tìm hiểu xây dụng và cài đặt xây dựng project 2

3.2 App To-Do React 2

NHIỆM VỤ CÁC THÀNH VIÊN TRONG NHÓM

Nguyễn Bá Đức45.01.104.056Tìm kiếm tài liệu, link, vẽ sơ đồ tư duy và thực thi chương trìnhPhạm Thị Xuân Tấn45.01.104.209Tìm kiếm tài liệu, nghiên cứu và thực thi chương trìnhNguyễn Tuấn Phong45.01.104.174Tìm kiếm tài liệu cài đặt React js và xây dựng dự án trên GithubHuỳnh Hoàng Lam45.01.104.120Tì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ụ của các bạn đều như nhau và các thành viên trong nhóm đã thống

nhất và đồng ý

PHẦN I MỞ ĐẦUĐề tài:

Tìm hiểu công nghệ React JS trong môi trường WEB

1.Tính cấp thiết của đề tài

Ngày nay, sự phát triển của phần mềm thật sự khó kiểm soát, các dự án phần mềmthường kéo dài và vượt quá chi phí cho phép Những nhà lập trình chuyên nghiệp phải cốgắng hoàn thành các dự án phần mềm một cách chất lượng, đúng hạn và trong chi phí chophép

Tìm hiểu công nghệ React JS trong xây dựng Web Cách cài đặt và thực hiện các câu lệnhnhư thế nào Cách xây dựng một Project và có thể đưa lên Github, thực thi và sử dụng phầnmềm Qua đó khi sử dụng Github ta được trang bị kỹ năng quản lý phiên bản trong một dựán, đặc biệt là khi các thành viên tham gia có những khoảng cách lớn về mặt địa lý.

Công nghệ React JS phát triển ứng dụng Web và thực thi mô phỏng chương trình.

Phần mềm được thực thi và mô phỏng trong quá trình tìm hiểu và nghiên cứu, nên phạmvi hoạt động còn nhiều hạn chế nên chỉ có thể thực thi trong trường học và doanh nghiệpnhỏ.

5 Lý do chọn đề tài

Trong quá trình phát triển phần mềm, chúng ta thường sẽ gặp phải nhiều vấn đề như: Làm thế nào để quản lý được các phiên bản của quá trình quản lý phần mềm?  Làm thế nào để quản lý mã nguồn chung cho cả nhóm?

 Phần code này là của ai viết, người nào phải chịu trách nghiệm khi có lỗi xảy ra? Khách hàng muốn sử dụng lại một phiên bản đã phát hình cũ thì làm như thế nào?…

Để giải quyết được vấn đề đó, chúng ta có thể sử dụng các công cụ quản lý phiên bản vàhỗ trợ từ Github, với công cụ này, toàn bộ phiên bản có thể được lưu trữ trên một thư mục(Repository) và tất cả các thành viên tham gia dự án có thể thực hiện các thao tác đưa thay đổilên, cập nhật thay đổi về, cập nhật những thay đổi, lấy về những thay đổi do các thành viên kháccập nhật trước đó,

Hơn thế nữa việc quản lý cấu hình tốt sẽ đem lại nhiều lợi ích:

 Giảm thiểu sự nhầm lẫn, tổ chức và quản lý tốt hơn các khoản mục phần mềm Tổ chức các hoạt động cần thiết để đảm bảo tính toàn vẹn của nhiều sản phẩm phần mềm Đảm bảo tính nguyên vẹn cấu hình hiện tại của sản phẩm

 Tối ưu hóa chi phí phát triển, bảo trì và hỗ trợ sau bán hàng

 Cung cấp môi trường phát triển, bảo trì, thử nghiệm và sản xuất ổn định Nâng cao chất lượng và tuân thủ các tiêu chuẩn kỹ thuật phần mềm Giảm chi phí làm lại những thành phần đã thực hiện trước đó…

- Tìm kiếm thông tin- Đọc hiểu tài liệu

- Cài đặt và thực thi project đầu tiên

7 Kết cấu tiểu luận

- Cài đặt chương trình, tạo Project đầu tiên và phát triển sơ đồ tư duy- Tìm hiểu, nghiên cứu các thực hiện chương trình

- Xây dựng Project

PHẦN II NỘI DUNG

CHƯƠNG 1 TỔNG QUAN VỀ CÀI ĐẶT VÀ THỬ NGHIỆM

1.1 Khái niệm

React Js là một thư viện javascript dùng để xây dựng UI, UI ở đây được dùng chính ở 2nền tảng Web và Mobile Ở lĩnh vực Web, sử dụng React Js có thể đem lại trải nghiệm tốt chongười dùng, cũng như khả năng Hot Reload giúp bạn lập trình nhanh hơn.

1.2 Cài đặt

Hướng dẫn cài đặt JS và 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 về máy để sử dụng cho trang web:Đầu tiên ta cần cài đặt node.js về máy

Node.js là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8 Engine, nó được sửdụng để xây dựng các ứng dụng web như các trang video clip, các forum và đặc biệt là trangmạng xã hội phạm vi hẹp NodeJS là một mã nguồn mở được sử dụng rộng bởi hàng ngàn lậptrình viên trên toàn thế giới.

Bước 1: Cài đặt bộ cài app React

Có thể cài ở bất kỳ ổ đĩa hay thư mục nào bằng lệnh cmd.Ta gõ câu lệnh sau trong cmd: npm install -g create-react-app

Bước 2: Tạo project React.js trong ổ đĩa với tên Dreact-project.

Ta lần lượt 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 như sau:

create-react-app react-project

Khi này sẽ xuất hiện một thư mục react-project bên trong ổ đĩa D, chứa các file và thư mục như

sau:

Bước 3: Thực thi lệnh chạy project

Ta lần lượt tiến hành: trỏ vào thư mục react-project với lệnh cmd sau: cd react-projectThực thi chạy project React bằng lệnh: npm start

Như vậy là hoàn thành các 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 1 folder components

Trong folder components ta tạo 1 file đặt tên là Hello.js với nội dung như sau:

Sau khi nhập xong ta qua file App.js và điền thêm import và gọi hàm như sau:

Sau đó ta reload lại trang web ta đã thực thi.

1.4 Kết quả

CHƯƠNG 2 SƠ ĐỒ TƯ DUY HỆ THỐNG HÓA TÀI LIỆU

CHƯƠNG 3 NGHIÊN CỨU CÁCH THỰC HIỆN VÀ TẠO PROJECT

Bước 1: Cài đặt package create-react-app

Bước 2: Tạo app react cho chính bạn

Điều này tạo ra ứng dụng react, với tất cả các function cần thiết mà bạn cần Đã được tích hợp

sẵn trong ứng dụng với tên-app-của-bạn

Khi quá trình xử lý hoàn tất, bạn sẽ có thể thấy như sau:

Bước 3: Đi đến thư mục tên-app-của-bạn

Bước 4: Start bằng npm và kiểm tra xem app có hoạt động không

Bạn thấy kết quả sau trong terminal

Là trang localhost hiển thị như sau

Web localhost hiển thị

Bây giờ, hãy chuyển sang xây dựng App To-Do

3.1 App To-Do React

- Phân tích: Tạo một app To Do List với chức năng đơn giản như thêm/ xóa danh sách công

- Thiết kế- Lập trình

Sau khi bạn đã khởi động app, hãy tiếp tục và mở app trong trình soạn thảo văn bản củabạn Điều đầu tiên bạn nên xem là cấu trúc tệp Create-React-App tên-app-của-bạn đã cài đặtmột số tệp cho bạn và tổ chức một số tệp trong số chúng thành các thư mục như hình dưới đây.

Các thư mục bạn cần làm việc là thư mục src và thư mục public.

Structure of the created App

Package.json: Đây là tệp thực thi chính chứa tất cả thông tin ứng dụng của bạn, cácdependency, các tập lệnh đã cài đặt, v.v Không app nào có thể được thực thi nếu không có tệpnày.

- Public -> index.html: Điều này chỉ đơn giản là để xác định giao diện app của bạn với

tham chiếu đến cả kiểu (style.css) và xử lý (index.js) Ngoài index.html, chỉ cần tệpmanifest.json trong thư mục chung.

Lưu ý: div với id là “root” Dưới div này, tất cả nội dung của ứng dụng react của bạn sẽ được

xuất ra Bạn không cần phải thay đổi điều đó mà chỉ cần biết vị trí dữ liệu sẽ được đặt trong tệp.

- Src -> index.js: Ở đây, chúng ta đang import React và ReactDOM Chúng ta cũng đang

render mọi thứ về phần tử ‘root’ Bạn cũng không cần phải chạm hoặc thay đổi tệp này,nhưng chỉ cần biết rằng đây là cách cấu trúc của tệp.

index.js file

- Src -> styling files (style.css, index.css): Các tệp này để tùy chỉnh style để làm cho giao

diện người dùng trông đẹp Hãy tùy chỉnh nó theo sở thích của bạn.

Như đã đề cập, React có một khả năng tuyệt vời để mô-đun hóa code trong các componentriêng biệt Mặc dù bạn có thể tạo tất cả các component của mình trong một tệp App.js duy nhấtnhưng để tránh App.js dài và để viết clean code, bạn nên tạo một thư mục component và giữ cáctệp js riêng biệt cho từng component bạn cần.

- Src -> App.js: Đây là tệp xử lý chính Chúng ta import tất cả các class cần thiết và các

mô-đun thấp hơn tại đây.

Giải thích

Class App extends Components: syntax này cũng sẽ được sử dụng trong mỗi component khác

của chúng ta Về cơ bản, điều này nói lên rằng bất kỳ attribute (thuộc tính) nào có trongReact.Component, sẽ được mở rộng (về khả năng truy cập và sử dụng) thông qua App Class

Constructor(): Phương thức đầu tiên chúng ta gọi sau khi mở rộng component là phương thức

khởi tạo constructor cho một component React được gọi trước khi nó được mout Khi triển khaiconstructor cho lớp con React.Component, bạn nên gọi super (props) trước bất kỳ câu lệnh nàokhác Nếu không, this.props sẽ không được xác định trong constructor, điều này có thể dẫn đếnlỗi.

HandleChange():Như tên đã nói (Hãy nhớ: đặt tên là 90% của chương trình), đây là một

phương pháp được sử dụng để xác định cách App sẽ thực hiện bất kỳ thay đổi state nào (đã chọn/ bỏ chọn các tác vụ trong trường hợp này).

-Src -> TodoItem.js : Tệp này được chuẩn bị dưới dạng mô-đun thấp hơn của App.js Để

xác định component của một mục cụ thể trong to-do-list

-Src -> todosData.js: Tệp này lại được tôi tạo dưới dạng tệp data Và nếu phải thêm /

xóa một công việc cụ thể khỏi công việc cần làm của mình, cần hard code nó trong filedữ liệu (kể từ bây giờ).

 Cuối cùng là Kiểm tra: Kiểm chứng các thành phần của app

PHẦN III XÂY DỰNG ĐỒ ÁNMô phỏng trang web chat Real-times

Nhóm em chọn đề tài: “ Tìm hiểu về ReactJS và 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ếncùng bạn bè gần xa thông qua internet.

Các tính năng chính của trang web bao gồm:- Đăng nhập bằng Google/Facebook - Quản lý các phòng chat - Thêm thành viên vào phòng chat

- Hiển thị danh sách thành viên trong phòng chat - Nhắn tin

Các component của app bao gồm:

ChatRoom: là giao diện phòng chat.Login: Giao diện đăng nhập.

Modals: chức năng thêm phòng chat, mời thêm người dùng vào phòng chat.

Khi vô trang web sẽ bắt đầu ở trang login, ở đây ta có thể đăng nhập bằng tài khoản Google hoặcFacebook

Sau khi đăng nhập xong sẽ chuyển hướng sang trang chat:

Web chat bao gồm các thành phần sau:

- Thanh sidebar các phòng chat ở phía bên trái

Trong thanh sidebar thì gồm có danh sách các phòng mà người dùng tạo ra, nút thêm phòng để thêm các phòng chat cho người dùng dễ quản lý và nút đăng xuất (thoát khỏi tàikhoản)

- Khu vực chat là phần còn lại bao gồm 1 thanh sidebar nhỏ ở phía trên chứa tên phòng chat, mô tả của phòng chat và có 1 nút mời phía bên phải để mời thêm bạn bè vào phòng chat Và ở dưới cùng là thanh input để nhập nội dung đoạn chat vào đây.

Để mà tạo phòng chat ta nhấn vào nút thêm phòng và điền các thông tin sau Bao gồm tên phòng và mô tả phòng

Sau khi điền xong bấm nút Ok thì hệ thống sẽ thêm 1 phòng chat mới vào danh mục danh sách các phòng với tên và mô tả như thông tin mà người dùng đã điền vào.

Vì thời gian có hạn nên đồ án nhóm em chưa được hoàn chỉnh, em mong thầy sẽ đóng góp ý kiếnhỗ trợ cho đồ án của nhóm em được hoàn thiện hơn.

Link github đồ án: https://github.com/Phongtor21/messenger_WEB

Dễ dàng làm việc nhóm vì việc chia các task, chia màn hình ứng dụng đơn giản Mỗi người sẽđược đảm nhiệm làm một thành phần Khi các thành phần này hoàn thiện và kết nối hoàn chỉnh.Không xảy ra những sai sót hoặc nếu sai sẽ biết tách nhỏ từng giai đoạn để dễ khắc phục.Reactjs được đảm bảo bởi Facebook Từ nguồn gốc, cộng đồng, tài liệu của Facebook, bạn hoàntoàn có yên tâm gửi gắm dự án của mình cho Reactjs được thực hiện chất lượng nhất.

 Tương lai của ReactJS

Đội ngũ phát triển ReactJS vẫn đang cố gắng cam kết nâng cao tính hiệu quả của ReactJSvà chứng tỏ được sự phát triển nhanh chóng của react và vượt qua cả framework khác Trongtương lai ReactJS được kỳ vọng sẽ cải thiện được việc xử lý các lỗi trong component mà chúngcó thể làm hỏng state của component và cũng gây ra các lỗi trong quá trình render Đặc biệt cảithiện và có thêm những loại render mới hữu ích Với các chức năng như add thêm những đoạncú pháp mới và độc đáo hơn nhiều Điều này sẽ giúp ReactJS được sử dụng nhiều trong quátrình làm việc của lập trình viên.

Tài liệu kham khảo

Link To-Do-App: GitHub - AnjaliSharma1234/To-Do-App: A basic ToDo app using ReactJS

[1] React Website Tutorial: https://www.youtube.com/watch?v=YyGgqmIjR-M

[2] React JS Crash Course : https://www.youtube.com/watch?v=w7ejDZ8SWv8&t=1s

[3] React Crash Course for Beginners 2021https://www.youtube.com/watch?v=Dorf8i6lCuk

[4] React JS - React Tutorial for Beginners: https://www.youtube.com/watch?v=Ke90Tje7VS0

[5] Full React Course : https://www.youtube.com/watch?v=4UZrsTqkcW4

[1] Josh W.Comeau’s Blog: https://www.joshwcomeau.com/

[2] Overreacted: https://overreacted.io/

[3] Kent C Dodds’ Blog: https://kentcdodds.com/blog/

[4] Flavio Copes’ Blog: https://flaviocopes.com/

[5] Robin Wieruch’s Blog: https://www.robinwieruch.de/blog

[1] REACT.JS for the visual learner: https://leanpub.com/reactjsforthevisuallearner/read#leanpub-auto-chapter-1 what-is- this-all-about[2] SurviveJS – React: https://survivejs.com/react/introduction/

[3] HACKING WITH REACT: http://www.hackingwithreact.com/

[4] REACT JS NOTES FOR PROFESSIONALS: https://goalkicker.com/ReactJSBook/

Lời Cảm Ơn

"Đầu tiên, em xin gửi lời cảm ơn chân thành đến Trường Đại học Sư Phạm Hồ ChíMinh đã đưa môn học Công Nghệ Phần Mềm vào trương trình giảng dạy Đặcbiệt, em xin gửi lời cảm ơn sâu sắc đến giảng viên bộ môn Thầy Trần Sơn Hải vàThầy Nguyễn Tấn Duẩn đã dạy dỗ, truyền đạt những kiến thức quý báu cho emtrong suốt thời gian học tập vừa qua Trong thời gian tham gia lớp học môn CôngNghệ Phần Mềm, em đã có thêm cho mình nhiều kiến thức bổ ích, tinh thần họctập hiệu quả, nghiêm túc Đây chắc chắn sẽ là những kiến thức quý báu, là hànhtrang để em có thể vững bước sau này.

Bộ môn Công Nghệ Phần Mềm là môn học thú vị, vô cùng bổ ích và có tính thực tếcao Đảm bảo cung cấp đủ kiến thức, gắn liền với nhu cầu thực tiễn của sinh viên.Tuy nhiên, do vốn kiến thức còn nhiều hạn chế và khả năng tiếp thu thực tế cònnhiều bỡ ngỡ Mặc dù em đã cố gắng hết sức nhưng chắc chắn bài tiểu luận khócó thể tránh khỏi những thiếu sót và nhiều chỗ còn chưa chính xác, kính mongthầy xem xét và góp ý để bài tiểu luận của em được hoàn thiện hơn

Em xin chân thành cảm ơn!”