ĐỒ án môn học CÔNG NGHỆ WEB và ỨNG DỤNG THIẾT kế WEBSITE THE MOVIE APP

Để phát triển ứng dụng hoàn chỉnh, một mình React Js là không làm được tất cả, bạn sẽ cần thêm: : Server side language: để xử lý logie và lưu trữ dữ liệu trên server.. Trang 5 Co sở lý t

Khoa: Céng Nghé Phan Mém Lop: SE347.N12

7

G NGHE WEB VA UNG DUNG

777

SVTHI: Nguyễn Hữu Trí - 20522051 SVTH2: V6 Nhat Nam — 20520646

SVTH3: Nguyén Thanh Phat — 20521737

Nội dung báo cáo

* Giới thiệu đề tài

* Cơ sở lý thuyết

¢ Thiét ké Template

* Xay dung Website

* Kết luận

* Tài liệu tham khảo

Giới thiệu đề tài

* Thiết kế trang The Movie App dựa trên ReactJS

= Phimmoizzzcom

Mia and Me: The Hero of #

Centopia

M

Teen Titans Go! & DC Super Hero Girls: Mayhem in the Multiverse ĩth the

Co sở lý thuyết

- React Js là một thư viện viết băng javaseript, dùng để xây dựng giao diện người

dùng (UI) React được sử dụng rộng rãi và có hệ sinh thái đa dạng phong phú

- UI tất nhiên là quan trọng, nhưng không phải là tất cả Để phát triển ứng dụng hoàn

chỉnh, một mình React Js là không làm được tất cả, bạn sẽ cần thêm:

: Server side language: để xử lý logie và lưu trữ dữ liệu trên server

- HTML/CSS nếu bạn làm ứng dụng web

- Flux/Redux?: là một kiến trúc giúp bạn tô chức code rõ ràng và sạch sẽ

* Objective C: néu ban str dung React dé x4y dung app cho iOS

Co sở lý thuyết

Trước khi có ReacUS, lập trình viên thường gặp rất nhiều khó khăn trong việc sử

dụng “vanilla J avaScript’ J avaScript thuan) va JQuery dé xay dung UI Diéu do dong

nghĩa với việc quá trình phát triển ứng dụng sẽ lâu hơn và xuất hiện nhiều bug, rủi ro

hơn Vì vậy vào năm 2011, Jordan Walke — một nhân viên của Facebook đã khởi tạo

ReactJS voi muc dich chinh là cải thiện quá trình phat trién UL

Hơn nữa, để tăng tốc quá trình phát triển và giảm thiểu những rủi ro có thể xảy ra

trong khi coding, React con cung cap cho chúng ta khả nang Reusable Code (tai su

dụng code) bằng cách đưa ra 2 khái niệm quan trọng bao gồm:

° JSX

° Virtual DOM

JavaScript extension - JSX

Document

=E <= ¬_ ° Trọng tâm chính của bất kỳ website cơ bản nào đó là những HTML

documents Trinh duyét Web đọc những document nay dé hién thi [ TM || TH Lf Elements] [Element | nội dung của website trên máy tính, tablet, điện thoại của bạn

mg ae ae Trong suốt quá trình đó, trình duyệt sẽ tạo ra một thứ gọi là

Document Object Model (DOM) — mot tree dai diện cho cấu trúc website được hiễn thị như thế nào Lập trình viên có thể thêm bắt kỳ dynamic confent nào vào những dự án của họ băng cách sử dụng ngôn ngữ JavaScript đề thay đối cây DOM

JSX (nói ngắn gon la JavaScript extension) la mot React extension gitip chúng ta dễ dàng thay đối cây DOM băng các HTML-style code đơn giản Và kế từ lúc ReactJS browser hỗ trợ toàn bộ những trình duyệt Web hiện đại, bạn có thể tự tin

sử dụng JSX trên bất kỳ trình duyệt nào mà bạn đang làm VIỆC

"blue", backgroundColor: "white" }}

