Liên kết với các tài nguyên bên ngoài HTML chỉ có thể tạo cho chúng ta một khung của trang web, nghĩa là nó chỉ tạo cái cốt lõi chứ không được điều chỉnh giao diện, thực hiện các logic,
Trang 1HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG KHOA CÔNG NGHỆ THÔNG TIN 1
BÁO CÁO TIẾN ĐỘ
Môn học: Thực tập cơ sở Phạm Việt Tùng – B21DCCN774
Đề tài : Tìm hiểu Framework ReacJS và làm sản phẩm demo
Hà Nội, 3/2024 Giảng viên hướng dẫn: Đỗ Thị Bích Ngọc
Trang 2Kế hoạch dự kiến
Tuần 2: Tìm hiểu các khía cạnh JavaScript (Tham trị, tham chiếu, bộ nhớ Stack & bộ nhớ
Heap, Scope & Scope Chain, var / let / const keyword, Call Stack & Message Queue & Event Loop)
Tuần 3: Tìm hiểu thêm về JavaScript, các tính năng mà ES6 cung cấp, DOM
Tuần 4 : Tìm hiểu về Main Concepts của ReactJS (Component, State, Props, Lifecycle,
Virtual Dom React, Refs )
Tuần 5: Tìm hiểu về Advance Guides của React (Code-Splitting, Context,
Forwarding Refs,
Fragments, Higher-Order Components, Portals, Refs and the DOM, TypeckeckingWith Prop Types, )
Tuần 6: Tìm hiểu về React Hook (Function Components, Using the State Hook, Using the
Effect Hook, Rules of Hooks, Building Your Own Hooks, Hooks API Reference, Hooks FAQ)
Tuần 7: Tìm hiểu Axios, Window, Cookies, Local Storage
Tuần 8: Tìm hiểu React redux, ImmutableJS, Immer JS
Tuần 9: Viết đặc tả,… cho dự án "To Do List"
Tuần 10 - 11: Áp dụng Reacts xây dựng dự án "To Do List" Tuần 12: Kiểm lỗi, hoàn thành báo
cáo
Tuần 12: Kiểm lỗi, hoàn thành báo cáo
Trang 3Mục Lục
Kế hoạch dự kiến 2
Tuần 1 : Basic HTML và CSS 5
I HTML 5
1 HTML là gì? 5
2 Basic HTML Document 5
3 HTML tag 5
4 HTML Element 6
5 Liên kết với các tài nguyên bên ngoài 6
II CSS 6
1 CSS là gì? 6
2 CSS Selector 7
3 CSS Property và CSS Value 7
4 CSS Boxmodel 7
5 CSS layout techniques 8
6 Responsive 9
Tuần 2: Các khía cạnh chính của JavaScript 10
I Giới thiệu chung 10
II Bộ nhớ Stack và bộ nhớ Heap 10
1 Bộ nhớ Heap 10
2 Bộ nhớ Stack 10
III Tham chiếu và Tham trị 10
1 Tham trị (Value Type) 10
2 Tham chiếu (Reference Type) 11
IV Scope và Scope Chain 11
1 Global Scope 11
2 Function Scope 11
3 Block Scope 11
4 Scope Chain 11
V Từ khoá : var , let, const 11
1 JS : var 12
2 JS: let 12
3 JS : const 12
VI Colosure 12
1 Nested function 12
2 Colosure 12
VII Call Stack, Message Queue, Event Loop 13
1 Call Stack 13
2 Message Queue 13
3 Event loop 13
Tuần 3 : JavaScript ES6 , DOM 14
Trang 4I JavaScript ES6 14
1 Let & Const 14
2 Arrow Function 14
3 Toán tử ‘…’ 15
4 For/of 15
5 Classes 15
6 Promises 16
7 Symbol 17
8 Default parameter 18
10 Destruction 19
11 Modules 20
II HTML DOM 21
1 Giới thiệu 21
2 DOM node 21
3 DOM method & property 21
4 DOM event & event listener 22
Trang 5Ngoài ra, chúng ta sẽ dùng các thẻ (Tag) đề tạo nên cấu trúc cho một trangWeb.
2 Basic HTML Document
Duới đây là một mẫu đơn giản của một tài liệu HTML
Như đã thấy thì một mẫu cơ bản của HTML sẽ bao gồm 1 thẻ <!DOCTYPE> dùng để web page nhận biết được phiên bản của html, mà hiện tại là html5
tiếp đấy là một thẻ <html>, bên trong đó sẽ có 1 thẻ <head> chứa các thành phần header của một trang web, và <body> sẽ chứa thân trang web nơi các thành phần chính mà chúng ta nhìn thấy sẽ được biểu diễn ở đây
3 HTML tag
Bởi HTML là ngôn ngữ đánh dấu siêu văn bản, sử dụng các thẻ để định dạng một trang web, cho nên nó sẽ cung cấp cho người dùng các loại thẻ để chúng ta sử dụng, sau đây là một vài thẻ cơ bản
Trang 6Thêm nữa, HTML có hỗ trợ Nested, hay chúng ta có thể sử dụng các thẻ trong 1 thẻ cha khác , và các thẻ của HTML có thể có thẻ đóng tương ứng, nhưng cũng có các thẻ đã tự đóng chính nó
Ví dụ như : <div>HELLO WORLD</div>
5 Liên kết với các tài nguyên bên ngoài
HTML chỉ có thể tạo cho chúng ta một khung của trang web, nghĩa là nó chỉ tạo cái cốt lõi chứ không được điều chỉnh giao diện, thực hiện các logic, hành động,… cho nên nó có 1 thẻ <link> để liên kết với các tài nguyên bên ngoài, và chúng ta hay sử dụng nó để liên kết tới các file CSS, JavaScript, hay các tài nguyên như Phông chữ, Các biểu tượng,… từ bên ngoài
1 CSS là gì?
Trang 7CSS, hay Cascading Style Sheets, là ngôn ngữ được sử dụng để tạo kiểu cho giao diện của các trang web Nó hoạt động cùng với HTML, cung cấp nội dung và cấu trúc của trang, để tạo ra các trang web hấp dẫn và hấp dẫn về mặt hình ảnh.
Value là giá trị chúng ta gán cho các thuộc tính, tuỳ thuộc vào loại thuộc tính mà value có thể có những giá trị khác nhau như : px, % , em, rem, bold, red, green, #fff,…
4 CSS Boxmodel
Box Model là một khái niệm trong CSS xác định kích thước và khoảng cách của các phần tử trên một trang web Mỗi phần tử được bao quanh bởi một hộp bao gồm nội
Trang 8dung, phần khoảng trắng, đường viền và lề.
Để sử dụng được Flexbox, chúng ta phải đặt thuộc tính display của phần
tử cha thành flex, như vậy phần tử cha sẽ gọi là Flex Box, còn các con của nó sẽ
là Flex Item
Sau đó, chúng ta có thể căn chỉnh các tuỳ theo cá nhân, các thuộc tính cơ bản áp dung chp Flex Box (phần tử cha) như flex-direction để chọn chiều mà các phần tử con được sắp xếp, justify-content, align-items để căn chỉnh vị trí cho các Flex Item, hay chúng ta có thể đặt độ co giản và kích thước ban đầu cho các Flex-Item thông qua flex-grow, flex-shrink, flex-basis
6 Responsive
Trang 9Responsive web design là kiểu mẫu phong cách thiết kế với giao diện, bố cục website thể hiện đẹp, mang tính mỹ thuật với độ hiển thị nội dung co giãn phùhợp trên tất cả các màn hình thiết bị như desktop, laptop, tablet, smartphone, với mọi độ phân giải màn hình.
Trang 10Tuần 2: Các khía cạnh chính của JavaScript
Đầu tiên thì JavaScript là ngôn ngữ lập trình phổ biến thông dụng trong hiện nay,
nó được ứng dụng trong việc lập trình các trang web hay các ứng dụng mobile
Nó là ngôn ngữ kịch bản (Scripting Language) là ngôn ngữ lập trình cho môi trường thời gian chạy đặc biệt tự động hóa thực thi các tác vụ
JavaScript là ngôn ngữ sử dụng Single-thread, nên các tác vụ của nó chỉ được chạy từng cái một Và JavaScript còn cung cấp first-class function, nghĩa là các hàm trong JS được xem như là một đối tượng có thể gán cho biến, truyền đối số cho hàm, hay
là kết quả trả về của một hàm,…
Java Script có cấu trúc khá giống ngôn ngữ C nên các cú pháp của nó có phần giống nhau
JavaScript Engine cung cấp cho chúng ta 2 nơi để lưu trữ dữ liệu đó là : Stack
và Heap
1 Bộ nhớ Heap
Heap là vùng nhớ để lưu trữ các hàm (function) hay các đối tượng (object)trong JS, kích thước bộ nhớ không được cấp phát một cách cố định mà nó sẽ đượccung cấp bằng với kích thước mà nó yêu cầu
2 Bộ nhớ Stack
Đây là một cấu trúc dữ liệu được sử dụng để lưu trữ những kiểu dữ liệu tĩnh (static data), là những dữ liệu mà kích thước của nó được xác định trong suốt quá trình biên dịch bao gồm các kiểu dữ liệu nguyên thuỷ (primitive type) như numbers, strings, null, undefined, boolean hay con trỏ trỏ tới các object.
III Tham chiếu và Tham trị
Cũng như bao ngôn ngữ khác thì trong JS có 2 kiểu truyền dữ liệu đó là kiểu tham chiếu và kiểu tham trị
1 Tham trị (Value Type)
Tham trị hay là Primitive type là các kiểu dữ liệu nguyên thuỷ của ngôn ngữ lập trình, chúng không phải là các object cho nên sẽ không có các phương thức.
Các kiểu dữ liệu nguyên thuỷ : Numbers, boolean, null, undefined, string, symbols.
Khi chúng ta khai báo một kiểu tham trị trong JS thì nó sẽ được gán trực tiếp cho biến và lưu trong bộ nhớ Stack; và được xác định bởi tên biến mà mình đặt cho nó, nghĩa
là dù 2 biến có cùng 1 giá trị thì chúng đều được đưa 2 lần vào bộ nhớ Stack của máy Ngoài ra thì kích thước của nó cũng được xác định luôn.
Khi chúng ta truyền tham trị cho 1 hàm hay gán giá trị tham trị cho 1 biến thì thực chất nó sẽ tạo ra 1 bản sao của giá trị đó và khi mình thay đổi giá trị của biến gốc
Trang 11thông qua các hàm thì giá trị của nó chỉ thay đổi trong nội bộ hàm còn giá trị ban đầu không thay đổi, điều này cũng đúng khi gán tham trị cho 1 biến.
2 Tham chiếu (Reference Type)
Tham chiếu không như tham trị, nó được xem là các đối tượng (Objects) cho nên chúng sẽ có các phương thức của riêng nó.
Ví dụ : Objects, Functions, Arrays,
Không như tham trị, khi chúng ta khai báo một biến tham chiếu thì nó sẽ không được gán giá trị trực tiếp cho biến mà nó sẽ là một con trỏ/pointer (được lưu trong Stack)
và trỏ tới vị trí của dữ liệu đó trong bộ nhớ Heap.
Khi chúng ta tạo ra 2 Object : object1 và object2, rồi gán giá trị object1 cho object2 thì sẽ có 2 con trỏ được lưu trong Stack nhưng chỉ có 1 đối tượng được tạo ra trong Heap, nghĩa là cả 2 object1 và object2 đều trỏ tới cùng 1 đối tượng, và do vậy nếu chúng ta thay đổi 1 đối tượng thì sẽ thay đổi cả 2.
IV Scope và Scope Chain
Scope trong JS xác định khả năng truy cập của một biến hay một hàm ở các phần khác nhau của một đoạn code hay cả chương trình Hay nói cách khác nó giúp chúng ta xác định xem ở một đoạn code hay chương trình có thể truy cập biến nào, hàm nào và biến/hàm nào không được truy cập
Có 3 loại Scope chính là : Global Scope, Function/Local Scope, Block Scope
1 Global Scope
Các biến hay hàm được khai báo bên ngoài mọi hàm - được xác định là Global Scope, nghĩa là chúng có thể được truy cập ở bất cứ đâu trong đoạn code hay chương trình.
2 Function Scope
Các biến hay hàm được khai báo ở trong một hàm khác sẽ có Function Scope, chúng chỉ được truy cập ở trong hàm mà chúng được khai báo hoặc ở các hàm con bên trong hàm đó.
3 Block Scope
Là các biến hay hàm được khai báo ở trong một khối – một khối được xácđịnh bởi hai dấu {} trừ khi được khai báo trong hàm, chúng ta có thể hiểu rằngnếu được khai báo trong 1 hàm thì nó được gọi là Function Scope, còn đối với cáctrường hợp còn lại được khai báo ở trong 2 dấu {} thì sẽ có Block Scope
Trang 121 JS : var
var là từ khoá của JS và nó có 2 Scope là Global Scope và Function Scope như
đã trình bày ở trên, có nghĩa là khi khai báo một biến bằng từ khoá var thì các biến đấy sẽ được truy nhập ở bất cứ đâu nếu nó được khai báo Globally, hay chỉ được truy cập trong nội bộ hàm nếu nó được khai báo trong một hàm (function scope)
Ngoài ra, chúng ta có thể tái khởi tạo biến hay cập nhật giá trị biến với từ khoá var
Keyword let có cả 3 scope là Global, Function và Block Scope
Chúng ta không thể tái khởi tạo một biến với từ khoá let như ở var nhưng nó có thể tái khởi tạo nếu ở các scope khác nhau và cũng có thể được cập nhật.
VD: const arr = [1,2,3,4]; thì arr sẽ lưu 1 giá trị tham chiếu đến mảngtrong bộ nhớ Heap, nhưng các giá trị 1,2,3,4 của mảng vẫn có thể thay đổi
VI Colosure
1 Nested function
Trong JS các function có thể truy cập vào Scope cấp trên của nó cho nênchúng ta có thể khai báo các hàm con bên trong các hàm cha, và hàm con này cóthể sử dụng các biến, hay hàm khác nằm trong hàm cha của nó
2 Colosure
Closure là một kĩ thuật lập trình cho các ngôn ngữ lập trình với First-class function (ở đây là JavaScript), nó cho phép tạo ra các function con vẫn giữ môi trường
Trang 13của function cha, nhớ trạng thái của nó và có thể truy nhập vào Scope của cha nó, ngay cả khi function cha đã được thực thi xong.
VD:
Ở ví dụ trên, biến add
được gán cho một hàm tự thực thi (self-invoke function được thực thi ngay khi khởi tạo) với giá trị trả về là một hàm khác có tác dụng sẽ tăng biến counter lên một
và trả về giá trị đó Thì khi chúng
ta gọi add() thì sẽ tăng biến
counter lên một đơn vị, và biến counter này chỉ bị thay đổi bởi
add , nó tạo nên tính đóng gói cho hàm.
VII Call Stack, Message Queue, Event Loop.
1 Call Stack
Đây là một khái niệm quan trọng trong môi trường thực thi của JavaScript, thể hiện ở việc JS theo dõi lời gọi hàm trong chương trình và được vận hành theo cơ chế LIFO, nghĩa là tác vụ nào được đưa vào Stack sau thì sẽ được giải quyết trước (thực thi
và giải phóng khỏi Stack).
2 Message Queue
Message Queue được JS sử dụng trong môi trường thực thi, nó là một hàng đợi (queue) các message cần được giải quyết, và gán với mỗi message đó là một hàm sẽ được gọi để giải quyết message nó.
Các message được tổ chức theo mô hình hàng đợi nên nó sẽ hoạt động theo cơ chế FIFO message nào vào hàng đợi trước sẽ được giải quyết trước.
Các Message được tạo ra khi mà có vấn đề bất đồng bộ xảy ra, do JS chỉ có một luồng nên khi một tác vụ thực hiện quá lâu, hay các tác vụ cần thời gian phản hồi nó sẽ được đưa ra ngoài queue để thực hiện sau, và nó tạo ra một message
3 Event loop
Đây là một cơ chế trong JS giúp nó có thể làm các thao tác cùng một lúc mặc dù
JS chỉ có 1 luồng (single thread) duy nhất.
Nhiệm vụ chính của Event Loop đó là đọc Stack và Queue, nếu Stack là rỗng thì
nó sẽ đưa hàm hay listener được gán với Message đầu tiên trong Queue vào Stack để giải quyết message đó, và tất nhiên message đó sẽ được xóa khỏi Queue.
Trang 14Tuần 3 : JavaScript ES6 , DOM
1 Let & Const
Kể từ khi ES6 ra đời thì JavaScript đã cung cấp cho người dùng 2 phương pháp mới để khai báo biến đó là let và const
Các tính năng mà nó cung cấp đã được đề cập ở Tuần 2 mục V
2 Arrow Function
Khi khai báo một hàm, chúng ta thường sẽ có 2 cách đó là khai báo bìnhthường hoặc có thể khai báo theo Function Expression
Đây sẽ là ví dụ về 2 cách khai báo
Ở ES6, khi khai báo một hàm theo Function Expression, chúng ta có thểrút ngắn cú pháp của cách khai báo đi bằng cú pháp của Arrow Function, 1 Arrow Function sẽ không cần từ khoá function khi chúng ta khai báo, và nếu
nó là một câu đơn thì chúng ta có thể loại bỏ cả cặp dấu ngoặc nhọn lẫn câu lệnh return
Trang 153 Toán tử ‘…’
Trong ES6 cung cấp cho ta một toán tử mới đó là toán tử ‘ ’…
Toán tử trên sẽ cung cấp cho ta 2 chức năng chính đó là có thể thay thế cho các phần tử còn lại trong một Iterable (array, string), hay các cặp {key : value}của một Object và cũng có thể làm một đối số có thể mở rộng cho một function
4 For/of
Ở ES6, chúng ta sẽ có thêm một phương pháp mới để duyệt qua các phần tử của một Iterable (array, string, ) đó là sử dụng for/of theo cú pháp:for (variable of iterable) {code block to be executed}
Trang 16Các thuộc tính của nó có thể khai báo trước ngoài constructor và truy cập vào thông qua từ khoá this, hoặc cũng có thể tạo ra thông qua gắn nó ở ngay trong constructor.
6 Promises
Promises là một khía cạnh khá quan trọng trong việc giúp chúng ta xử
lý bất đồng bộ được cung cấp ở trong ES6, như chúng ta đã biết thì JavaScript
có một luồng duy nhất, nghĩa là chỉ có thể thực hiện một công việc trong một thời điểm, vì thế, nếu như có các tác vụ cần thời gian để xử lý(Call API, …), thì các tính năng khác sẽ bị tạm dừng hoạt động và chờ cho tác vụ kia hoàn thành, như vậy sẽ làm cho hiệu năng bị giảm và không tạo tính hiệu quả cho người dùng
Và Promises sẽ giúp chúng ta giải quyết vấn đề này
Promises có thể hiểu như là một ‘lời hứa’, nó bảo rằng tôi sẽ nhận giá trịtrong tương lai, như vậy thì các chức năng khác sẽ vẫn hoạt động và đến khi Promises nhận về giá trị thì nó sẽ gọi một trong Callback
Nếu thành công : myResolve(result value)
Nếu lỗi : myReject(error object)
Trang 17Sau đó chúng ta có thể sử phương thức then() hay catch() để có thể xử
lý Promises, then() sẽ nhận về 2 Callback, Callback đầu tiên sẽ được gọi nếu thành công, call back thứ 2 sẽ gọi nếu nó bị thất bại, chúng ta có thể dùng chỉ
một trong hai cũng được Còn catch() chỉ nhận 1 Callback để xử lý khi trạng thái của Promises là thất bại
Dưới đây sẽ là một ví dụ cơ bản của việc sử dụng Promises