Written By: Nguyễn Văn Hiếu (Web 25)
Gmail: hieunguyenyt173@gmail.com
Bài viết gốc: https://www.freecodecamp.org/news/javascript-concepts-you-should-know-before-learning-react/

React là một trong những khung JavaScript phổ biến nhất để xây dựng các ứng dụng trang đơn. Không cần phải nói, là một khung công tác JavaScript, nó đòi hỏi bạn phải có kiến ​​thức tốt về các khái niệm JavaScript.

Trong bài viết này, chúng ta sẽ xem xét một số khái niệm JavaScript mà bạn phải biết trước khi học React. Hiểu rõ về các chủ đề này là điều cơ bản trong việc xây dựng các ứng dụng React quy mô lớn. Vì vậy, chúng ta hãy bắt đầu.

1. Kiến thức cơ bản về JavaScript

React là một khuôn khổ JS và bạn sẽ sử dụng JavaScript rộng rãi trong mã React của mình. Vì vậy, không cần phải bàn cãi rằng bạn phải biết các khái niệm JavaScript cơ bản.

Về cơ bản, ý tôi là những thứ như biến, kiểu dữ liệu, toán tử, điều kiện, mảng, hàm, đối tượng, sự kiện, v.v.

Hiểu đúng về các khái niệm này là điều quan trọng để bạn điều hướng đúng trong React, vì bạn sẽ sử dụng chúng trong từng bước trong khi xây dựng ứng dụng React.

Vì vậy, nếu bạn không chắc chắn về những điều này hoặc muốn nhanh chóng sửa đổi lại mọi thứ, hãy xem một số khóa học miễn phí này hoặc giáo trình JavaScript miễn phí CodeCamp. Tài liệu MDN và JavaScript.info cũng là những tài liệu tham khảo tìm kiếm nhanh hữu ích.

2. The Ternary Operator

Toán tử bậc ba là một toán tử điều kiện ngắn, một dòng để thay thế if / else. Nó thực sự hữu ích khi cần nhanh chóng kiểm tra một điều kiện để hiển thị một thành phần, trạng thái cập nhật hoặc hiển thị một số văn bản.

Hãy so sánh cách Toán tử bậc ba hoạt động với câu lệnh If / Else:

// Example of Ternary Operator
condition ? 'True' : 'False'
// Example of If/Else statement
if(condition) {
    'True'
}
else {
    'False'
}:

Bạn có thể tự mình thấy việc sử dụng Ternary Operator gọn gàng hơn và ngắn hơn bao nhiêu so với sử dụng If / Else.

Cách thức hoạt động là bạn viết một điều kiện, và nếu điều kiện là đúng, chương trình của bạn sẽ thực hiện câu lệnh sau?. Nếu điều kiện sai, chương trình sẽ thực hiện câu lệnh sau:

Đơn giản phải không?

3. Destructuring

Destructuring giúp chúng ta giải nén các giá trị từ mảng và đối tượng và gán chúng vào các biến riêng biệt một cách đơn giản và trơn tru. Hãy hiểu nó với một số mã:

// With Destructuring
const objects = ['table', 'iPhone', 'apple']
const [furniture, mobile, fruit] = objects

// Without Destructuring
const furniture = objects[0]
const mobile = objects[1]
const fruit = objects[2]

Trong ví dụ trên, Dest Structure đã lưu cho chúng ta 3 dòng mã và làm cho mã sạch hơn. Bây giờ chúng ta hãy xem một ví dụ khác về việc chuyển các đạo cụ trong React với Destructuring:

// With Destructuring Ex-1
function Fruit({apple}) {
    return (
        <div>
            This is an {apple}
        </div>
    )
}

// With Destructuring Ex-2

function Fruit(props) {
    const {apple, iphone, car} = props
    return (
        <div>
            This is an {apple}
        </div>
    )
}

// Without Destructuring
function Fruit(props) {
    return (
        <div>
            This is an {props.apple}
        </div>
    )
}

Lưu ý rằng bạn phải sử dụng lại các props như thế nào khi bạn không sử dụng destructuring trong props của mình.

Việc cấu trúc lại làm cho mã của chúng tôi sạch hơn và giúp chúng tôi không phải sử dụng các props từ khóa mỗi khi bạn sử dụng một biến hỗ trợ. Còn nhiều thứ cần giải quyết và bạn sẽ học được những điều đó khi bắt đầu xây dựng ứng dụng bằng JavaScript và React.

4. The Spread operator

Spread operator đã được giới thiệu với JavaScript trong ES6. Nó có một tệp có thể lặp lại và mở rộng nó thành các phần tử riêng lẻ.

