Báo Cáo Thực Tập Trung Tâm Sản Phẩm Và Giải Pháp (Spc).Pdf

Nhiệm vụ của trung tâm SPC và VNPT Technology VNPT Technology hoạt động trong các lĩnh vực: Nghiên cứu phát triển, Sảnxuất Công nghệ Công nghiệp; Kinh doanh quốc tế; Thương mại Dịch vụ k

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

KHOA CÔNG NGHỆ THÔNG TIN

-o0o -BÁO CÁO THỰC TẬP

ĐƠN VỊ THỰC TẬP

Trung tâm Sản Phẩm và Giải pháp (SPC)

Người hướng dẫn : Leader Vũ Văn Huy

Người thực hiện : Lê Thúy Hồng

Mã sinh viên : 201200142

Hà Nội – 2024

LỜI CẢM ƠN

Những năm gần đây, ngành công nghệ thông tin ở Việt Nam phát triển với tốc

độ cao đòi hỏi một nguồn nhân lực lớn Các công ty product cũng như outsourcing

đề muốn tạo ra những sản phẩm chất lượng mang đến trải nghiệm tốt nhất vớikhách hàng Chính vì thế, người chịu trách nhiệm đảm bảo chất lượng sản phẩmthông qua việc tương tác giữa các bên là rất cần thiết

Sau khoảng thời gian học tập và tìm hiểu, với mục đích mở rộng vốn kiếnthức còn hạn hẹp của bản thân, em đã đi quyết định tham gia thực tập tại Trung tâmsản phẩm và giải pháp SPC - Công ty VNPT Technology là nơi thực tập

Mặc dù em đã rất cố gắng để hoàn thành kỳ thực tập một cách tốt nhất nhưngchắc chắn không tránh khỏi hạn chế và thiếu sót Em mong nhận được sự thôngcảm và ý kiến đóng góp của quý công ty và thầy cô để em có thể rút kinh nghiệm

và hoàn thiện bản thân

Em xin gửi lời cảm ơn đến Trường Đại học Giao Thông Vận Tải Hà Nội đã cóđịnh hướng, hỗ trợ sinh viên có những nơi thực tập thật tốt để có thể hoàn thiện vànâng cao khả năng của bản thân, cũng như có cơ hội để trải nghiệm môi trường làmviệc thực tế

Em xin gửi lời cảm ơn đến trung tâm SPC nói riêng và công ty VNPTTechnology nói chung đã tạo điều kiện tốt nhất cho chúng em hoàn thành kỳ thựctập Em xin cảm ơn các anh chị, các bạn trong team DEV đã luôn tận tình hướngdẫn, chỉ bảo để em có thể hoàn thiện những thiếu sót của bản thân cũng như tiếp thuthêm được nhiều kiến thức mới

Một lần nữa, em xin gửi lời cảm ơn chân thành đến công ty và toàn bộ nhân viên

đã tạo điều kiện cho em có một kỳ thực tập đáng nhớ

MỤC LỤC

LỜI CẢM ƠN 2

MỤC LỤC 3

DANH MỤC HÌNH ẢNH 4

CHƯƠNG 1 GIỚI THIỆU CHỨC NĂNG, NHIỆM VỤ, CƠ CẤU TỔ CHỨC CỦA ĐƠN VỊ TIẾP NHẬN 5

1.1 Chức năng của trung tâm SPC và VNPT Technology 5

1.2 Nhiệm vụ của trung tâm SPC và VNPT Technology 5

1.3 Cơ cấu tổ chức của công ty VNPT Technology 6

1.3.1 Công ty TNHH Thiết bị Viễn thông ANSV 6

1.3.2 Công ty TNHH cung cấp giải pháp Dịch vụ Giá trị Gia tăng (VIVAS) 7

1.3.3 Công ty TNHH sản xuất thiết bị viễn thông (TELEQ) 7

CHƯƠNG 2 NỘI DUNG THỰC TẬP 9

