🔥Được vừa ra mắt khóa học Next.js Super đấy, xem thử đi nào

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

🎉 Nếu anh em thấy Front-End cạnh tranh quá thì chúng ta học thêm Back-End thôi.

Mình đang có khóa học🏆 Node.js Super, với các kiến thức như: Express.js, TypeScript, MongoDB, Socket.io, Docker, AWS, Swagger, ...

Vậy nên anh em có thể mua ngay từ bây giờ để tăng khả năng pass phỏng vấn nhé 😉

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ứ

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

🎁 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)
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.

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


Khóa học ReactJs giúp bạn chinh phục mức lương 25 - 30 triệu/tháng

Phew! Cuối cùng bạn cũng đã đọc xong. Bài viết này có hơi dài một tí vì mình muốn nó đầy đủ nhất có thể 😅

Chúng ta đều hiểu rằng Javascript và React không hề dễ, chúng có quá nhiều concept cần phải học. Mình cũng cảm thấy nó khó! Nay lại có thể Typescript nữa 🥲, thật sự khó nuốt.

Nhưng đừng lo: Bạn có thể nắm vững các kiến thức trên chỉ trong một khóa học ReactJs Super - Shopee Clone Typescript

Mình đã bắt đầu code React vào năm 2019, và nó đã trở thành thư viện ưa thích của mình để xây dựng UI và web app. Mình cũng đã làm việc với nhiều framework khác như Angular, Vue nhưng thực sự chỉ có React là đem lại cho mình cảm xúc và sự hiệu quả. 💓

Nếu bạn đang gặp khó khăn với React, mình ở đây để giúp bạn!

Mình đã dành hơn 6 tháng để phát triển khóa học ReactJs Super - Shopee Clone Typescript. Trong khóa này bạn sẽ được học mọi thứ về thư viện ReactJs, các kiến thức từ cơ bản cho đến nâng cao nhất, mục đích của mình là giúp bạn chinh phục mức lương 25 - 30 triêu/tháng

Nếu bạn cảm thấy bài viết này của mình hữu ích, mình nghĩ bạn sẽ thích hợp với phong cách dạy của mình. Không như bài viết này, khóa học là sự kết hợp giữa các bài viết, video, quizz, bài tập nhỏ và dự án lớn có thể xin việc được ngay. Học xong mình đảm bảo bạn sẽ lên tay ngay. 💪🏻

Avatar Dư Thanh Được
Dư Thanh Được
Một developer thích nghiên cứu và chia sẻ kiến thức về lập trình, blockchain, marketing. Chuyên code và dạy lập trình website