Bài 01: Pv-React FrontEnd

 

 1) Thư mục node_modules và file package.json là gì?

- NodeJS Modules là một thư viện Javascript, nó là một tập hợp các hàm (function) đối tượng và các biến, mà bạn có thể đưa vào ứng dụng của bạn để sử dụng. Sử dụng Module giúp đơn giản việc viết code, và quản lý code trong ứng dụng của bạn. Thông thường mỗi module sẽ được viết trong một tập tin riêng rẽ.

package.json là file đặc biệt, bạn có thể hiểu nó là 1 document giúp bạn biết được trong cái đống code này cần có những gói nào (nodejs xây dựng dựa trên nhiều module gọi là package, quản lý thông quan npm). Package.json là file cấu hình của npm, giúp cho npm hiểu nó cần phải cài đặt cái gì, thông tin về ứng dụng, phiên bản…File package.json được viết bằng json. File package.json được đặt ở thư mục gốc của project.

Các thành phần của Package.json

Package.json chứa rất nhiều thông tin, thường thì ta chỉ quan tâm đến vài thuộc tính chính thôi.

name

Tên của project hoặc package, nên viết hoa cho thuộc tính name. Đây là thuộc tính bắt buộc. Ngoài ra bạn có thể public project của bạn, thì thuộc tính name này sẽ là package name, nên cái này phải là duy nhất nhé.

version

Phiên bản của project. Cách ghi version hiện nay được quy đinh bởi 1 ông nào đó tên Semantic Versioning. Ông quy định thế này, phiên bản phải gồm 3 phần MAJOR.MINOR.PATCH Theo nguyên văn, trong đó:
MAJOR version when you make incompatible API changes
MINOR version when you add functionality in a backwards-compatible manner
PATCH version when you make backwards-compatible bug fixe
Ví dụ:
{
  "name" : "Vote-sc-UIT",
  "version" : "1.1.3"
}

description

Đoạn mô tả của project. Chú ý viết ngắn gọn xúc tích rõ ràng dễ hiểu, không hư cấu nhé.

author

Thông tin về tác giả. Mình hy vọng 1 ngày 1 package nào đó trên npm có tên của bạn nhé.

dependencies

Cái này quan trọng đây. Trong project, bạn sẽ phải sử dụng rất nhiều gói, những gói này đã được viết sẵn, chỉ cần require rồi quất thôi.
Ví dụ: ta có package sails hoặc express là framework, jade là gói template engine, socket.io hỗ trợ ứng dụng realtime, …
Để làm việc này, bạn cần phải install gói đó bằng npm. Thuộc tính dependencies giúp npm biết được cần phải cài đặt những package nào.

2) Trình bày quy tắc đặt tên function, tên biến và tên Component

- Tên biến, function viết hoa trữ cái đầu nhưng trừ chữ đầu tiên. Ví dụ: duongDinh24, hoVaTen, _isPassWord . . .
- Tên lớp phải bắt đầu bằng trữ in hoa.
- Tên của file làm việc khi code thường có dấu –
- Để chuyên nghiệp thì tên variable, function, class . . . nên đặt bằng tiếng anh (không nhất thiết nhưng thực ra chúng ta nên làm quen dần với điều này)
- Đặt tên biến dễ gợi nhớ, dễ cho cả người lập trình và người đọc code. Cẩn thận thì thêm chú thích vào cho chắc nhé!
- Tên hằng số thì nên viết hoa hết, các từ cách nhau bằng dấu gạch _
- Đặt tên biến một cách bao quát, giải thích tác dụng, lý do nó tồn tại, giá trị mà nó trả về.
- Tên đặt phải làm rõ nghĩa, tránh bị sai lạc, hiểu sai vấn đề.
- Dùng một cái tên dễ dàng đọc, có thể đọc được và tuyệt đối không được sai chính tả nhé!
- Tên biến, hàm, lớp nên đặt một cách dễ tìm kiếm, dễ nhớ. Điều này rất thuận lợi với chúng ta khi code

3) Lifecycle component hoạt động như nào

Life cycle của component trong reactjs là quá trình từ khi tạo ra, thay đổi và hủy bỏ component.
Gồm 3 giai đoạn:
Tạo ra (Mounting)
Thay đổi (Updating)
Hủy bỏ (UnMounting)
 

- Nhìn vào diagram ở trên ta sẽ biết được khi 

+ ComponentMounting(tạo ra) sẽ gọi những hàm nào: (constructor, render, DidMount). 

Trong constructor sẽ khai báo các state, các properties(thuộc tính) của component.Lưu ý: super(props) để gọi hàm khởi tạo của component cha React.Component mà Component con kế thừa.

Thường được dùng để gọi api để lấy dữ liệu, setState để cập nhật state

+ Updating(thay đổi) sẽ gọi những hàm nào(render, DidUpdate).