2.1 Giới thiệu về vị trí công việc tại công ty 9

2.2 Giới thiệu về dự án ONE-Dx 9

2.3 Các đề tài đang được triển khai tại VNPT Technology 9

2.4 Các công nghệ được tìm hiểu trong thời gian thực tập 11

2.4.1 React.Js 11

2.4.2 Redux 14

2.4.3 Ant Design 16

2.4.4 Sass / Scss 16

2.4.5 Tailwind Css 17

2.5 Đồ án thực tập 18

CHƯƠNG 3 NHẬT XÉT VÀ ĐỀ XUẤT 24

3.1 Ưu điểm 24

3.1.1 Ưu điểm của Công ty 24

3.1.2 Ưu điểm của bản thân 24

3.2 Nhược điểm 24

KẾT LUẬN 25

TÀI LIỆU THAM KHẢO 26

DANH MỤC HÌNH ẢNH

Hình 2.1 Mô tả DOM ảo 12

Hình 2.2 State Hook 13

Hình 2.3 Effect Hook 14

Hình 2.4 Action Redux 15

Hình 2.5 Reducer Redux 15

Hình 2.6 Store Redux 16

Hình 2.7 Màn hình giao diện Home 18

Hình 2.8 Cách thức import từ css tới các component khác nhau 19

Hình 2.9 Log chuyển trang thể hiện giao diện trang 19

Hình 2.9.1 Mã code của nó 20

Hình 2.10 Ảnh Banner 20

Hình 2.11 Router chuyển trang 21

Hình 2.13 Ảnh Header 21

Hình 2.13.1 Logo sản phẩm 22

Hình 2.13.2 Menu sản phẩm 22

Hình 2.14 Ảnh các loại kính 23

Hình 2.15 Hiển thị ảnh theo hai trạng thái có và không có data 23

CHƯƠNG 1 GIỚI THIỆU CHỨC NĂNG, NHIỆM VỤ,

CƠ CẤU TỔ CHỨC CỦA ĐƠN VỊ TIẾP NHẬN

1.1 Chức năng của trung tâm SPC và VNPT Technology

VNPT Technology là đơn vị chủ lực của Tập đoàn VNPT trong lĩnh vực Côngnghệ; Công nghiệp Điện tử Viễn thông; Công nghệ thông tin; Truyền thông vàCông nghiệp nội dung số

Tính đến thời điểm hiện nay, VNPT Technology đã cho ra thị trường trên 10triệu sản phẩm bao gồm các thiết bị viễn thông, thiết bị điện tử tiêu dùng Bên cạnh

đó, thị trường quốc tế cũng được đẩy mạnh với việc xuất khẩu sản phẩm sang một

số thị trường tiềm năng như Lào, Campuchia, Myanmar, Indonesia, Nepal .VNPT Technology với vai trò doanh nghiệp chủ lực của Tập đoàn VNPT tronglĩnh vực công nghệ, công nghiệp điện tử viễn thông, công nghệ thông tin, truyềnthông và công nghiệp nội dung số có tầm nhìn trở thành doanh nghiệp công nghệcao hàng đầu tại Việt Nam và tiến tới trở thành một trong những công ty công nghệhàng đầu khu vực

1.2 Nhiệm vụ của trung tâm SPC và VNPT Technology

VNPT Technology hoạt động trong các lĩnh vực: Nghiên cứu phát triển, Sảnxuất Công nghệ Công nghiệp; Kinh doanh quốc tế; Thương mại Dịch vụ kỹ thuật

Sứ mệnh của VNPT Technology là tạo ra các sản phẩm công nghệ chất lượng caomang thương hiệu Việt phục vụ mạng viễn thông CNTT cũng như đông đảo cộngđồng

