TÌM HIỂU FRAMEWORK SPRING CHO BACKEND, REACTJS CHO FRONTEND VÀ XÂY DỰNG WEBSITE BÁN GIÀY MINH HỌA

Bài báo cáo này đạt điểm 8.0 trở lên giúp cho các bạn sinh viên tham khảo và cho ra kết quả tốt trong môn thực tập. Nhóm tôi xin cam đoan đây là công trình nghiên cứu công nghệ độc lập của riêng nhóm chúng tôi, không sao chép từ bất khi đồ án nào. Các số liệu sử dụng phân tích trong luận án có nguồn gốc rõ ràng, đã công bố theo đúng quy định. Các kết quả nghiên cứu trong luận án do nhóm tôi tự tìm hiểu, phân tích một cách trung thực, khách quan và phù hợp với thực tiễn. Mọi sự tham khảo trong đồ án này đều được trích dẫn các nguồn tài liệu trong danh mục tài liệu tham khảo. Các kết quả này chưa từng được công bố trong bất kỳ nghiên cứu nào khác.

TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI TP HỒ

CHÍ MINH

TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

THỰC TẬP TỐT NGHIỆP

TÌM HIỂU FRAMEWORK SPRING CHO BACKEND, REACTJS CHO FRONTEND VÀ XÂY DỰNG

WEBSITE BÁN GIÀY MINH HỌA

Ngành: CÔNG NGHỆ THÔNG TIN

Chuyên ngành: TRUYỀN THÔNG VÀ MẠNG MÁY TÍNH

Giảng viên hướng dẫn : Trần Đức DoanhSinh viên thực hiện :

Cao Tiến Quang - 1651150026 - KM16Trần Phước Thành - 1651150034 - KM16

TP Hồ Chí Minh, 2020

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

TP Hồ Chí Minh, ngày … tháng … năm 2020 Giảng viên hướng dẫn

NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

TP Hồ Chí Minh, ngày … tháng … năm 2020 Giảng viên phản biện

LỜI CAM ĐOAN

Nhóm tôi xin cam đoan đây là công trình nghiên cứu công nghệ độc lập củariêng nhóm chúng tôi, không sao chép từ bất khi đồ án nào

Các số liệu sử dụng phân tích trong luận án có nguồn gốc rõ ràng, đã công bốtheo đúng quy định Các kết quả nghiên cứu trong luận án do nhóm tôi tự tìmhiểu, phân tích một cách trung thực, khách quan và phù hợp với thực tiễn Mọi sự tham khảo trong đồ án này đều được trích dẫn các nguồn tài liệu trongdanh mục tài liệu tham khảo

Các kết quả này chưa từng được công bố trong bất kỳ nghiên cứu nào khác

TP Hồ Chí Minh, ngày … tháng … năm 2020 Sinh viên thực hiện

MỤC LỤC

DANH MỤC CÁC TỪ VIẾT TẮT iii

DANH MỤC HÌNH ẢNH v

DANH MỤC BẢNG vii

LỜI MỞ ĐẦU 1

CHƯƠNG 1: TÌM HIỂU VỀ FRAMEWORK 5

1.1 Tìm hiểu Spring Framework 5

1.1.1 Khái Niệm 5

1.1.2 Lợi ích 5

1.1.3 Cài đặt Spring framework 6

1.1.4 Kiến trúc, các module của Spring Framework 8

1.1.5 Các dự án trong Spring Framework 14

1.2 Tìm hiểu ReactJS 15

1.2.1 Giới thiệu 15

1.2.2 ReactJS là gì? 15

1.2.3 Cài đặt ReactJS 22

1.2.4 Các thư viện hỗ trợ 24

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 28

2.1 Yêu cầu đề tài 28

2.2 Hoạt động của trang web 28

2.3 Đối tượng sử dụng 29

2.4 Phân tích các chức năng của hệ thống 29

2.5 Mô tả các chức năng cho từng đối tượng 31

2.5.1 Các chức năng của đối tượng Customer 31

2.5.2 Các chức năng của đối tượng Administrator 33

2.6 Các biểu đồ thiết kế hệ thống 34

2.6.1 Biểu đồ hoạt động 34

2.6.2 Thiết kế các bảng dữ liệu cho trang web 42

CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG MINH HỌA 47

3.1 Trang chủ 47

3.2 Trang danh sách sản phẩm 48

3.3 Trang chi tiết 49

3.4 Giỏ hàng 50

3.5 Thanh toán 51

3.5.1 Địa chỉ giao hàng 51

3.5.2 Trang thanh toán và đặt mua 51

3.6 Trang quản trị 52

3.6.1 Trang quản lý sản phẩm 52

3.6.2 Trang quản lý người dùng 52

3.7 Đăng ký và đăng nhập 53

CHƯƠNG 4: KẾT LUẬN VÀ ĐÁNH GIÁ 53

TÀI LIỆU THAM KHẢO 54

DANH MỤC CÁC TỪ VIẾT TẮT API: Application Program Interface

AJAX: Asynchronous Javascript and XML

EJB: Enterprise JavaBeans

DOM: Document Object Model

HTML: Hypertext Markup Language

IDE: Integrated Development Environment

JEE: Java Enterprise Edition

JDBC: Java Database Connectivity

JDK: Java Development Kit

JDO: Java Data Objects

JNDI: Java Naming and Directory Interface

JPA: Java Persistence API

JS: Javascript

JSX: Javascript XML

MVC: Model View Controller

NPM: Node Package Manager

ORM: Object Relational Mapping

PJO: Plain Javascript Object

POJO: Plain Old Java Object

SPA: Single Page Application

STOMP: Streaming Text Oriented Messaging Protocol UI: User Interface

XML: Extensible Markup Language

DANH MỤC HÌNH ẢNH

Hình 1.1: Kiến trúc Spring framework

Hình 1.2 : Spring IOC container

Hình 2.2: Biểu đồ Use Case

Hình 2.3: Biểu đồ hoạt động đăng nhập

Hình 2.4: Biểu đồ hoạt động đăng xuất

Hình 2.5: Biểu đồ chức năng xem thông tin sản phẩmHình 2.6: Biểu đồ chức năng thêm sản phẩm vào giỏ hàngHình 2.7: Biểu đồ chức năng thêm sản phẩm vào giỏ hàng

Hình 2.8: Biểu đồ chức năng xóa sản phẩm

Hình 2.9: Biểu đồ chức năng xóa sản phẩm

Hình 2.10 : Biểu đồ chức năng xóa sản phẩmHình 3.1: Trang chủ - Thanh điều hướng, slideHình 3.2: Trang chủ - Danh sách sản phẩm

Hình 3.3: Trang chủ - Một số sản phẩm mới nhấtHình 3.4: Trang danh sách sản phẩm

Hình 3.5: Thông tin chi tiết sản phẩm

LỜI MỞ ĐẦU

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

Nếu như trước đây khi Internet chưa ra đời và ngay cả khi nó ra đời được mộtthời gian, con người thường có thói quen mua bán hàng hóa, giao dịch trêncác môi trường truyền thống như siêu thị, cửa hàng, khu chợ hay trung tâmthương mại Với hình thức mua bán truyền thống này, người mua phải đến tậnnơi để xem xét sản phẩm, trả giá, thanh toán và nhận sản phẩm Tuy nhiên giờđây, với hình thức bán hàng trực tuyến, người mua hàng và người bán có thểtương tác trực tiếp với nhau trên Internet Ưu điểm của bán hàng trực tuyếnđối với các cửa hàng, doanh nghiệp đó là không bị giới hạn về thời gian vàkhông gian, có thể bán hàng mọi lúc, mọi nơi 24/7, tiết kiệm chi phí đầu tưthuê mặt bằng hay nhân công, phạm vi tiếp cận rộng bao gồm mọi vùng miềntrong nước và cả ngoài nước từ đó mang lại lợi nhuận và doanh thu cao, hiệuquả hơn so với bán hàng truyền thống Có rất nhiều hình thức bán hàng trựctuyến khác nhau như bán hàng trên Facebook, bán hàng trên Youtube,….tuynhiên bán hàng trực tuyến qua website được nhiều cửa hàng, doanh nghiệp,công ty

