CHƯƠNG I: GIỚI THIỆU CHUNG 1. Đề tài - Tên đề tài: Tìm hiểu ReactJS và xây dựng website bán giày - Công nghệ sử dụng: ● Front-end: ReactJS, Axios ● Back-end: Restful API, NodeJS - Cơ sở dữ liệu: MongoDB 2. Lý do chọn đề tài Hiện nay, thương mại điện tử đã trở nên phổ biến với các doanh nghiệp và hầu hết người dân tại các nước phát triển và đang phát triển. Không thể phủ nhận những lợi ích to lớn mà nó mang lại, từ đó giúp cho thương mại điện tử trở thành một phần không thể tách rời trong chiến lược phát triển kinh doanh của các doanh nghiệp.
Nắm bắt được tiềm năng phát triển của thương mại điện tử trong tình hình dịch bệnh COVID-19 đang bùng nổ, các doanh nghiệp đã nắm bắt tình hình và tập trung đẩy mạnh phát triển các hình thức quảng cáo, mua bán dựa trên thương mại điện tử để mang lại nhiều lợi ích cũng như tiếp cận, đáp ứng yêu cầu của khách hàng một cách nhanh chóng hơn. Và các doanh nghiệp buôn bán giày cũng không bỏ qua cơ hội phát triển mà thương mại điện tử mang lại. Chính vì thế, nhóm quyết định thực hiện xây dựng một trang web bán giày để đáp ứng nhu cầu tìm kiếm, lựa chọn và mua sắm giày cho người tiêu dùng. Ngoài ra, để có thể hòa thiện được trang web, nhóm đã tìm hiểu và quyết định sử dụng công nghệ là ReactJS vì nó đã trở nên rất phổ biến bởi những tính năng linh hoạt và đơn giản cho các lập trình viên trong quá trình phát triển phần mềm.
Đối tượng nghiên cứu - Người làm đề tài: ● Sinh viên đang học tập và nghiên cứu tại trường Đại học Công nghệ Thông tin – ĐHQG Tp. Hồ Chí Minh. - Công nghệ, công cụ phát triển: ● Visual Studio Code ● ReactJS ● Restful API ● NodeJS ● MongoDB - Thiết kế giao diện: ● Phác thảo và thiết kế giao diện sử dụng công cụ Figma - Đối tượng trong phạm vi đề tài hướng đến: ● Quản lý hệ thống bán hàng ● Những doanh nghiệp phân phối hàng hóa trong và ngoài nước. ● Người tiêu dùng trong nước và (có thể) ngoài nước.
Phạm vi nghiên cứu - Website được nhóm xây dựng và phát triển bằng ReactJs trên môi trường web. - Tìm hiểu ReactJs để áp dụng vào phần mềm hỗ trợ người dùng có cái nhìn tổng quan về sản phẩm trước khi lựa chọn mua hàng. Phương pháp nghiên cứu - Cách tiếp cận: Website được xây dựng dựa trên mô hình MVC trên môi trường đa nền tảng. - Phương pháp nghiên cứu: ● Phương pháp đọc tài liệu.
● Phương pháp phân tích các website hiện nay đã xây dựng bằng cách sử dụng ReactJs. ● Phương pháp thực nghiệm. CHƯƠNG II:TÌM HIỂU REACTJS 1. Giới thiệu ReactJs là một thư viện Javascript mã nguồn mở được phát triển bởi Facebook để tạo ra những trang web hấp dẫn, nhanh và hiệu quả với mã hóa tối thiểu.
Mục đích cốt lõi của ReactJS không chỉ khiến cho trang web phải thật mượt mà còn phải nhanh, khả năng mở rộng cao và đơn giản. ReactJs phân tách các trang web thành các thành phần riêng lẻ. Chính vì vậy, thay vì làm việc trên toàn bộ ứng dụng web, ReactJs cho phép một lập trình viên có thể phân tách giao diện người dùng phức tạp thành các thành phần đơn giản hơn. Lịch sử phát triển của ReactJs - React được tạo ra bởi Jordan Walke – một kỹ sư phần mềm của Facebook.
Ông đã cho phát hành nguyên mẫu đầu tiên của React được gọi là “FaxJS”. Nó được triển khai lần đầu tiên trên News Feed của Facebook vào năm 2011 và sau đó trên Instagram vào năm 2012. - Nó được mở mã nguồn (open-sourced) tại JSConf US tháng 5 năm 2013. - Vào ngày 26 tháng 9 năm 2017, React 16.0 được phát hành ra công chúng.
- Vào ngày 16 tháng 2 năm 2019, React 16.8 đã được phát hành ra công chúng. Bản phát hành đã giới thiệu React Hooks. - Vào ngày 10 tháng 8 năm 2020, React v17.0 đã được phát hành ra công chúng, đáng chú ý là bản phát hành lớn đầu tiên không có thay đổi lớn đối với API dành cho nhà phát triển React. - Phiên bản hiện tại là v18.
Tính năng của ReactJs Tính chất của ReactJs: - ReactJs mang tính chất khai báo. - ReactJs rất đơn giản. - ReactJs dựa trên các thành phần riêng lẻ. - ReactJs hỗ trợ phía máy chủ - ReactJs được ứng dụng rất rộng rãi.
- ReactJs rất nhanh. - ReactJs rất dễ để học. JSX JSX là một phần mở rộng cú pháp cho JavaScript. Trong React, thay vì sử dụng JavaScript thông thường để tạo khuôn mẫu, nó sẽ sử dụng JSX.
JSX là một JavaScript đơn giản cho phép trích dẫn HTML và sử dụng các cú pháp thẻ HTML này để hiển thị các thành phần con. Cú pháp HTML được xử lý thành các lệnh gọi Javascript của React Framework. Tuy nhiên, các nhà phát triển không nhất thiết phải sử dụng JSX trong phát triển React, nhưng có sự khác biệt lớn giữa việc viết tài liệu React.js bằng JSX và JavaScript. Redux Redux là một predictable state management tool cho các ứng dụng Javascript.
Nó giúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong các môi trường khác nhau (client, server, and native) và dễ dàng để test. Redux ra đời lấy cảm hứng từ tư tưởng của ngôn ngữ Elm và kiến trúc Flux của Facebook. Do vậy Redux thường dùng kết hợp với React. Single Way Data Flow React.js được thiết kế để chỉ hỗ trợ dữ liệu đang chảy xuôi dòng, theo một hướng.
Nếu dữ liệu phải chảy theo hướng khác, bạn sẽ cần các tính năng bổ sung. React chứa một tập hợp các giá trị bất biến được chuyển đến trình kết xuất thành phần dưới dạng thuộc tính trong các thẻ HTML. Các thành phần không thể sửa đổi trực tiếp bất kỳ thuộc tính nào nhưng hỗ trợ chức năng gọi lại để thực hiện sửa đổi. Virtual DOM React chứa một bản đại diện của DOM thực trong bộ nhớ được gọi là Virtual DOM.
Thao tác DOM thực chậm hơn nhiều so với VDOM vì không có gì được vẽ trên màn hình. Khi trạng thái của bất kỳ đối tượng nào thay đổi, VDOM chỉ sửa đổi đối tượng đó trong DOM thực thay vì cập nhật toàn bộ đối tượng. Điều đó làm cho mọi thứ di chuyển nhanh chóng, đặc biệt là so với các công nghệ front-end khác phải cập nhật từng đối tượng ngay cả khi chỉ một đối tượng thay đổi trong ứng dụng web. Lợi ích khi sử dụng ReactJs ● Phù hợp với đa dạng thể loại website: ReactJS khiến cho việc khởi tạo website dễ dàng hơn bởi vì bạn không cần phải code nhiều như khi tạo trang web thuần chỉ dùng JavaScript, HTML và nó đã cung cấp cho bạn đủ loại “đồ chơi” để bạn có thể dùng cho nhiều trường hợp.
● Tái sử dụng các Component: Nếu bạn xây dựng các Component đủ tốt, đủ flexible để có thể thỏa các “yêu cầu” của nhiều dự án khác nhau, bạn chỉ tốn thời gian xây dựng ban đầu và sử dụng lại hầu như toàn bộ ở các dự án sau. Không chỉ riêng mỗi ReactJS mà các framework hiện nay cũng đều cho phép chúng ta thực hiện điều đó, ví dụ Flutter chẳng hạn. ● Có thể sử dụng cho cả Mobile application: Hầu hết chúng ta đều biết rằng ReactJS được sử dụng cho việc lập trình website, nhưng thực chất nó được sinh ra không chỉ làm mỗi đều đó. Nếu bạn cần phát triển thêm ứng dụng Mobile, thì hãy sử dụng thêm React Native – một framework khác được phát triển cũng chính Facebook, bạn có thể dễ dàng “chia sẻ” các Component hoặc sử dụng lại các Business Logic trong ứng dụng.
● Thân thiện với SEO: SEO là một phần không thể thiếu để đưa thông tin website của bạn lên top đầu tìm kiếm của Google. Bản chất ReactJS là một thư viện JavaScript, Google Search Engine hiện nay đã crawl và index được code JavaScript, tuy nhiên bạn cũng cần thêm một vài thư viện khác để hỗ trợ điều này nhé! ● Debug dễ dàng: Facebook đã phát hành 1 Chrome extension dùng trong việc debug trong quá trình phát triển ứng dụng. Điều đó giúp tăng tốc quá trình release sản phẩm cung như quá trình coding của bạn. ● Công cụ phát triển web hot nhất hiện nay: Nếu bạn nhìn vào số liệu thống kê từ Google Trend ở Việt Nam ở hình bên dưới, dạo lướt qua các trang tuyển dụng hàng đầu ở Việt Nam như Topdev, Itviec, v.v bạn sẽ thấy số lượng tuyển dụng cho vị trí React Developer là cực kỳ lớn cùng với mức lương vô cùng hấp dẫn và độ phổ biến hiện tại của ReactJS trên thị trường Việt Nam là như thế nào.
CHƯƠNG 3: TÌM HIỂU CÁC CÔNG NGHỆ ỨNG DỤNG TRONG ĐỀ TÀI 1. Tổng quan về JS 1. Khái niệm Javascript chính là một ngôn ngữ lập trình với khả năng đem tới sự sinh động khi thiết kế website. Đây là dạng ngôn ngữ theo kịch bản, dựa trên chính đối tượng phát triển có sẵn, hoặc là tự định nghĩa ra.
Chính vì tính tiện lợi, hiệu quả ứng dụng cao mà ngôn ngữ lập trình này được tin dùng ngày càng nhiều, ứng dụng rộng rãi trong các website hiệu quả. Ưu điểm ● Sử dụng Javascript được thực hiện từ phía khách hàng: Điều này tức là các mã được tiến hành thực hiện thông qua bộ vi xử lý của chính người dùng, thay vì sử dụng trên máy chủ web. Chính đặc điểm này giúp việc tiết kiệm năng thông, đồng thời giảm những căng thẳng, hoạt động quá nhiều trên máy chủ web dễ dàng hơn. ● Là ngôn ngữ lập trình dễ dàng sử dụng: Đơn giản, dễ dàng tìm hiểu và sử dụng là đặc điểm nổi bật của ngôn ngữ lập trình này.
Với những cú pháp khá tương đồng với tiếng Anh thì việc sử dụng Javascript trở nên dễ dàng, dễ tiếp cận hơn rất nhiều. Thông qua mô hình DOM được sử dụng, cung cấp tới nhiều tính năng hữu ích, được viết sẵn đem lại khả năng đáp ứng tốt cho những nhu cầu, những đòi hỏi khác nhau từ phía người dùng. ● Đánh giá cao ở độ nhanh chóng với người dùng cuối: Việc sử dụng ngôn ngữ JS có khả năng đảm bảo khi mã được thực hiện trên thiết bị máy tính của người dùng thì quá trình xử lý, lẫn kết quả đều hoàn thành gần như ngay lập tức. Thời gian cụ thể phụ thuộc vào từng nhiệm vụ cụ thể mất thời gian nhất định, song thường nó rất nhanh có thể giúp vấn đề được giải quyết.
● Mang tới các tính năng bổ sung cho các website: Thông qua bên thứ ba như Grease monkey giúp đảm bảo cho các nhà phát triển ngôn ngữ Javascript dễ dàng viết các đoạn mã, từ đó thực hiện trên website hiệu quả như mong muốn.