- Nghiên cứu phát triển sản phẩm công nghệ ODM: Là hoạt động cốt lõi củaCông ty nhằm tạo ra những giá trị từ tri thức, tạo ra tài sản trí tuệ và hàng hóadịch vụ với hàm lượng công nghệ cao Nghiên cứu và phát triển các côngnghệ lõi trong 5 lĩnh vực: Băng rộng cố định, băng rộng không dây, IoT, côngnghệ 5G và Chuyển đổi số nhằm tạo ra những sản phẩm toàn diện từ Phầncứng/Thiết bị, nền tảng cho tới các ứng dụng người dùng Mục tiêu 2025, trởthành nhà nghiên cứu phát triển thiết kế gốc

- Sản xuất thiết bị công nghệ công nghiệp EMS: Các sản phẩm tạo ra từ quátrình nghiên cứu và phát triển, được sản xuất hàng loạt qua hoạt động sảnxuất công nghiệp điện tử đáp ứng nhu cầu thị trường trong và ngoài nước.Bên cạnh đó dịch vụ sản xuất điện tử - EMS được mở rộng giúp Công ty tậndụng được năng lực và hạ tầng sẵn có đồng thời tham gia sâu rộng hơn vàochuỗi cung ứng toàn cầu

- Tích hợp hệ thống mạng viễn thông, Công nghệ thông tin: Với gần 30 nămkinh nghiệm tích hợp các hệ thống lớn như mạng Viễn thông, Công ty xácđịnh trở thành đơn vị dẫn đầu trong lĩnh vực tích hợp hệ thống mạng Viễnthông và Công nghệ thông tin Hoạt động tích hợp hệ thống toàn diện từ Phântich, Xây dựng giải pháp tổng thể, Thiết kế, Triển khai và Đào tạo chuyểngiao.

- Thương mại, dịch vụ kỹ thuật ICT trong nước và quốc tế: Hoạt động kinhdoanh phát triển thị trường nhằm cung cấp các sản phẩm phẩm công nghệ,các giải pháp tích hợp, dịch vụ kỹ thuật ICT trong nước và quốc tế với cácmảng thị trường bao gồm: Kinh doanh phát triển thị trường truyền thống/cácnhà mạng; Kinh doanh phát triển thị trường Doanh nghiệp và khách hàng cánhân; và Kinh doanh phát triển thị trường quốc tế

- Chuyển đổi số doanh nghiệp SME: Đây là một lĩnh vực mới được xác địnhtập trung nghiên cứu và phát triển trong giai đoạn 2020 – 2025, song hànhcùng chiến lược Quốc gia số tới năm 2030 Giúp các doanh nghiệp vừa vànhỏ thay đổi các phương thức hoạt động nhằm tạo ra các sản phẩm mới, giátrị mới thông qua việc ứng dụng các bộ giải pháp công nghệ và chuyển dịchvận hành trên không gian số

1.3 Cơ cấu tổ chức của công ty VNPT Technology

Hiện tại VNPT Technology có 3 công ty thành viên, hoạt động theo mô hìnhhợp nhất nguồn lực

1.3.1 Công ty TNHH Thiết bị Viễn thông ANSV

Công ty TNHH Thiết bị Viễn thông ANSV được thành lập từ tháng 7 năm

1993 trong quan hệ hợp tác liên doanh giữa Tập đoàn Alcatel (nay là Alcatel-Lucent)với Tổng công ty Bưu chính Viễn thông Việt Nam (nay là Tập đoàn Bưu chính Viễnthông Việt Nam) ANSV tiếp tục phát triển trên các lĩnh vực hoạt động truyềnthống từ hơn 18 năm của mô hình liên doanh, đồng thời phát huy những kinhnghiệm cũng như nguồn lực tích lũy từ hơn 18 năm qua, tiếp tục phát triển và mởrộng lĩnh vực hoạt động thúc đẩy phát triển công nghệ, công nghiệp và dịch vụ viễnthông và công nghệ thông tin