Hiện nay, các công nghệ tiên tiến phát triển ngày càng mạnh mẽ và kết hợpvới sự phát triển mạnh mẽ của Thương mại điện tử (TMĐT) và được ứngdụng ngày càng nhiều vào các lĩnh vực kinh tế, sản xuất cũng như đời sốngthường nhật của con người để phục cho các nhu cầu và mục đích của mọingười Một điểm tiêu biểu trong việc phát triển các công nghệ đó phải kể đếnviệc ứng dụng công nghệ thông tin vào hầu hết các hoạt động Nhờ đó, cáccông việc được thực hiện nhanh, chính xác và đạt kết quả cao hơn rất nhiều

Khi xã hội ngày càng phát triển, mức sống của người dân được nâng cao thunhập kinh tế ngày càng được cải thiện thì việc mua các vật dung điện tử haygia dụng,… không còn trở nên xa lạ với mọi người nữa mà ngược lại nó làcác vật dụng thông dụng hàng ngày không thể thiếu đối với mọi người hiệnnay Hầu hết mọi người thường ra ngoài và mua các vật dụng gia đình hay cáctrang thiết bị điện tử hay các sản phẩm công nghệ như điện thoại, bếp,… vàtốn rất nhiều thời gian, công sức khi đi mua, thì bây họ có thể xem và muachúng một cách thiết thực nhất, lựa chọn cái yêu thích và có thể đáp ứng đượcnhu cầu cho người dùng thông qua mạng Internet trong môi trường Thươngmại điện tử hiện nay

Với các lý do trên và qua tìm hiểu thì nhóm sẽ thực hiện đồ án thực tập tốtnghiệp về ứng dụng bán các mặt hàng giày trên môi trường Thương mại điện

tử Sẽ giúp mọi người có thể mua các mặt hàng cần thiết cho mình và gia đìnhnhanh và tiết kiệm thời gian và công sức di chuyển

Do đó nhóm xin thực hiện đề tài: “Tìm hiểu Frameword Spring cho Backend,ReactJS cho Frontend và xây dựng website bán giày minh họa”

2 Tình hình nghiên cứu

Từ lâu cho đến hiện nay có rất nhiều các ứng dụng thành công trong việc thựchiện bán các đồ điện tử ,…thông qua Internet, bởi Thương mại điện tử pháttriển cực mạnh trong thập kỷ qua Một số ứng dụng đã phát triền thành công

đó là như: Tiki, Shoppe, Nguyenkim, đó là những ứng đã và đang hoạt độngmạnh và có qui mô lớn tại Việt Nam

Ứng dụng được xây dựng với định hướng giúp mọi người mua sắm thuận tiện

và nhanh hơn, có tính chính xác, và không mất nhiều thời gian

3 Mục đích nghiên cứu đề tài

- Quản lý các thông tin về khách hàng, admin.

- Đưa ra các sản phẩm giày mới trên ứng dụng

- Cung cấp cho khách hàng những cập nhật mới nhất về sản phẩm và giácả

- Đưa ra các thông kê và báo cáo chính xác về số lượng sản phẩm vàkhách hàng

4 Nhiệm vụ nghiên cứu

Tìm hiểu và phân tích quy trình hoạt động của ứng dụng

- Tìm về các công cụ để xây dựng và thiết kế hệ thống như: Eclipse,Visual Studio Code, MySQL, Postman, …

- Tìm hiểu Framework Spring cho Backend, ReactJS cho Frontend vàcác thư viện hỗ trợ liên quan

- Demo hệ thống đã thực hiện trên máy

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

- Khảo sát hiện trạng về ứng dụng khác hoạt động trên môi trườngThương mại điện tử

- Thu thập và tìm hiểu thông tin từ mạng internet và các trang webthương mại điện tử hiện có

- Phân tích và xây dựng, thiết kế hệ thống theo yêu cầu phù hợp củangười dùng

- Nghiên cứu các công cụ và thuộc tính để thiết kế và xây dựng

6 Các kết quả đạt được của đề tài

- Giúp nhóm đề tài hiểu rõ hơn quy trình hoạt động về bán hàng trựctuyến

- Giúp cho việc quản lý hàng hóa thuận tiện và chính xác hơn.

- Tạo thuận tiện cho khách hàng mua hàng trên Website và thực hiệnđúng các quy trình khi mua hàng trực tuyến

- Tạo ra được một ứng dụng thương mại điện tử cho phép người dụngthực hiện việc mua sản phẩm hiện có trên ứng dụng