Virtual DOM

° Nếu bạn không sử dụng ReactJS (và JSX), website của bạn sẽ sử dụng HTML để cập nhật

lại cây DOM cho chính bản nó (quá trình thay, đổi diễn ra tự nhiên trên trang mà người dùng không cân phải tải lại trang), cách làm này sẽ ốn cho các website nhỏ, đơn giản, static website

° Nhung đối với các website lớn, đặc biệt là những website thiên về xử lý các tương tác của

người dùng nhiêu, điều này sẽ làm ảnh 1 huong performance website cực kỳ nghiêm trọng bởi

vì toàn bộ cây DOM phải reload lại mỗi lần người dùng nhắn vào tính năng yêu cầu phải tải lại trang)

Virtual DOM

° Tuy nhiên, nêu bạn sử dụng JSX thì bạn sẽ giúp cây DOM cập nhật cho chính DOM đó,

ReactJS đã khởi tạo một thứ gọi là Virtual DOM (DOM ảo)

°_Virtual DOM (bản chất của nó theo đúng tên gọi) là bản copy cua DOM thật trên trang do,

va ReactJS str dung ban copy do dé tim kiém dung phân mà DOM thật cần cập nhật khi bắt

kỳ một sự kiện nào đó khiến thành phân trong nó thay đổi (chắng hạn như user nhấn vào một nút bất kỳ)

Virtual DOM

° Ví dụ, khi người dùng bình luận vào khung comment vào bât kỳ bài Blog nào trên website của bạn và nhân “Enter”

Dĩ nhiên, người dùng của bạn sẽ cân phải thây được bình

compare luận của mình đã được thêm vào danh sách bình luận

tN

#® ° GIả sử trong trường hợp không sử dụng ReacfJS, toàn bộ

Virtual DOM Real DOM

cây DOM sẽ phải cập nhật để báo hiệu sự thay đổi mới

này Còn khi bạn sử dụng React, nó sẽ giúp bạn scan qua Virtual DOM đê xem những gì đã thay đôi sau khi người

dùng thực hiện hành động trên (trong trường hợp nay, thêm mới bình luận) và lựa chọn đúng nơi đúng chỗ cân

cập nhật sự thay đôi mà thôi

`7

=> Làm tăng trải trải nghiệm của khách hàng và

performance được cải thiện đáng kê

Components

° React được xây dựng xung quanh các component, chứ không dung template

như các framework khác

° Trong React, chúng ta xây dựng trang web sử dụng những thành phần

(component) nhỏ Chúng ta có thể tái sử dụng một component ở 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 componert lại có thể chứa thành phần khác

° Mỗi component trong React co một trạng thái riêng, có thể thay đổi, và React sẽ

thực hiện cập nhật component dựa trên những thay đổi của trạng thái

° Mọi thứ trong 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ột react component đơn giản chỉ cần một method render Có rất nhiều

methods khả dụng khác, nhưng render là method chủ đạo

Props va State:

$ Props: giup cac component tương tác với nhau, component nhận input gol la props,

và trả thuộc tính mô tả những gì eomponent con sẽ render Prop là bất biến

° State: thé hiện trạng thái của ứng dụng, khi state thay đôi thì component đồng thời

render lại để cập nhật UI

vs State

\ `

|

props are ¢V state changes

>

oA

Uu diem

° Phù hợp với đa dạng thể loại website

° Tái sử dụng các Component: Nếu bạn xây dựng các Component đủ tốt, đủ flexible để có thể

thoả 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

° Có thể sử dụng cho ca Mobile application:

° 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

° Debug dé dang: Facebook đã phat hanh | Chrome extension dung trong vigéc debug trong qua

trình phát triển ứng dụng

° Công cụ phát triển web hot nhất hiện nay

The React.js Developer RoadMap

3Query (Optional)

REACT.JS EOADMAP