- Nghiên cứu phát triển, sản xuất và sửa chữa thiết bị điện, điện tử, viễnthông, công nghệ thông tin và truyền thông, phát triển công nghiệp nội dungsố

- Kinh doanh dịch vụ viễn thông, công nghệ thông tin và truyền thông, kinhdoanh công nghiệp nội dung số

- Kinh doanh sản phẩm điện, điện tử, viễn thông, công nghệ thông tin và

truyền thông.

- Khảo sát, tư vấn, thiết kế, xây dựng, lắp đặt, bảo dưỡng và hỗ trợ kỹ thuậtcác công trình viễn thông, công nghệ thông tin và truyền thông

- Tổng thầu các công trình viễn thông, công nghệ thông tin và truyền thông

- Tư vấn, nghiên cứu, đào tạo, dạy nghề và ứng dụng tiến bộ khoa học, côngnghệ trong lĩnh vực điện, điện tử, viễn thông, công nghệ thông tin và truyềnthông

- Kinh doanh xuất nhập khẩu, cung ứng vật tư thiết bị cho các công trình thuộclĩnh vực viễn thông, công nghệ thông tin và truyền thông

- Sản xuất, lắp ráp và thực hiện các dịch vụ liên quan đến các hệ thống thiết bịviễn thông của Alcatel-Lucent và các hệ thống thiết bị viễn thông và côngnghệ thông tin thế hệ mới khác

1.3.2 Công ty TNHH cung cấp giải pháp Dịch vụ Giá trị Gia tăng (VIVAS)

Công ty TNHH cung cấp giải pháp Dịch vụ Giá trị Gia tăng (VIVAS) đượcthành lập tháng 7/2011, trực thuộc Công ty Cổ phần Công nghệ Công nghiệp Bưuchính Viễn thông (VNPT Technology), đơn vị thành viên của Tập đoàn Bưu chínhViễn thông Việt Nam (VNPT)

VIVAS tự hào là công ty cung cấp các dịch vụ và giải pháp giá trị gia tănghàng đầu Việt Nam Với nguồn nhân lực vốn có và kinh nghiệm làm việc nhiềunăm trong lĩnh vực viễn thông và công nghệ thông tin, VIVAS tự hào giới thiệungành nghề kinh doanh

- Nghiên cứu phát triển giải pháp viễn thông, công nghệ thông tin và truyềnthông, phát triển công nghiệp nội dung số

- Kinh doanh dịch vụ viễn thông, công nghệ thông tin và truyền thông, kinhdoanh công nghiệp nội dung số

- Kinh doanh dịch vụ thanh toán online và thanh toán bằng thiết bị di động

- Dịch vụ tư vấn chiến lược, xây dựng kế hoạch triển khai các chiến dịchMarketing, truyền thông, quảng cáo, nghiên cứu thị trường

1.3.3 Công ty TNHH sản xuất thiết bị viễn thông (TELEQ)

Công ty TNHH sản xuất thiết bị viễn thông (TELEQ) – một thành viên củaVNPT Technology trong lĩnh vực Công nghệ; Công nghiệp Điện tử viễn thông –Công nghệ thông tin; truyền thông và công nghiệp nội dung số TELEQ là đơn vịcung cấp vật tư, thiết bị, tư vấn triển khai các giải pháp viễn thông và công nghệthông tin TELEQ chủ yếu hoạt động trong các lĩnh vực:

- Cung cấp vật tư, thiết bị viễn thông như thiết bị truyền dẫn, thiết bị định tuyến

thông minh, thiết bị chuyển mạch lớp 2, nguồn, cáp quang, phụ kiện quang, .

- Cung cấp dịch vụ: thiết kế, cung cấp vật tư , lắp đặt, giám sát lắp đặt, kiểm tra

hệ thống và đưa vào vận hành khai thác Quản lý dự án, hỗ trợ kĩ thuật, bảo hành,bảo trì hệ thống viễn thông, công nghệ thông tin, truyền thông, điều khiển tựđộng