- Ứng dụng có các quyền truy cập khác nhau như : admin hay user

- Có các chức năng cơ bản của một ứng dụng thương mại điện tử : phântrang, giỏ hàng ,đăng nhập, đăng kí ,tạo sản phẩm ,quản lí danh sáchsản phẩm,…

- Nhóm được tìm hiểu, nghiên cứu về các công nghệ, kỹ thuật để xâydựng một website hoàn chỉnh, đầy đủ chức năng

- Nâng cao khả năng làm việc nhóm, quản lý công việc, khả năng tự họchỏi, trau dồi kiến thức,

7 Kết cấu của đề tài (Thực tập tốt nghiệp)

 Chương 1: Tìm hiểu về framework

 Chương 2: Phân tích và thiết kế hệ thống

 Chương 3: Xây dựng ứng dụng minh họa

 Chương 4: Kết luận và đánh giá

CHƯƠNG 1: TÌM HIỂU VỀ FRAMEWORK

1.1 Tìm hiểu Spring Framework

1.1.1 Khái Niệm

 Spring là framework phát triển ứng dụng phổ biến nhất dành cho JavaEnterprise Ban đầu nó được viết bởi Rod Johnson và lần đầu tiên đượcphát hành theo giấy phép Apache 2.0 vào tháng 6 năm 2003 Spring cókích thướng nhẹ, phiên bản cơ bản của Spring framework có kíchthước khoảng 2MB

 Được xây dựng dựa trên 2 nguyên tắc design chính là: DependencyInjection và Aspect Oriented Programming

 Là một Java Platform mã nguồn mở, một giải pháp gọn nhẹ dành choJava Enterprise Với Spring Framework các nhà phát triển có thể tạo racác mã có hiệu suất cao, dễ kiểm thử và có thể sử dụng lại được

 Không chỉ giúp chúng ta phát triển web mà spring framework nó còn là

1 hệ sinh thái phát triển rất nhiều nền tảng khác như cloud, mobile, app  vì nó dạng tích hợp, nhúng vô là xài

1.1.2 Lợi ích

 Spring cho phép lập trình viên sử dụng POJO Việc sử dụng POJO giúpbạn không phải làm việc với EJB, ứng dụng, các luồng chạy, cấuhình… đơn giản hơn rất nhiều

 Spring được tổ chức theo kiểu mô đun Số lượng các gói và các lớp khánhiều, nhưng bạn chỉ cần quan tâm đến những gì bạn cần và không cầnquan tâm đến phần còn lại

 Spring hỗ trợ sử dụng khá nhiều công nghệ như ORM Framework, cáclogging framework, JEE, các thư viện tạo lịch trình (Quartz và JDKtimer)…

 Module Web của Spring được thiết kế theo mô hình MVC nên nó cungcấp đầy đủ các tính năng giúp thay thế các web framework khác nhưStruts

1.1.3 Cài đặt Spring framework

 Yêu cầu đã cài đặt:

 Bộ phát triển Java (JDK)

 Thiết lập Apache Tomcat

 Thiết lập Eclipse (IDE)

 Thiết lập thư viện Spring

 Sau đây là các bước đơn giản để tải xuống và cài đặt thư viện Springframework trên máy của bạn

 Bạn cần phải tải bản zip cho Windows và tz cho Unix

 Tải xuống phiên bản Spring mới nhất từ

https://repo.spring.io/release/org/springframework/spring/

 Các bài hướng dẫn trên viettuts.vn sử dụng phiên bản Spring5.2.6.RELEASE trên Windows Sau khi đã tải xuống tệp tin đã giảinén, nó sẽ tạo cấu trúc thư mục bên trong \lib\

 Tiếp theo là bạn phải chọn ra những gì cần sử dụng và thêm vàoCLASSPATH cho project của bạn

 Dưới đây là một số ví dụ bộ thư viện phát triển ứng dụng SpringWeb:

 spring-aop-5.2.6.RELEASE

 spring-aspects-5.2.6.RELEASE

1.1.4 Kiến trúc, các module của Spring Framework

Spring được chia làm nhiều module khác nhau, tùy theo mục đích phát triểnứng dụng mà ta dùng 1 trong các module đó. 