DidUpdate() : Được dùng khi component Updating (thay đổi ) sẽ gọi hàm DidUpdate()
DidUpdate() có thể không được gọi hoặc gọi nhiều lần nếu có update component.(khi có props thay đổi, state thay đổi hoặc bắt buộc update (forceUpdate)
Khi render sẽ trigger gọi hàm DidUpdate()

+ Unmounting(hủy bỏ) sẽ gọi hàm WillUnmount.

hàm WillUnMount() chỉ chạy 1 lần duy nhất khi component trong vòng đời của component. Tương tự Mount() chỉ chạy 1 lần duy nhất. Còn DidUpdate() có thể gọi nhiều lần nếu có nhiều update

4) Thành thạo cách sử dụng và hiểu khi nào cần sử dụng React Hook chính sau useState, useEffect, uselayouteffect, useRef

+ Cách sử dụng của React Hook: Reack Hooks cho phép chúng ta sử dụng state, lifecycle methods, và những feactures khác mà không cần sử dụng classes như trước đây, thay vào đó, chúng ta sẽ sử dụng các funtional compnents.

+ lý do sử dụng react hook:

Viết component ngắn gọn và dễ hiểu hơn rất nhiều so với dùng class.
Đầy đủ tính năng như class component.
Hưởng được các lợi ích của functional component như dễ test một hàm (nhận đầu vào và trả ra kết quả).
Loại bỏ được từ khoá “this” thường gây nhầm lẫn khi dùng class.
Không cần phải viết lại các class component cũ. Các component mới nên viết với hooks.
React Hooks chỉ được sử dụng trong functional component.
Dễ dàng custom các hooks như ý muốn theo từng nghiệp vụ khác nhau.

+ khi nào cần sử dụng react hook sau useState, useEffect, uselayouteffect, useRef: 

5) Hiểu rõ cách sử dụng React Hook nâng cao useMemo, useCallback, useReducer, useContext

6) Phân biệt ưu/nhược của class component và function component

-    Class Component - Stateful Components:

Với Class Component chúng ta có thể sử dụng được state một cách dễ dàng khi khởi tạo (init) state ngay trong phương thức constructor của Class Component bằng this.state:

Để thay đối state chúng ta có cách duy nhất chính là thông qua sử dụng phương thức setState()
-    Functional Component - Stateless Components:
Trái ngược với Class Component, Functional Component trước đây vốn không thể làm những thứ phức tạp như làm việc quản lí với state. Nhưng với những bản mới nhất của React đã cập nhật thêm React Hooks để cho phép chúng ta làm việc đó thông qua những function như useState() . Các ban có thể vào trang chủ của React để đọc chi tiết về chúng. Những bài viết sau trong series này mình sẽ đề cập về hooks hay lifecycles của Component.

7) "export default function A "khác gì với "export function A"

-    Export default function A trong Javascript ES6 chỉ cho phép xuất một mặc định cho mỗi file,chỉ có một default export duy nhất cho mỗi một module

-    Còn export function A thì ngược lại.

8) Callback function là gì? cách hoạt động?

Nói một cách đơn giản: Callback là một function sẽ được thực thi sau khi một function khác mà đã được thực thi xong
Nói một cách phức tạp hơn : Trong Javascript, functions là objects,do đó nó có thể nhận tham số là function, và cũng có thể trả về một function. Vì vậy bất cứ function nào được truyền vào như một tham số và được gọi sau đó sẽ có tên là callback function.

9) Hiểu rõ cách sử dụng React-Redux. 

10) Tại sao cần dùng react-redux, khi nào cần sử dụng và khi nào không nên sử dụng. 

11) Hiểu animation là gì và cách dùng thư viện react-spring? 

-    Animation là một hiệu ứng chuyển động của đối tượng.
-    cách dùng thư viện react-spring

12) Tại sao phải đặt tên Component là viết hoa đầu từ, nếu viết thường được không, tại sao

13) Thành thạo sử dụng các component của thư viện Antdesign, input, button, menu, drawer, popover, popconfirm, popup, datepicker, select, table,... Nắm chắc cách bố trí layout sử dụng component Row, Col

14) Hiểu cách sử dụng thư viện moment, cách format Datetime sang string,...?

-    Moment.js là một thư viện tuyệt vời để làm việc với đối tượng date trên một trường browser và môi trường Nodejs.
-   Cách format Datetime sang string: sử dụng String.Format

15) Trong một array component, tại sao mỗi component phải có unique key?

16) Tại sao luôn nên sử dụng image có format SVG?

17) Nắm về websocket, cách sử dụng thư viện @microsoft/signalr?

18) Cookie là gì, cách sử dụng js-cookie?

19) Để xuất trang in ra trình duyệt, bạn sử dụng thư viện hoặc những cách nào?

Ngoài những kiến thức cơ bản CSS cần nắm, cần nằm các điểm nâng cao sau:

1) Responsive là gì, giải thích @media only screen and (min-width: 960px) là gì?

2) Hiểu rõ cách xây dựng layout sử dụng liblary Bootstrap?

3) Nhớ tên và hiểu rõ công dụng phần lớn class trong Bootstrap, ví dụ: ps-2 là gì, col-5 khác col-md-5 như thế nào, <div class="col-8 col-lg-1"> giải thích sự thay đổi của element div khi viết class như ví dụ?