- Hợp tác với các đối tác, nghiên cứu và cung cấp giải pháp về mạng viễnthông, mạng công nghệ thông tin, hệ thống phần mềm, phần cứng IoT cho cácngành Nông Nghiệp, Y tế, Giao thông, Năng lượng,

- Tư vấn, triên khai, lắp đặt hệ thống giám sát tín hiệu giao thông, tốc độ đểgiám sát và xử lý các phương tiện vi phạm, an ninh khu vực một cách tối ưu

và hiệu quả

CHƯƠNG 2 NỘI DUNG THỰC TẬP

2.1 Giới thiệu về vị trí công việc tại công ty

Trong đợt thực tập kỳ 20203, em được tiếp nhận thực tập tại trung tâm sản phẩm vàgiải pháp SPC - công ty VNPT Technology và được phân công về team DEV, vị tríthực tập sinh lập trình Web Front-end (React.Js) Các yêu câu chuyên môn cần có như

kỹ năng đọc hiểu, kỹ năng tìm kiếm tài liệu, kỹ năng làm việc nhóm, kỹ năng mềm Yêu cầu chuyên môn đối với vị trí Front-end(React.Js)

- Nắm chắc các kiến thức cơ bản như HTML, CSS, Javascript

- Nắm được các kiến thức cơ bản về JSX, DOM, DOM ảo

- Nắm được các kiến thức về Hooks, Router

- Nắm được kiến thức về Redux, Redux core, Redux Thunk, Redux Toolkit

2.2 Giới thiệu về dự án ONE-Dx

Tại thời điểm thực tập, phần lớn nhân lực của trung tâm đang tập trung vào dự ánOneDx Em sẽ trình bày một số thông tin khái quát về dự án và yêu cầu của dự án đốivới sinh viên thực tập

- Tên dự án: Nghiên cứu phát triển nền tảng Chuyển đổi số doanh nghiệp

- Mục tiêu đối với sinh viên thực tập: Làm sản phẩm demo

- Nội dung:

Tham gia đội ngũ phát triển các dự án chuyển đổi số trên nền tảng web.Tham gia dự án chuyển đổi nền tảng ứng dụng, phát triển giải pháp back-end theo mô hình microservice

Tham gia phát triển hệ thống Core-service với các nghiệp vụ về doanhnghiệp

- Yêu cầu chuyên môn:

Hiểu biết về lập trình web (html, css, ajax, angular/kendo/react)

Hiểu biết về lập trình hướng đối tượng (OOP)

Hiểu biết về việc gọi và xử lý RESTFul API

Hiểu biết về một trong các database: SQL server, Oracle, MySQL

Có khả năng học hỏi nghiên cứu công nghệ mới

2.3 Các đề tài đang được triển khai tại VNPT Technology

Với đội ngũ nhân lực lớn và có chất lượng cao, VNPT Technology triển khai các đề tài

có tính đốt phá và rất triển vọng với phương châm "make in VietNam" Có rất nhiều

đề tài đang được triển khai tại VNPT Technology với đa dạng các lĩnh vực, công nghệ

được áp dụng Dánh sách các đề tài đang được triển khai tại VNPT Technolog có thể

kể đến như:

- Nghiên cứu phát triển nền tảng Chuyển đổi số doanh nghiệp áp dụng vào dự ánchuyển đổi số doanh nghiệp Chuyển đổi nền tảng ứng dụng, phát triển giảipháp back-end theo mô hình microservice, phát triển hệ thống Core-service vớicác nghiệp vụ về doanh nghiệp

- Phát triển sản phẩm ONE Home phát triển ONE Home Platform, ONE HomeMobile App (Android, iOS), WebApp

- Nghiên cứu ứng dụng phần triển khai DevOps/Cloud vào các dự án DAC/DMS

áp dụng vào sản phẩm DAC/DMS