Hình 1.1: Kiến trúc Spring framework 1.1.4.1 Core Container

1.1.4.1.1 Module spring-core 

IoC(Inversion of Control) container được xem là cốt lõi của SpringFramework, giúp lập trình viên quản lý quá trình thực thi DI (DependencyInjection) trong ứng dụng một cách tự động

Spring IoC Container là một chương trình (một module trong framwork) đảm nhiệm việc Inject sự phụ thuộc (dependecies) vào các đốitượng.

spring-Hình 1.2 : Spring IOC container

1.1.4.1.2 Module  Spring Bean

Đối tượng được quản lý bởi Spring IoC container Định nghĩa của bean baogồm các thông tin được gọi là cấu hình siêu dữ liệu (configuration metadata)

 Spring BeanFactory Container

 Container đơn giản cung cấp những hỗ trợ cơ bản cho for DI và đượcđịnh nghĩa bởi interface org.springframework.beans.factory.BeanFactory

 Lớp XmlBeanFactory implements BeanFactory.Container này sẽ đọccấu hình từ file XML và sử dụng nó để tạo cấu hình cho hệ thốnghoặc ứng dụng

 The BeanFactory thường thích hợp sữ dụng ở nơi mà tài nguyên bịgiới hạn như trên thiết bị di động.

1.1.4.1.3 Module spring-context

 Xây dựng trên một nền tảng vững chắc được cung cấp bởi các moduleCore và Beans, được sử dụng để truy cập vào các đối tượng trongframework-style tương tự như việc đăng ký một JNDI. 

 ApplicationContext

Các lớp thực thi ApplicationContext:

- FileSystemXmlApplicationContext: Container này tải các địnhnghĩa của bean từ file XML Cần cung cấp đầy đủ đường dẫn củafile XML cấu hình bean đến constructor

- ClassPathXmlApplicationContext: Container này tải các địnhnghĩa của bean từ file XML Cần cung cấp đầy đủ đường dẫn củafile XML, cần set đúng CLASSPATH vì container này sẽ tìmkiếm

file XML cấu hình trong CLASSPATH

- WebXmlApplicationContext: Container này sẽ tải file XML địnhnghĩa các bean trong ứng dụng web

Hình 1.3 : ApplicationContext

1.1.4.1.4 Module spring-expression

Cung cấp một Expression Language mạnh mẽ cho việc truy vấn và tính toánmột đồ thị đối tượng lúc runtime Nó được kế thừa và mở rộng từ unifiedexpression language.Ngôn ngữ này hỗ trợ setting và getting giá trị cácproperty, gọi phương thức, truy cập vào nội dung của mảng, tập hợp và chỉmục, operator logic và tính toán, đặt tên biến, và truy xuất các đối tượng theotên từ IoC container của Spring

1.1.4.2 Data Access/Integration

1.1.4.2.1 Module spring-jdbc

Cung cấp một lớp JDBC-abstraction để loại bỏ những code tẻ nhạt cả JDBC

và phân tích những mã lỗi cụ thể của database-vendor

Chứa các tính năng tạo và sử dụng các message Từ Spring Framework 4.1,

nó được tích hợp với spring-messaging

1.1.4.3.2 Module spring-webmvc 

Bao gồm việc triển khai Model-View-Controller (MVC) của Spring cho cácứng dụng web

1.1.4.3.3 Module spring-websocket 

Cung cấp hỗ trợ cho WebSocket-based, giao tiếp hai chiều giữa client vàserver trong các ứng dụng web

1.1.4.3.4 Module springwebmvc-portlet

Cung cấp việc triển khai MVC được sử dụng trong môi trường portlet và ánh

xạ chức năng của module Web-Servlet

1.1.4.4 Các module khác

1.1.4.4.1 Module AOP

Cung cấp một thực hiện lập trình hướng khía cạnh cho phép bạn xác địnhphương pháp-chặn và pointcuts để sạch tách mã thực hiện chức năng đó nênđược tách ra

1.1.4.4.5 Module Test 

Hỗ trợ việc kiểm tra các thành phần mùa xuân với JUnit hoặc TestNG khuônkhổ

1.1.5 Các dự án trong Spring Framework