4) Thành thạo sử dụng css Flex, Flex-grow-1 là gì?

5) Khi nào thì cần sử dụng thuộc tính css position: absolute?

6) Trong ví dụ ".sidebar > div {  color: red }" ký tự ">" là gì?

7) div { width: calc(100% - 320px) } giải thích cách viết trên?

Các kiến thức javascript cần nắm:

1) Để lấy data từ API ta sử dụng function hoặc thư viện gì?

Thư viện: Axios Library
useEffect  sẽ giúp bạn xử lý các logic trong vòng đời của component và được gọi khi component có sự thay đổi

2) Mô tả ý nghĩa sử dụng của hàm array.push, array.map, array.forEach, array.find, aray.sort, array.filter, array.concat, array.indexof, array.reduce, array.splice

-    array.push: sẽ thêm mới một hoặc nhiều phần tử vào cuối mảng, hàm trả về chiều dài của mảng mới.

-    array.map: sẽ lặp qua từng phần tử của mảng, tham số truyền vào là một anonymous function. Hàm anonymous sẽ có một tham số truyền vào và đó chính là phần tử của mỗi vòng lặp, bên trong thân hàm anonymouse sẽ có lệnh return về một giá trị và giá trị này sẽ thay thế cho phần tử đó.

-    array.forEach: sẽ lần lượt truyền các phần tử của mảng vào một hàm được cung câp trước đó, hàm này sẽ tiến hành xử lý các thành phần tử cửa mảng như là một tham số truyền vào.

-    array.find: Hàm find sẽ lần lượt sử dụng các phần tử của mảng để thực hiện hàm kiểm tra cho đến khi có giá trị thỏa mãn và hàm kiểm tra trả về true. Khi đó hàm find sẽ trả về giá trị của phần tử thỏa mãn và bỏ qua không kiểm tra các phần tử còn lại.

-    aray.sort: Hàm sort là một method thuộc đối tượng array trong javascript, được đùng dể sắp xếp các phần tử trong mảng tăng dần hoặc giảm dần theo số thứ tự trong bảng mã ascii, hoặc theo quy tắc trong callback function.

-    array.filter: sẽ lặp qua qua các phần tử, sau đó tùy vào từng bài toán mà sẽ quyết định chọn phần tử đó hay không. Cuối cùng hàm này sẽ trả về một mảng các phần tử đã chọn.

-    array.concat: gộp nhiều mảng lại với nhau.

-    array.indexof: dùng để tìm kiếm một phần tử trong mảng dựa vào giá trị truyền vào tham số của hàm.

-    array.reduce:   sẽ duyệt qua từng phần tử trong mảng, sau đó trả về một giá trị cuối cùng, giá trị này phụ thuộc vào chương trình của hàm mà bạn truyền vào reduce.

-    array.splice:chức năng trích xuất một số phần tử của mảng, vị trí bắt đầu và kết thúc việc trích xuất sẽ được xác định bởi tham số truyền vào hàm.

3) FormData data = new FormData() là gì, khi nào cần sử dụng?

-    nó cho phép chúng ta xây dựng các đối tượng form tự động, có thể bao gồm cả các tệp tin từ hệ thống tệp tin của người dùng và sau đó gửi form này thông qua AJAX.

4) JSON.parse(result), JSON.stringify(data) là gì, khi nào cẩn sử dụng?

-    JSON.parse(result) nhận vào một chuỗi JSON và chuyển đổi (transform) nó thành một đối tượng JavaScript.
-    JSON.stringify(data) làm điều ngược lại - lấy một đối tượng JavaScript và chuyển đổi nó thành một chuỗi JSON.

5) Trong ES6 cách để copy một array hoặc một object ta sử dụng cú pháp như thế nào?

Sử dụng Array.slice() Việc không truyền đối số vào slice() giúp ta tạo ra 1 bản sao từ array gốc.

const numbers = [1, 2, 3, 4, 5];
const copy = numbers.slice();

6) Khi lấy data từ API, các method HTTP: GET, POST, PUT, PATCH, DELETE khác nhau như thế nào?

-    GET: là khi để lấy ra list dữ liệu, bạn cần gửi request lên server.
-    POST: hay với action store để lưu dữ liệu, bạn cần gửi request lên server với method POST

-    PUT: để sửa để sửa toàn bộ record thì bạn cần dùng method PUT

-    PATCH: để sửa  1 phần của record thì bạn cần dùng method PATCH

-    DELETE: để xoá dữ liệu.

7) setTiemout, setInterval là gì và nêu những trường hợp thực tế cần sử dụng.

-    Hàm setTimeout() thường được sử dụng nếu bạn muốn hàm của mình thực thi bao nhiêu mili giây kể từ khi gọi method setTimeout()
-    Hàm setInterval() thường được sử dụng để thiết lập độ trễ cho các hàm sẽ được thực hiện lặp lại như là hiệu ứng