- Nghiên cứu sử dụng Graphql Database vào việc truy xuất nguồn gốc Sản phẩm,ứng dụng công nghệ vào phần truy xuất Sản phẩm (Nông nghiệp thông minh,Nguồn gốc linh kiện vật tư trong Nhà máy sản xuất) ệ thống điều khiển và giámsát thiết bị viễn thông phát triển sản phẩm quản lý các thiết bị viễn thông(GPON ONT, Mesh, Set-top box, Access Point )

- Phát triển hệ thống ONE Gate - hệ thống giao tiếp tập trung trong hệ thốngmạng lõi viễn thông

- Phát triển nền tảng ONE IoT

- Ứng dung IPtable, Queues phát triển ứng dụng QoS ưu tiên lưu lượng cho 1dịch vụ cụ thể trên Linux áp dụng vào dự án Mesh AP, 5G FWA

- Ứng dụng Deep packet inspection phát triển ứng dụng Firewall base traffic tent trên Linux áp dụng vào dự án Mesh AP, 5G FWA

con Ứng dụng 802.11ax phát triển driver smart antenna tối ưu tín hiệu và tốc độtruyền tải dữ liệu cho wifi 6 áp dụng vào dự án Mesh AP, 5G FWA

- Ứng dụng OFDMA phát triển ứng dụng ưu tiên cấp phát tài nguyên cho 1 dịch

vụ cụ thể trên thiết wifi 6 AP áp dụng vào dự án Mesh AP, 5G FWA

- Xây dựng ý tưởng sản phẩm 5G FWA đóng vai trò như home gate waye chofuture home, nghiên cứu các sản phẩm 5G FWA CPE hiện có trên thị trường,nghiên cứu các painpoint của 5G FWA CPE => đề xuất các ý tưởng giải quyếtvấn đề, nghiên cứu các sản phẩm home gateway hiện có trên thị trường, đánhgiá khả năng và đề xuất ý tưởng sản phẩm hợp nhất 5G FWA Home gatewayhướng tới giả quyết các nhu cầu thực tế của khách hàng

- Xây dựng automation sử dụng python và framework, xây dựng các Scriptautoma- tion sử dụng các framework có nhiệm vụ điều khiển, tương tác cácthiết bị mạng đầu cuối modem ONT, xây dựng các script python có nhiệm vụ

xử lý các sự kiện liên quan đến thiết bị mạng đầu cuối modem ONT

- Sử dụng phần mềm Cadence Orcad-Allegro để thiết kế mạch điện tử, nghiêncứu, tìm hiểu cấu trúc bộ phần mềm thiết kế, thiết kế sơ đồ nguyên lýschematic, thiết kế layout PCB, tạo gerber file.

- Tìm hiểu Hệ thống thu phát, chuyển đổi tín hiệu quang điện và đo đạc cácthông số tín hiệu quang, nghiên cứu, tìm hiểu cấu trúc hệ thống thu phát quang,tìm hiểu cấu trúc hệ thống chuyển đổi quang điện

- Phát triển ứng dụng cho phép phân tích chuyên sâu về gói tin phục vụ cho cáctính năng bảo mật: Thống kê, quản lý, cảnh báo Làm giải pháp thực hiện trêncác thiết bị nhúng, phát triển mã nguồn, xây dựng testcase phục vụ Unit test vàIntergration tests

- Open SDK cho các chipset: Broadcom, MTK, Thực thi phát triển SDK theoyêu cầu, testing và tài liệu hóa

- Nghiên cứu phát triển một thiết bị công nghệ ứng dụng trong mạng Viễn thông(Modem, Wi-Fi Router), nghiên cứu, tìm hiểu quy trình thực tế để nghiên cứu,chế tạo ra một thiết bị mới viễn thông

- Nghiên cứu và phát triển tính năng Wifi Captive Portal trên ONT, phục vụ choWifi Marketing, tìm hiểu về Captive Portal, Wifi Marketing Xây dựng giảipháp Captive Portal đối với thiết bị ONT, phát triển phần mềm demo tích hợptrên thiết bị ONT

