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

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ư ReactJs trong năm 2023 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 ReactJs.

Dưới đây là những kiến thức mà bạn cần học

1. HTML/CSS
2. Tham trị, tham chiếu
3. Destructuring, Rest parameter, Spread Syntax
4. Template string
5. Toán tử logic, ba ngôi: &&, ||, !, ?
6. ES6 Class, ES6 Module
7. Các loại function: IIFE, Anonymous function, Arrow function, Callback function, Currying
8. Bất đồng bộ với Promise, Async / Await
9. Ajax, Fetch API, JSON
10. DOM
11. Thuật toán căn bản: Sắp xếp, đệ quy, xào nấu các object, array,...
12. 💓Bonus: Nodejs, npm, webpack, git, Typescript

🥇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ứ

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

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

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

Spread Syntax

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

Rest Parameter

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

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

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

Ta có thể viết theo template string

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

🥈Toán tử logic

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

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

🥈ES6 Class

• Class trong ES6 là gì, constructor(), super(), extends

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} có ${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()

💡 Mẹo:

🎁 Và tất cả các kiến thức trong bài này đều được mình dạy trong khóa học ReactJs Super. Mình sẽ ôn tập lại JS trước khi anh em bước vào học ReactJs 😋

🥈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)

const handleClick = () => {
  // thực hiện gì đó
}

🥈Higher Order Function

• Callback function

const num = [2, 4, 6, 8]
num.forEach((item, index) => {
  console.log('STT: ', index, 'la ', item)
})

• Currying

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

// 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

import { H1, H2, H3 } from
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

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

🥈Local Storage / Session Storage / Cookie

• Cách sử dụng và sự khác nhau của các Local Storage / Session Storage / Cookie

// 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.

🥈🔥Typescript (riêng năm 2023 rồi thì phải học cái này)

Thực sự thì bạn không cần Typescript (TS) trước khi bắt đầu học ReactJs đâu 😁, nhưng mà ngày nay đa số các công ty đều đã chuyển sang dùng Typescript cho các dự án của họ rồi, vì thế nếu không biết Typescript là một thiệt thòi lớn với bạn.

Bạn không cần phải pro TS thì mới được học ReactJs, học TS là một chặng đường dài và cần nhiều thời gian. Bạn chỉ cần biết TS cơ bản là học được rồi. Mình nghĩ rằng chỉ cần tốn khoản 1-2 ngày học TS là có thể chiến ReactJs được rồi đó.

🥈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é.

🥇Tóm lại

Các bạn đọc bài thấy nhiều vậy thôi chứ nó không quá khó để học hết đâu, đa số là các kiến thức Javascript thôi mà. Chỉ có mấy kiến thức ở phần bonus là lạ thôi 😁

Ráng học đi nhá anh em, chúc anh em học tốt.