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.
href="https://blogger.googleusercontent.com/img/a/AVvXsEgruDmG_NP5xZaNoNSfPUASKRuvVkn31mWL8Mxb7Kw9zYo2gGOUyBV1KQj34GAGQn-VXd4vo_VmcMvLsjvifKKhHsfZZ1dRIAv5WxiszWCd2AB9y9OAjBd1ToDq36WzGI4sjXG89kV8GwIRkcDv5WI92e5RCoWLSXOi3Ru0H57n474h0-ZuQTHhmJOFASk"
style="margin-left: 1em; margin-right: 1em;"
>
alt="Kiến thức Javascript cần biết trước khi học React"
data-original-height="700"
data-original-width="1300"
height="344"
src="https://blogger.googleusercontent.com/img/a/AVvXsEgruDmG_NP5xZaNoNSfPUASKRuvVkn31mWL8Mxb7Kw9zYo2gGOUyBV1KQj34GAGQn-VXd4vo_VmcMvLsjvifKKhHsfZZ1dRIAv5WxiszWCd2AB9y9OAjBd1ToDq36WzGI4sjXG89kV8GwIRkcDv5WI92e5RCoWLSXOi3Ru0H57n474h0-ZuQTHhmJOFASk=w640-h344"
title="Kiến thức Javascript cần biết trước khi học React"
width="640"
/>
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ụ:
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
>
// ES5function power (a) {
return a
* a;
}
// ES6const 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é.
href="https://www.hijublog.com/2023/07/tu-khoa-var-let-const-trong-javascript.html"
target="_blank"
>Từ khóa "let", "const" và "var" trong JavaScript ES6 >
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ụ:
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
>
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é:
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
>
const fullname
= "Dương Anh Sơn";
const intro
= `Xin chao ca nha. Manh la ${fullname}, rat vui duoc gap moi nguoi.
`;
console.log(intro);
// output: Xin chao ca nha. Minh la Duong Anh Son, rat vui duoc gap moi nguoi.
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ụ:
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
>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é.
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
>
// 📁 say.jsfunction sayHi(user) {
console.log(
`Hello, ${user}
!`);
}
export {sayHi};
// 📁 main.jsimport {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.
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 😊
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.
Hẹn gặp lại mọi người ở bài viết sau nhé! Thả tim nào 😊
Các bài viết liên quan:
href="https://www.hijublog.com/2023/07/javascript-arrow-function.html"
target="_blank"
>JavaScript Arrow Function: Một cách ngắn gọn và hiệu quả để viết các
hàm >
href="https://www.hijublog.com/2023/07/javascript-classes.html"
target="_blank"
>JavaScript Classes: Xây dựng ứng dụng JavaScript mạnh mẽ với Classes >
href="https://www.hijublog.com/2023/07/default-parameter-value-trong-javascript.html"
target="_blank"
>Default Parameter Values trong JavaScript: Tận dụng tính năng mạnh mẽ để
tối ưu hóa mã nguồn >
href="https://www.hijublog.com/2023/07/javascript-template-literals.html"
target="_blank"
>JavaScript Template Literals: Cách sử dụng Template Strings để làm việc
hiệu quả với chuỗi trong JavaScript >
href="https://www.hijublog.com/2023/07/javascript-destructuring.html"
target="_blank"
>JavaScript Destructuring: Cú pháp, Ứng dụng và Ví dụ >
