Những kiến thức cần chuẩn bị để học React

Nếu anh em đang lo lắng liệu rằng kiến thức của mình đã đủ để bắt đầu học một library/framework như React hay chưa thì đừng lo, trong bài viết này mình sẽ liệt kê các kiến thức mà anh em cần chuẩn bị để học React.

HTML/ CSS

Không thể bỏ qua được các kiến thức này rồi, đây là nền tảng và căn bản nhất cho bất cứ ai muốn trở thành một Front-End developer thực thụ. Bỏ ngay ý tưởng học React đi nếu bạn còn chưa biết HTML / CSS là gì nhé. Theo mình bạn muốn học React thì nên biết code được các layout bằng HTML/CSS như các landing page, login page, form...

Dẫu cho React là javascript thôi, nhưng khi làm việc với React bạn không chỉ làm việc với JS mà còn làm việc với HTML/CSS nữa. Dục tốc là bất đạt nhé.

Javascript

Đây là phần cực kỳ quan trọng. Chưa vững Javascript thì khi học React bạn sẽ cảm thấy rất khó nuốt. Dưới đây là một số kiến thức mà bạn cần phải biết trước khi học React.

Tham trị, tham chiếu

  • Sự khác nhau giữa tham trị vs tham chiếu, khi nào thì sẽ xảy ra tham chiếu.
  • Những cách để clone một object và ưu nhược điểm của mỗi cách.
  • Shallow copy và deep copy khác nhau như thế nào
  • Shallow compare và deep compare

Anh em hiểu đoạn code phía dưới chứ

jsx
let arr = [1, 2, 3, 4]
const handle = value => {
let temp = arr
temp[0] = 0
return temp
}
handle(arr)
console.log(arr) // [0, 2, 3, 4]

Destructuring, Rest parameter, Spread Syntax

Destructuring, Rest Parameters và Spread Syntax là những tính năng cực kỳ hay ho của ES6 mà theo mình thì 100% các dev Javascript cần phải biết. Khi học React thì kiểu gì anh em cũng dùng đến chúng.

Destructuring với object

js
const user = {
name: 'Duoc',
age: 24,
sex: 'male'
}
// Thay vì viết dài dòng như thế này
// const name = user.name
// const age = user.age
// const sex = user.sex
// Dùng Destructuring làm code ngắn gọn hơn nhiều
const { name, age, sex } = user
console.log(name) // Duoc
console.log(age) // 24
console.log(sex) // male

Destructuring với array

js
const list = [
1,
function (a, b) {
return a + b
}
]
const [value, func] = list
func(1, 2) // 3

Spread Syntax

js
const user = {
name: 'Duoc',
age: 24,
ability: ['coding']
}
// shallow copy
const cloneUser = { ...user }

Rest Parameter

js
const handle = (a, b, ...c) => {
return c
}
handle(1, 2, 3, 4, 5, 6) // [3,4,5,6]

Kết hợp rest parameter với destructuring

js
const handle = ({ a, b, ...c }) => {
return c
}
handle({ a: 1, b: 2, c: 3, d: 4, e: 5 }) // {c: 3, d: 4, e: 5}

Template string (template literals)

Thay vì viết

js
const price = 1000
const value = price + ' đồng'

Ta có thể viết theo template string

js
const value = `${price} đồng`

Toán tử logic

Các toán tử như &&, ||, !

js
console.log('hello' && 'xin chào') // xin chào

ES6 Class

  • Class trong ES6 là gì, constructor(), super(), extends
js
class Human {
constructor(name) {
this.name = name
}
sing() {
console.log(`${this.name} đang hát...`)
}
}
class Student extends Human {
constructor(name, grade) {
// Khởi tạo Human bên trong Student
// truyền name vào constuctor của Human
super(name)
this.grade = grade
}
study() {
console.log(`${this.name}${this.grade} điểm`)
}
}
const duoc = new Student('Dư Thanh Được', 100)
// Student kế thừa hàm sing() từ Human, nên duoc có thể gọi
duoc.sing()
// duoc gọi hàm study(), bên trong study sử dụng "this.name",
duoc.study()

Các loại function

  • Khai báo hàm (Function Declaration)
  • Biểu thức hàm (Function Expression)
  • IIFE (Immediately Invokable Function Expression)
  • Hàm ẩn danh (Anonymous function)
  • Hàm rút gọn (Arrow function)
js
const handleClick = () => {
// thực hiện gì đó
}

Higher Order Function

  • Callback function
js
const num = [2, 4, 6, 8]
num.forEach((item, index) => {
console.log('STT: ', index, 'la ', item)
})
  • Currying
js
const findNumber = num => func => {
const result = []
for (let i = 0; i < num; i++) {
if (func(i)) {
result.push(i)
}
}
return result
}
findNumber(10)(number => number % 2 === 1)
findNumber(20)(number => number % 2 === 0)
findNumber(30)(number => number % 3 === 2)

Bất đồng bộ với Promise, Async / Await

  • Hiểu được promise là gì, async await là gì.
  • Khi nào dùng async / await
  • Hiểu được cách catch lỗi với promise và async await
js
// async callback thông thường
setTimeout(() => {
console.log('hello')
}, 1000)
// chuyển thành promise
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('hello')
}, 1000)
})
p.then(value => {
console.log(value)
})

ES6 moudle

  • Export một biến, export default khác nhau như thế nào
  • Cách import, import với alias name
js
import { H1, H2, H3 } from '../components/Article/Article'
import { MDXRemote } from 'next-mdx-remote'

Ajax, Fetch API, JSON

  • Ajax là gì, ưu điểm của Ajax
  • Cách dùng fetch API để get data từ server
  • JSON là gì, ưu điểm của JSON
js
fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data))

DOM

  • Element là gì
  • Các sự kiện DOM như onClick, onBlur, onSubmit
  • Thao tác query các element
  • Cách sử dụng và sự khác nhau của các Local Storage / Session Storage / Cookie
js
// thêm item
localStorage.setItem('name', 'John Doe')
// đọc item
localStorage.getItem('name') // 'John Doe'
// xóa item
localStorage.removeItem('name')
// xóa hết local storage
localStorage.clear()

Thuật toán căn bản

  • Khi nào dùng map, forEach, reduce
  • Sắp xếp sort
  • Đệ quy
  • Thêm sửa xào nấu các object, array
  • Xử lý ngày giờ trong JS

Bonus

Các kiến thức dưới đây nếu như bạn biết sẽ giúp quá trình học React của bạn trở nên thuận lợi hơn rất nhiều.

NodeJs

  • NodeJs là gì?
  • Ứng dụng của NodeJs
  • Cài đặt và run một file bằng NodeJs

NPM

  • npm là gì
  • Cài đặt, xóa và cập nhật một package

Webpack

  • Webpack là gì, tại sao phải dùng webpack để chạy react
  • Ngoài webpack thì còn có tool nào tương tự hay không

Git

  • Git và Github khác nhau như thế nào?
  • Tạo một repo và thực hiện các thao tác như clone, push

Trên đây là những kiến thức theo mình là bạn cần phải biết nếu như muốn bắt tay vào học. Và nếu như bạn đang hỏng kiến thức nào thì bổ sung ngay đi nhé.

Nếu bạn đang tìm cho mình một khóa học Javascript với đầy đủ các kiến thức từ căn bản đến nâng cao thì đừng bỏ qua khóa học Master Javascript của mình, học xong thì chinh chiến các framework vô tư luôn.

Hoặc bạn muốn tìm cho mình một khóa học React chất lượng với project cuối khóa siêu xịn thì hãy tham khảo khóa Master React, học xong đi làm được luôn.