Trên thực tế Spring Framework là một tập hợp của nhiều dự án con SpringCore như chúng ta đã tìm hiểu là nền tảng của các dự án trong SpringFramework Một một dự án sẽ đảm nhận một chức năng riêng trong việc xâydựng các ứng dụng doanh nghiệp Chúng ta sẽ cùng điểm qua các dự án lớntrong Spring

1.1.5.1 Spring MVC

Spring MVC được thiết kế dành cho việc xây dựng các ứng dụng nền tảngweb Đây là một dự án chúng ta không thể bỏ qua khi xây dựng các ứng dụngJava web

1.1.5.5 Spring Integration

Spring Integration là một implementation của Enterprise Integration Patterns(EIP) Dự án này thiết kế một kiến trúc hướng thông điệp hỗ trợ việc tích hợpcác hệ thống bên ngoài

Reactjs là một thư viện Javascript đang nổi lên trong những năm gần đây với

xu hướng Single Page Application (SPA) Trong khi những framework khác

cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơngiản và dễ dàng phối hợp với những thư viện Javascript khác

Nếu như AngularJS là một Framework cho phép nhúng code javascript trongcode html thông qua các attribute như ng-model, ng-repeat thì với react làmột thư viện cho phép nhúng code HTML trong code javascript nhờ vào JSX,bạn có thể dễ dàng lồng các đoạn HTML vào trong JS Tích hợp giữajavascript và HTML vào trong JSX làm cho các component dễ hiểu hơn

1.2.2 ReactJS là gì?

React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựngnhững thành phần (components) UI có tính tương tác cao, có trạng thái và có

thể sử dụng lại được React được sử dụng tại Facebook trong production, vàinstagram được viết hoàn toàn trên React.

Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt độngtrên phía client, mà còn được render trên server và có thể kết nối với nhau.React so sánh sự thay đổi giữa các giá trị của lần render này với lần rendertrước và cập nhật ít thay đổi nhất trên DOM Trước khi đến cài đặt và cấuhình, chúng ta sẽ đi đến một số khái niệm cơ bản:

1.2.2.1 Virtual DOM

Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng Việc chỉ node gốcmới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa vớiviệc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đếntốc độ xử lý React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đềnày.Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tincần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổigiữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM treethật

Hình 1.4: Virtual DOM

React sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều Dữ liệuđược truyền từ parent đến child thông qua props Luồng dữ liệu đơn giản giúpchúng ta dễ dàng kiểm soát cũng như sửa lỗi

s

Với các đặc điểm ở trên, React dùng để xây dựng các ứng dụng lớn mà dữliệu của chúng thay đổi liên tục theo thời gian Dữ liệu thay đổi thì hầu hếtkèm theo sự thay đổi về giao diện Ví dụ như Facebook: trên Newsfeed củabạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share,comment liên tục thay đổi Khi đó React sẽ rất hữu ích để sử dụng

1.2.2.2 Giới thiệu về JSX

JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript (nóđược khuyến khích dùng trong React)

Đặc điểm:

 Nhanh hơn: JSX thực hiện tối ưu hóa trong khi biên dịch sang mãJavacsript Các mã này cho thời gian thực hiện nhanh hơn nhiều so vớimột mã tương đương viết trực tiếp bằng Javascript

 An toàn hơn: Ngược với Javascript, JSX là kiểu statically-typed, nghĩa

là nó được biên dịch trước khi chạy, giống như Java, C++ Vì thế cáclỗi sẽ được phát hiện ngay trong quá trình biên dịch Ngoài ra, nó cũngcung cấp tính năng gỡ lỗi khi biên dịch rất tốt

 Dễ dàng hơn: JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng đểcho các lập trình viên Javascripts có thể sử dụng

1.2.2.3 Giới thiệu về Components

React được xây dựng xung quanh các component, chứ không dùng templatenhư các framework khác Trong React, chúng ta xây dựng trang web sử dụngnhững thành phần (component) nhỏ Chúng ta có thể tái sử dụng mộtcomponent ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau,trong một component lại có thể chứa thành phần khác Mỗi component trongReact có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhậtcomponent dựa trên những thay đổi của trạng thái Mọi thứ React đều làcomponent Chúng giúp bảo trì mã code khi làm việc với các dự án lớn Mộtreact component đơn giản chỉ cần một phương thức render Có rất nhiềuphương thức khả dụng khác, nhưng render là phươc thức chủ đạo