- Xây dựng ý tưởng ứng dụng AI vào network, nghiên cứu các sản phẩm AI ứngdụng vào Network đang có trên thị trường, nghiên cứu các painpoint củaNetwork

đề xuất các ý tưởng giải quyết vấn đề, đánh giá khả năng và đề xuất ýtưởng sản phẩm ứng dụng cho hệ thống mạng quang

- Nghiên cứu, xây dựng các bài test GPON theo tiêu chuẩn TR309, TR255,TR247, nghiên cứu các tiêu chuẩn, xây dựng các test case với các thủ tục thựchiện, cấu hình cho từng thiết bị, tiêu chí đánh giá pass/fail, thực hiện các testcase với các thiết bị ONT, OLT, OLT emulator

- Ứng dụng IPtable, Queues phát triển ứng dụng QoS Bandwidth priority để ưutiên băng thông cho 1 dịch vụ cụ thể như gaming, video, data, hoặc một/nhiềuclient cụ thể

2.4 Các công nghệ được tìm hiểu trong thời gian thực tập

Trong thời gian thực tập tại công ty, em được tìm hiểu về các công cụ hỗ trợ quản lýsource code, quản lý công việc Các công nghệ, các thư viện hay frameworks phục vụcho công việc của một Front-end Developer

2.4.1 React.Js

React.js là một thư viện Javascript đang nổi lên trong những năm gần đây với xuhướng Single Page Application React được phát triển tại Facebook để hỗ trợ việc xâydựng nhữ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àwww.instagram.com được viết hoàn toàn trên React [1] Một trong những điểm hấpdẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn đượcrender 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 render trước và cập nhật ít thay đổi nhất trên DOM, một số

số khái niệm cơ bản về React có thể kể đến như:

Virtual DOM: công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng Việc chỉnode gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồngnghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnhhưởng đến tốc độ xử lý React JS sử dụng Virtual DOM (DOM ảo) để cải thiệnvấn đề này.Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thôngtin cầ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 2.1 Mô tả DOM ảo

Giới thiệu về JSX: JSX là một dạng ngôn ngữ cho phép viết các mã HTMLtrong Javascript Đặc điểm: Faster: Nhanh hơn JSX thực hiện tối ưu hóa trongkhi biên dịch sang mã Javacsript Các mã này cho thời gian thực hiện nhanhhơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript Safer: antoàn hơn Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là nó đượcbiên dịch trước khi chạy, giống như Java, C++ Vì thế các lỗi sẽ được phát hiệnngay trong quá trình biên dịch Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khibiên dịch rất tốt Easier: Dễ dàng hơn JSX kế thừa dựa trên Javascript, vì vậyrất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng.

Giới thiệu về Components: React được xây dựng xung quanh các component,chứ không dùng template như các framework khác Trong React, chúng ta xâydự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ínhkhác nhau, trong một component lại có thể chứa thành phần khác Mỗicomponent trong React có 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ứReact đều là component Chúng giúp bảo trì mã code khi làm việc với các dự ánlớn Một react component đơn giản chỉ cần một method render Có rất nhiềumethods khả dụng khác, nhưng render là method chủ đạo

Props và State: Props: giúp các component tương tác với nhau, component nhậninput gọi là props, và trả thuộc tính mô tả những gì component 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

Một trong những kiến thức vô cùng quang trọng trong ReactJs đó rà Hooks Hooksmới được thêm ở phiên bản React 16.8 Cho phép bạn sử dụng state và các chức năngkhác của React mà không cần tạo class Hai hooks cơ bản nhất của ReactJs đó làuseState và useEffect

useState(): Việc sử dụng useState() cho phép chúng ta có thể làm việc với statebên trong functional component mà không cần chuyển nó về class component

Ở ví dụ bên trên mình cũng đã sử dụng useState() để cập nhật state