Một trường hợp sử dụng phổ biến của toán tử spread trong React là sao chép các giá trị của một đối tượng vào một đối tượng khác trong quá trình cập nhật trạng thái để hợp nhất các thuộc tính của cả hai đối tượng. Nhìn vào cú pháp bên dưới:

const [person, setPerson] = useState({
    id: '',
    name: '',
    age: ''
});

 setPerson([
            ...person,
            {
                id:"1",
                name: "Steve",
                age:"25"
            }
        ]);

Trong ví dụ trên, … person sao chép tất cả các giá trị của đối tượng person trong đối tượng trạng thái mới, sau đó được thay thế thêm bằng các giá trị tùy chỉnh khác có cùng thuộc tính, cập nhật đối tượng trạng thái.

Đây là một trong nhiều trường hợp sử dụng của toán tử spread trong React. Khi ứng dụng của bạn trở nên lớn hơn, các công cụ như toán tử spread sẽ có ích để xử lý dữ liệu theo cách tốt hơn và hiệu quả hơn.

5. Các phương thức mảng

Phương thức mảng rất phổ biến khi xây dựng một ứng dụng quy mô vừa đến lớn trong React. Bạn sẽ luôn sử dụng một số loại phương thức mảng trong hầu hết mọi ứng dụng React mà bạn xây dựng.

Vì vậy, hãy dành một chút thời gian để tìm hiểu những phương pháp này. Một số phương thức rất phổ biến như map (). Bạn sử dụng map () mỗi khi tìm nạp dữ liệu từ một tài nguyên bên ngoài để hiển thị nó trên giao diện người dùng.

Có các phương pháp khác filter, reduce, sort, includes, find, forEach, splice, concat, push and pop, shift and unshift, v.v.

Một số trong số chúng được sử dụng phổ biến, và một số sẽ hiếm khi được sử dụng. Điều quan trọng là bạn phải hiểu rất rõ các phương thức mảng phổ biến và chỉ cần nhận thức được sự tồn tại của các phương thức khác để bất cứ khi nào bạn cần, bạn có thể nhanh chóng học chúng.

Dưới đây là cẩm nang hữu ích về các phương thức mảng và cách làm việc với mảng nói chung trong JavaScript để bạn có thể tìm hiểu thêm.

6. Arrow Functions

Các Arrow Functions cho phép chúng ta tạo các hàm một cách đơn giản với cú pháp ngắn gọn hơn.

// Regular Functions
function hello() {
    return 'hello'
}

// Arrow Functions
let hello = () => 'hello'

Cả hai hàm trong đoạn mã trên đều hoạt động giống nhau, nhưng bạn có thể thấy rằng Arrow Functions gọn gàng và ngắn hơn nhiều. Khoảng trống () trong cú pháp trên dành cho các đối số. Ngay cả khi không có đối số, các dấu ngoặc này nên có mặt.

Tuy nhiên, bạn có thể bỏ qua các dấu ngoặc này nếu chỉ có một đối số trong hàm, như sau:

let square = num => num * num

Trong các Arrow Functions một lớp lót, bạn có thể bỏ qua câu lệnh return. Bạn cũng có thể khai báo một hàm mũi tên nhiều dòng bằng cách sử dụng dấu ngoặc nhọn {} tương tự như các hàm thông thường.

let square = num => {
    return num * num
}

7.Promises

Bạn sử dụng các Promises để xử lý các hoạt động không đồng bộ trong JavaScript hiện đại. Khi bạn tạo một Promises trong JavaScript, nó có thể thành công hoặc thất bại - được gọi là được giải quyết hoặc bị từ chối trong thuật ngữ JavaScript.

Những Promises trong JavaScript, theo một cách nào đó, cũng có thể được so sánh với những Promises mà con người chúng ta thực hiện. Giống như những lời hứa của con người được thúc đẩy bởi việc triển khai một hành động nhất định trong tương lai, những lời hứa trong JavaScript là về việc triển khai mã trong tương lai, dẫn đến việc nó được giải quyết hoặc bị từ chối.

Có 3 trạng thái của một Promises:

  1. Pending - Khi kết quả cuối cùng của lời hứa vẫn chưa được xác định.
  2. Resolved - Khi Promises được giải quyết thành công
  3. Rejected - Khi Promises bị từ chối

Khi một lời hứa được giải quyết hoặc bị từ chối thành công, bạn có thể sử dụng phương thức .then () hoặc .catch () trên đó.

Phương thức .then () được gọi khi một lời hứa được giải quyết hoặc bị từ chối. Nó có 2 hàm gọi lại làm đối số. Cái đầu tiên được thực thi khi lời hứa được giải quyết và nhận được kết quả, cái thứ hai là đối số tùy chọn trong trường hợp lời hứa bị từ chối.

