6 Khái niệm JavaScript quan trọng cho người mới bắt đầu học React

Là thư viện frontend phổ biến nhất, mọi người đều muốn học React. ReactJS về cơ bản là JavaScript. Nhưng điều đó không có nghĩa là bạn phải học mọi thứ trong JavaScript để chuyển sang ReactJS. Hiểu các khái niệm JavaScript cơ bản sẽ giúp bạn nắm bắt các khái niệm React dễ dàng hơn và cuối cùng nó sẽ tăng tốc khả năng làm việc trong các dự án của bạn.

Hãy phác thảo các khái niệm cơ bản mà bạn nên biết về JavaScript trước khi chuyển sang ReactJS.

1. Chức năng mũi tên

Các chức năng mũi tên được sử dụng rộng rãi trong React. Kể từ phiên bản 16.8, React đã chuyển từ các thành phần dựa trên lớp sang các thành phần chức năng. Các hàm mũi tên cho phép bạn tạo các hàm với cú pháp ngắn hơn.

Hãy minh họa điều đó trong các ví dụ sau:

chức năng thông thường

 function greeting() {
    return 'hello'
}
console.log(greeting())  

Chức năng mũi tên

 let greeting = () => 'hello' 
console.log(greeting())  

Hai hàm trên có cùng một đầu ra, mặc dù cú pháp là khác nhau. Hàm mũi tên trông ngắn gọn và gọn gàng hơn so với hàm thông thường. Thông thường, các thành phần React có cấu trúc như sau:

 import React from 'react'
const Book = () => {
    return (
        <div>Book</div>
   )
}
export default Book 

Các chức năng mũi tên không có tên. Nếu bạn muốn đặt tên cho nó, hãy gán nó cho một biến. Sự khác biệt giữa hàm thông thường và hàm mũi tên không chỉ là cú pháp. Tìm hiểu thêm về chức năng mũi tên trong tài liệu dành cho nhà phát triển Mozilla.

2. Phá hủy

Phá hủy được sử dụng để lấy dữ liệu từ các cấu trúc dữ liệu phức tạp. Trong JavaScript, mảng và đối tượng có thể lưu trữ nhiều giá trị. Bạn có thể thao tác các giá trị và sử dụng chúng trong các phần khác nhau của ứng dụng.

Để có được những giá trị này, bạn phải hủy cấu trúc biến. Tùy thuộc vào cấu trúc dữ liệu mà bạn đang xử lý, bạn có thể sử dụng ký hiệu dấu chấm (.) hoặc ký hiệu dấu ngoặc vuông. Ví dụ:

 const student = {
   'name': 'Mary',
   'address': 'South Park, Bethlehem',
   'age': 15
} 

Phá hủy:

 console.log(student.name)  

Trong ví dụ trên, ký hiệu dấu chấm truy cập giá trị của khóa ‘tên’. Trong ReactJS, bạn sẽ sử dụng khái niệm phá hủy để lấy và chia sẻ các giá trị trong ứng dụng của mình. Việc hủy cấu trúc giúp tránh lặp lại và làm cho mã của bạn dễ đọc hơn.

3. Phương thức mảng

Bạn sẽ gặp mảng nhiều lần khi làm việc với các dự án React. Một mảng là một tập hợp dữ liệu. Bạn lưu trữ dữ liệu trong các mảng, vì vậy bạn có thể sử dụng lại chúng khi cần.

Các phương thức mảng chủ yếu được sử dụng để thao tác, truy xuất và hiển thị dữ liệu. Một số phương thức mảng thường được sử dụng là bản đồ(), lọc()và giảm(). Bạn phải làm quen với các phương thức mảng để hiểu khi nào áp dụng từng phương thức.

Ví dụ, các bản đồ() phương thức lặp qua tất cả các mục trong một mảng. Nó tác động lên từng phần tử của mảng để tạo ra một mảng mới.

 const numbers = [9, 16, 25, 36];
const squaredArr = numbers.map(Math.sqrt)  

Bạn sẽ sử dụng các phương thức mảng rất nhiều trong ReactJS. Bạn sẽ sử dụng chúng để chuyển đổi mảng thành chuỗi, nối, thêm mục và xóa mục khỏi các mảng khác.

4. Câu điều kiện ngắn

Điều kiện là câu lệnh mà JavaScript sử dụng để đưa ra quyết định trong mã. Các điều kiện ngắn bao gồm && (và), II (hoặc) và Toán tử bậc ba. Đây là các biểu thức điều kiện ngắn hơn và các câu lệnh if/else.

Ví dụ sau đây cho thấy cách sử dụng toán tử bậc ba.

Mã với câu lệnh if/else:

 function openingTime(day) {
    if (day == SUNDAY) {
        return 12;
    } 
       else {
        return 9;
    }
} 

Mã với toán tử ternary:

 function openingTime(day) {
    return day == SUNDAY ? 12 : 9;
} 

Tìm hiểu về các loại câu điều kiện khác nhau, đặc biệt tập trung vào câu điều kiện ngắn. Chúng được sử dụng rộng rãi trong React.

5. Văn bản mẫu

Văn bản mẫu sử dụng dấu kiểm ngược (“) để xác định một chuỗi. Mẫu chữ cho phép bạn thao tác dữ liệu chuỗi làm cho chúng năng động hơn. Mẫu chữ được gắn thẻ cho phép bạn thực hiện các thao tác trong một chuỗi. Đây là các biểu thức điều kiện ngắn hơn và các câu lệnh if/else.

Ví dụ:

 let firstName = "Jane";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;  

6. Toán tử trải rộng

Toán tử Spread (…) sao chép các giá trị của một đối tượng hoặc mảng sang một đối tượng hoặc mảng khác. Cú pháp của nó bao gồm ba dấu chấm theo sau là tên của biến. Ví dụ (…tên). Nó hợp nhất các thuộc tính của hai mảng hoặc đối tượng.

Ví dụ sau đây cho thấy cách sử dụng toán tử trải rộng để sao chép các giá trị của biến này sang biến khác.

 const names = ['Mary', 'Jane']; 
const groupMembers = ['Fred', ...names, 'Angela'];  

Bạn có thể sử dụng toán tử trải rộng để thực hiện một số thao tác. Chúng bao gồm sao chép nội dung của một mảng, chèn một mảng vào một mảng khác, truy cập các mảng lồng nhau và truyền các mảng làm đối số. Bạn có thể sử dụng toán tử trải rộng trong ReactJS để xử lý các thay đổi trạng thái trong các thành phần.

Tại sao nên học ReactJS?

ReactJS phổ biến vì lý do chính đáng. Nó có đường cong học tập ngắn, đáng tin cậy và kết xuất nhanh chóng với DOM. Nó hỗ trợ các thành phần độc lập và có các công cụ sửa lỗi tuyệt vời.

ReactJS kết hợp các khái niệm JavaScript mới từ ECMAScript 6 (ES6). Học các khái niệm cơ bản trong JavaScript sẽ giúp phát triển các dự án trong ReactJS dễ dàng hơn.

Trên hết, ReactJS có một cộng đồng tuyệt vời liên tục phát hành các bản cập nhật mới. Nếu bạn muốn tìm hiểu một thư viện JavaScript, ReactJS sẽ là một lựa chọn tuyệt vời. Khung Next.js bổ sung cho những hạn chế của ReactJS. Sự kết hợp của cả hai làm cho ReactJS trở thành một thư viện front-end mạnh mẽ.