Kiến thức Javascript cần biết trước khi học React

Bởi

Rất nhiều bạn khi mới bước vào con đường lập trình rất hay bị choáng ngợp bởi các công nghệ mới. Khi thấy một ai đó giới thiệu, hoặc vô tình đọc trên mạng về một công nghệ, một framework đang hot nào đó… là nhảy vào học, vào làm. Nhưng nếu bạn chưa có kiến thức nền tảng thì rất là khó khăn, khiến bạn nhanh nản trí.

Ví dụ, để bắt tay vào học xây dựng ứng dụng web bằng React (một thư viện Javascript vô cùng phổ biến và mạnh mẽ), bạn ít nhất cũng phải biết javascript cơ bản.

Tất nhiên, không yêu cầu bạn phải là master Javascript, chuyên gia về ngôn ngữ lập trình javascript thì mới tiếp cận được React. Chỉ cần bạn biết và hiểu những kiến thức javascript cần biết dưới đây là vào làm React ngon lành.

Nội dung chính của bài viết

1. Arrow Functions
2. Khai biết biến bằng var/let/const
3. Destructuring assignment
4. Template Literals
5. Biết cách request tới API
6. Import / Export
7. Async/await, Promise và Callback
8. Array functions- Map, Reduce và Filter
Tạm kết

1. Arrow Functions

Arrow function là một trong những tính năng mới được giới thiệu từ bản ES6. Về cơ bản nó là một cách viết khác để định một function. Với arrow function, mã nguồn của bạn trông sẽ gọn gàng hơn, dễ hiểu hơn.

Ví dụ:

// ES5
function power (a) {
  return a * a;
}

// ES6
const power = a => a * a

2. Khai biết biến bằng var/let/const

Việc khai báo và sử dụng biến trong mọi ngôn ngữ lập trình hay framework là việc rất hay làm, có thể nói là như cơm bữa, không thể thiếu mỗi ngày.

Trong React cũng vậy, bạn cần phải hiểu và phân biệt được sự khác nhau khi khai báo một biết sử dụng từ khóa let hay var hay const.

Mình cũng đã có khá nhiều bài viết nói về sự khác nhau giữa chúng, bạn có thể đọc lại nhé.

Phân biệt kiểu biến var, let và const trong javascript

3. Destructuring assignment

Dịch sang tiếng việt khái niệm này nó cũng “hơi chuối”. Nhưng hiểu nôm na thì đây là cách chúng ta bóc tách dữ liệu cần thiết nào đó bên trong một Object, Array và gán vào biến để sử dụng.

Ví dụ:

const vehicles = ['Kia Morning', 'f-150', 'Toyota Corolla Cross'];
const [car, truck, suv] = vehicles;
console.log(car); // output: 'Kia Morning'

const person = {
  fullname: 'Duong Anh Son',
  age: 30, 
  website: 'https://vntalking.com'
}

const {fullname} = person;
console.log(fullname); // output: Duong Anh Son

4. Template Literals

Với ES6, bạn hoàn toàn có thể “nhồi biến” vào trong một string mà không cần phải thực hiện mấy phép cộng chuỗi, nhìn vừa xấu lại vừa khó đọc.

Để có thể sử dụng được template literals, bạn thay vì khai báo một chuỗi bằng ký tự nháy kép “ ” hay nháy đơn ’ ’ thì dùng ký từ nháy về . Haha 😅

Ví dụ nhé:

const fullname = "Dương Anh Sơn";
const intro = Xin chào cả nhà. Mình là ${fullname}, rất vui được gặp mọi người.;
console.log(intro); // output: Xin chào cả nhà. Mình là Dương Anh Sơn, rất vui được gặp mọi người.

5. Biết cách request tới API

Các ứng dụng React là các ứng dụng chạy phía client, chủ yếu là trên trình duyệt. Do vậy, chắc chắn đến 99% là ứng dụng sẽ phải kết nối tới server để trao đổi dữ liệu.

Do vậy, bạn mà không biết các tạo các request HTTP tới server bằng javascript thì thật là khó.

Có nhiều cách để tạo HTTP request trong javascript, đơn giản nhất là dùng luôn hàm fetch() có sẵn. Nhưng với các dự án thực tế, mình hay sử dụng thư viện axios cho việc kết nối các HTTP request.

Ví dụ:

async function fetchText() {
  let response = await fetch('/readme.txt');
  let data = await response.text();
  console.log(data);
}

6. Import / Export

Hai từ khóa này liên quan tới khái niệm module hóa trong javascript. Nó cho phép bạn đóng gói các logic vào một module và chia sẻ cho các thành phần khác sử dụng. Thậm chí, bạn có thể đóng gói thành một thư viện và chia sẻ cho các dự án khác sử dụng.

Trong React, việc sử dụng các thư viện bên thứ 3 rất là nhiều, đặc biệt là các thư viện liên quan tới UI. Do vậy, bạn nên tìm hiểu và làm chủ được kiến thức về hai từ khóa này nhé.

// 📁 say.js
function sayHi(user) {
  console.log(Hello, ${user}!);
}
export {sayHi}; 

// 📁 main.js
import {sayHi} from './say.js';
say.sayHi('Dương Anh Sơn');

7. Async/await, Promise và Callback

Trong các ứng dụng React, việc phải gọi các API là rất thường xuyên. Chưa kể tới các thao tác cần thời gian xử lý như đọc ghi file, stream… Do đó, bạn sẽ cần phải biết cách sử dụng Promise, Async/Await… Nếu không, chương trình của bạn sẽ chạy “rất lung tung”.

Như bạn cũng biết Javascript là một ngôn ngữ lập trình hướng sự kiện, nó không chạy tuần tự như các ngôn ngữ lập trình khác (java, C#…).

Do vậy, những hàm nào xử lý bất đồng bộ thì bạn cần phải biết sử dụng async/await hay promise, hoặc thô sơ hơn thì là callback.

💦 Tham khảo:

8. Array functions- Map, Reduce và Filter

Cuối cùng nhưng cũng quan trọng không kém. Đó là các kỹ thuật xử lý dữ liệu mảng.

Nói cho cùng thì lập trình ứng dụng bằng JS cũng chỉ là xử lý dữ liệu kiểu Object hay kiểu mảng mà thôi. Nhào nặn dữ liệu từ server trả về rồi hiển thị ra màn hình. Hoặc chế biến dữ liệu do người dùng nhập rồi gửi lại server. Ngẫm lại thấy cũng đơn giản 😊

💦 Bạn có thể tham khảo một số bài viết về xử lý Array trong JS:

Tạm kết

Trên đây là một số kiến thức javascript cần biết mà mình nghĩ bạn nên thành thạo trước khi bắt tay vào học ReactJS.

Người ta hay nói “đi tắt đón đầu” hay “đứng trên vai người khổng lồ” để nhanh đạt được một cái gì đó. Bài viết này chính là để dành cho bạn muốn “đi tắt” nhưng vẫn chắc chắn.

Còn nếu bạn vẫn muốn có một nền tảng Javascript thật tốt rồi mới học React thì đây, bạn có thể đọc cuốn sách này: Javascript từ cơ bản tới nâng cao

Hẹn gặp lại mọi người ở bài viết sau nhé! Thả tim nào 😊

Bạn có thể tìm thấy nhiều câu hỏi phỏng vấn JavaScript hơn trong ứng dụng ITFlashcards.com.