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

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

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 Đối tượng nghiên cứu Phạm vi nghiên cứu Lý chọn đề tài Phương pháp nghiên cứu Kết cấu tiểu luận 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 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 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 .2 Mô trang web chat Real-times .2 KẾT LUẬN Tài liệu kham khảo 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 Phần mềm thực thi mô trình tìm hiểu nghiên cứu, nên phạm vi hoạt động cịn nhiều hạn chế nên thực thi trường học doanh nghiệp nhỏ 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 Khi vơ trang web bắt đầu trang login, ta đăng nhập tài khoản Google Facebook Sau đăng nhập xong chuyển hướng sang trang chat: Web chat bao gồm thành phần sau: - Thanh sidebar phòng chat phía bên trái Trong sidebar gồm có danh sách phòng mà người dùng tạo ra, nút thêm phòng để thêm phòng chat cho người dùng dễ quản lý nút đăng xuất (thoát khỏi tài khoản) - Khu vực chat phần lại bao gồm sidebar nhỏ phía chứa tên phịng chat, mơ tả phịng chat có nút mời phía bên phải để mời thêm bạn bè vào phòng chat Và input để nhập nội dung đoạn chat vào Để mà tạo phòng chat ta nhấn vào nút thêm phòng điền thơng tin sau Bao gồm tên phịng mơ tả phịng Sau điền xong bấm nút Ok hệ thống thêm phịng chat vào danh mục danh sách phịng với tên mơ tả 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 hồn chỉnh, em mong thầy đóng góp ý kiến hỗ trợ cho đồ án nhóm em hoàn thiện Link github đồ án: https://github.com/Phongtor21/messenger_WEB KẾT LUẬN Trong React, giao diện xây dựng từ việc kết hợp components Bạn hiểu đơn giản component hàm, nhận giá trị bạn truyền vào trả số đầu React giúp front-end javascript dễ sử dụng hơn, tốc độ nhanh cách sử dụng Virtual DOM Sử dụng thuật tốn thơng minh để tạo lại thành phần khác biệt cũ Bởi hai HTML cũ lưu nhớ, trình xử lý diễn siêu nhanh Dễ dàng làm việc nhóm việc chia task, chia hình ứng dụng đơn giản Mỗi người đảm nhiệm làm thành phần Khi thành phần hồn thiện kết nối hồn chỉnh Khơng xảy sai sót sai biết tách nhỏ giai đoạn để dễ khắc phục Reactjs đảm bảo Facebook Từ nguồn gốc, cộng đồng, tài liệu Facebook, bạn hồn tồn có n tâm gửi gắm dự án cho Reactjs thực chất lượng  Tương lai ReactJS Đội ngũ phát triển ReactJS cố gắng cam kết nâng cao tính hiệu ReactJS chứng tỏ phát triển nhanh chóng react vượt qua framework khác Trong tương lai ReactJS kỳ vọng cải thiện việc xử lý lỗi component mà chúng làm hỏng state component gây lỗi trình render Đặc biệt cải thiện có thêm loại render hữu ích Với chức add thêm đoạn cú pháp độc đáo nhiều Điều giúp ReactJS sử dụng nhiều trình làm việc 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 Youtube: [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 Blogs: [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 Ebook: [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/ [5] REACT NATIVE NOTES FOR PROFESSIONALS: https://goalkicker.com/ReactNativeBook/ 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 Đặc biệt, em xin gửi lời cảm ơn sâu sắc đến giảng viên môn Thầy Trần Sơn Hải Thầy Nguyễn Tấn Duẩn dạy dỗ, truyền đạt kiến thức quý báu cho em 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ông Nghệ Phần Mềm, em có thêm cho nhiều kiến thức bổ ích, tinh thần học tập hiệu quả, nghiêm túc Đây chắn kiến thức quý báu, hành trang để em vững bước sau Bộ môn Công Nghệ Phần Mềm môn học thú vị, vơ bổ ích 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 sinh viên Tuy nhiên, vốn kiến thức nhiều hạn chế khả tiếp thu thực tế nhiều bỡ ngỡ Mặc dù em cố gắng chắn tiểu luận khó tránh khỏi thiếu sót nhiều chỗ cịn chưa xác, kính mong thầy xem xét góp ý để tiểu luận em hoàn thiện Em xin chân thành cảm ơ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 Phần mềm thực thi mơ q trình tìm hiểu nghiên cứu, nên phạm vi hoạt động nhiều hạn chế nên thực thi trường. .. 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... khắc phục Reactjs đảm bảo Facebook Từ nguồn gốc, cộng đồng, tài liệu Facebook, bạn hồn tồn có n tâm gửi gắm dự án cho Reactjs thực chất lượng  Tương lai ReactJS Đội ngũ phát triển ReactJS cố gắng