Phương thức .catch () được sử dụng như một trình xử lý lỗi và được gọi khi lời hứa bị từ chối hoặc có lỗi trong quá trình thực thi.

Lý thuyết là đủ, hãy kết thúc phần này với một ví dụ về một lời hứa, bao gồm cả việc sử dụng các phương thức .then () và .catch ():

let promise = new Promise((resolve, reject) => {
  const i = "Promise";
  i === "Promise" ? resolve() : reject(); // Checkout the above Ternary Operator section to better understand the syntax
  }
);

promise.
    then(() => {
        console.log('Your promise is resolved');
    }).
    catch(() => {
        console.log('Your promise is rejected');
    });
    

8. The Fetch API

Fetch API cho phép chúng tôi thực hiện các yêu cầu không đồng bộ đến máy chủ web từ trình duyệt. Nó trả về một lời hứa mỗi khi một yêu cầu được thực hiện, sau đó nó được sử dụng thêm để lấy phản hồi của yêu cầu.

Một hàm fetch () cơ bản nhận một đối số, là URL của tài nguyên bạn muốn tìm nạp. Sau đó, nó trả về một lời hứa khác giải quyết bằng một đối tượng Response . Đối tượng Response này là đại diện của phản hồi HTTP.

Vì vậy, để lấy nội dung JSON từ lời hứa này, bạn phải sử dụng phương thức .json () trên đối tượng Response. Điều này cuối cùng sẽ trả về một lời hứa sẽ giải quyết bằng kết quả của dữ liệu JSON đã được phân tích cú pháp từ phần thân phản hồi.

Nó có thể hơi khó hiểu, vì vậy hãy chú ý đến ví dụ dưới đây:

fetch('http://example.com/books.json') // fetching the resource URL
  .then(response => response.json()); // calling .json() method on the promise
  .then(data => setState(data)); // updating the state with the JSON data

9. Async / Await

Chức năng Async / Await cung cấp một cách tốt hơn và rõ ràng hơn để đối phó với Promises. JavaScript về bản chất là đồng bộ và async / await giúp chúng ta viết các hàm dựa trên lời hứa theo cách như thể chúng đồng bộ bằng cách ngừng thực thi mã thêm cho đến khi lời hứa được giải quyết hoặc bị từ chối.

Để làm cho nó hoạt động, trước tiên bạn phải sử dụng từ khóa async trước khi khai báo một hàm. Ví dụ, hàm không đồng bộ hứa () {}. Đặt async trước một hàm có nghĩa là hàm sẽ luôn trả về một lời hứa.

Bên trong một hàm không đồng bộ, bạn có thể sử dụng từ khóa await để tạm ngừng thực thi thêm mã cho đến khi lời hứa đó được giải quyết hoặc bị từ chối. Bạn chỉ có thể sử dụng hàm await bên trong một hàm không đồng bộ.

Bây giờ, hãy nhanh chóng kết thúc phần này với một ví dụ:

async function asyncFunction() {
    let promise = new Promise(resolve => {
        resolve();
    });
    let response = await promise; // further execution will be stopped until the promise is resolved or rejected
    return console.log(response);
}

10. ES modules and Import/Export

Các mô-đun đã được giới thiệu bằng JavaScript trong ES6. Mỗi tệp là một mô-đun của riêng nó. Bạn có thể thực hiện các đối tượng, biến, mảng, hàm, v.v. từ một tệp và sử dụng chúng trong tệp khác. Điều này được gọi là nhập và xuất mô-đun.

Trong React, chúng tôi sử dụng các mô-đun ES6 để tạo các tệp riêng biệt cho các thành phần. Mỗi thành phần được xuất ra khỏi mô-đun của nó và được nhập vào tệp nơi nó sẽ được hiển thị. Hãy tìm hiểu điều này với một ví dụ:

function Component() {
    return(
        <div>This is a component</div>
    )
}

export default Component
import Component from './Component'

function App() {
    return (
        <Component />
    )
}

Trong React, bạn phải hiển thị mọi thành phần mà bạn khai báo trong thành phần App.js.

Trong ví dụ trên, chúng tôi đã tạo một thành phần có tên là Component và xuất nó với export default Component . Tiếp theo, chúng tôi truy cậpApp.js
và nhập Component với mã sau:import Component from './Component'.

Kết luận

Bạn đã đến cuối bài viết! Cho đến nay, chúng tôi đã đề cập đến những kiến ​​thức cơ bản về JavaScript bao gồm Ternary Operator, Destructuring, Spread Operator, Array methods, Arrow functions, Promises, Fetch API, Async/Await, and ES6 Modules and Import/Export.