1.2.2.4 Props và State

* Props:

 Props là viết tắt của properties Chúng là các giá trị đơn hoặc các đốitượng có chứa 1 tập hợp các giá trị được chuyển đến Component Nó

sử dụng quy ước đặt tên tương tự như các thuộc tính của thẻ HTML

 Props giúp các component tương tác với nhau, component nhận input làprops, và trả thuộc tính mô tả những gì component con sẽ render Prop

hay update state được thực thi Phương thức này cũng được sử dụng đểkết nối với các JS Framework khác và các function với delayedexecution như setTimeout or setInterval.

 componentWillReceiveProps: sẽ được thực thi ngay khi thuộc tínhđược update và trước khi component được render lại

 shouldComponentUpdate: sẽ trả về kết quả true or false Phương thứcnày sẽ xác định 1 component có được update hay không Mặc định giátrị này là true Nếu bạn không muốn component render lại sau khiupdate state hay props thì return giá trị thành false

 componentWillUpdate: Được gọi khi chúng ta cập nhật lại state củacomponent trước khi nó render lại

 componentDidUpdate: sau khi componentWillUpdate ở trên được gọixong thì đến lượt thằng này được gọi

 componentWillUnmount: được gọi khi chúng ta unmout 1 componentkiểu như xóa nó khỏi react

1.2.2.6 Ưu – nhược điểm của ReactJs

* Ưu điểm:

 Reactjs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi màcác component thực sự tồn tại trên đó Điều này sẽ giúp cải thiện hiệusuất rất nhiều Reactjs cũng tính toán những thay đổi nào cần cập nhậtlên DOM và chỉ thực hiện chúng Điều này giúp Reactjs tránh nhữngthao tác cần trên DOM mà nhiều chi phí

 Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dùng cú phápđặc biệt là JSX

 Nó có nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên càiđặt ứng dụng mở rộng của Chrome dành cho Reactjs Nó giúp bạn

debug code dễ dàng hơn Sau khi bạn cài đặt ứng dụng này, bạn sẽ cócái nhìn trực tiếp vào virtual DOM như thể bạn đang xem cây DOMthông thường.

 Render tầng server: Một trong những vấn đề với các ứng dụng đơntrang là tối ưu SEO và thời gian tải trang Reactjs là một thư việncomponent, nó có thể vừa render ở ngoài trình duyệt sử dụng DOM vàcũng có thể render bằng các chuỗi HTML mà server trả về

 Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test casegiao diện vì virtual DOM được cài đặt hoàn toàn bằng JS

 Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễdàng cho bảo trì và sửa lỗi

* Nhược điểm:

- Reactjs chỉ phục vụ cho tầng View React chỉ là View Library nókhông phải là một MVC framework như những framework khác Đâychỉ là thư viện của Facebook giúp render ra phần view Vì thế React sẽkhông có phần Model và Controller, mà phải kết hợp với các thư việnkhác React cũng sẽ không có 2-way binding hay là Ajax

- Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cầnphải cấu hình lại

- React khá nặng nếu so với các framework khác React có kích thướctương tương với Angular (Khoảng 35kb so với 39kb của Angular).Trong khi đó Angular là một framework hoàn chỉnh

- Khó tiếp cận cho người mới học Web

 Nodejs được xây dựng và phát triển từ năm 2009, bảo trợ bởi công tyJoyent, trụ sở tại California, Hoa Kỳ.

 Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên chotốc độ xử lý và hiệu năng khá cao

 Nodejs tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thờigian thực

 Nodejs áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộngnhanh, cần đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanhnhất có thể

* Đặc điểm:

 Nodejs là một nền tảng (platform), không phải Web Framework, cũngkhông phải ngôn ngữ lập trình

 Nodejs không hỗ trợ đa luồng, nó là một máy chủ đơn luồng

 Nodejs không dành cho người mới tinh mà chưa biết gì về lập trình, vìnhư đã nói ở trên, Nodejs không phải là ngôn ngữ lập trình, để họcđược Nodejs thì bạn cần phải biết về Javascript, kỹ thuật lập trình, một

số giao thức,…