Tìm hiểu React mà không cần JavaScript

Question

Nếu bạn muốn học React – hoặc bất kỳ khung JavaScript nào – trước tiên bạn cần hiểu các phương thức và khái niệm JavaScript cơ bản

Nội dung chính Show

Hàm gọi lại trong JavaScript
Lời hứa trong JavaScript
Bản đồ () trong JavaScript
Lọc() và Tìm() trong JavaScript
Tìm thấy()
Phá hủy mảng và đối tượng trong JavaScript
phá hủy đối tượng
Toán tử nghỉ ngơi và trải rộng trong JavaScript
Toán tử trải rộng
Giá trị duy nhất - Set() trong JavaScript
Các khóa đối tượng động trong JavaScript
giảm () trong JavaScript
Chuỗi tùy chọn trong JavaScript
Phương pháp kết xuất có điều kiện
Chuỗi tùy chọn
Tìm nạp API & Lỗi trong JavaScript
Cách xử lý lỗi trong Fetch API
Không đồng bộ/Đang chờ trong JavaScript
Phần kết luận
Tôi có thể trực tiếp học React mà không cần biết JavaScript không?
Tôi có thể trực tiếp học phản ứng JS không?
React có khó học hơn JavaScript không?
Tôi có thể học ReactJS trong 2 ngày không?

Nếu không thì chẳng khác nào đứa trẻ học chạy trước khi học đi.

Nhiều developer chọn cách tiếp cận "learning as you go" khi học React. Nhưng điều này thường không mang lại năng suất mà thay vào đó, lỗ hổng kiến thức JavaScript của họ càng trầm trọng hơn. Cách tiếp cận này làm cho việc đồng hóa từng tính năng mới khó khăn gấp đôi (bạn có thể bắt đầu nhầm lẫn JavaScript với React)

React là một khung JavaScript để xây dựng giao diện người dùng dựa trên các thành phần UI. Tất cả mã của nó được viết bằng JavaScript, bao gồm cả phần đánh dấu HTML, được viết bằng JSX (điều này cho phép các nhà phát triển dễ dàng viết HTML và JavaScript cùng nhau)

Trong bài đăng này, chúng ta sẽ thực hiện một cách tiếp cận thực tế và xem xét tất cả các ý tưởng và kỹ thuật JS mà bạn cần nắm bắt trước khi học React

React được xây dựng bằng các tính năng JavaScript hiện đại, hầu hết được giới thiệu với ES2015. Vì vậy, về cơ bản đó là những gì chúng ta sẽ thảo luận trong bài viết này. Để giúp bạn học sâu hơn, tôi sẽ kết nối các liên kết riêng biệt với từng phương pháp và khái niệm

Bắt đầu nào…

JavaScript bạn cần biết trước khi học React

Hàm gọi lại trong JavaScript

Hàm gọi lại là một hàm được thực hiện sau khi một hàm khác đã hoàn thành việc thực thi của nó. Nó thường được cung cấp như một đầu vào cho một chức năng khác

Các cuộc gọi lại rất quan trọng để hiểu vì chúng được sử dụng trong các phương thức mảng (chẳng hạn như

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

6,

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

7, v.v.),

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

8, trình xử lý sự kiện (chẳng hạn như nhấp chuột, cuộn, v.v.) và nhiều nơi khác

Đây là một ví dụ về trình xử lý sự kiện "nhấp chuột" có chức năng gọi lại sẽ được chạy bất cứ khi nào nút được nhấp

//HTML


//JavaScript
const btn = document.querySelector('.btn');

btn.addEventListener('click', () => {
  let name = 'John doe';
  console.log(name.toUpperCase())
})

NB. Hàm gọi lại có thể là hàm thông thường hoặc hàm mũi tên

Lời hứa trong JavaScript

Như đã nêu trước đây, một chức năng gọi lại được thực thi sau khi chức năng ban đầu được thực thi. Bây giờ bạn có thể bắt đầu xem xét xếp chồng rất nhiều hàm gọi lại lên nhau vì bạn không muốn một hàm cụ thể chạy cho đến khi hàm cha chạy xong hoặc một thời gian cụ thể đã trôi qua

Ví dụ: hãy cố gắng hiển thị 5 tên trong bảng điều khiển sau 2 giây mỗi tên – nghĩa là tên đầu tiên xuất hiện sau 2 giây, tên thứ hai sau 4 giây, v.v.

setTimeout(() => {
    console.log("Joel");
    setTimeout(() => {
        console.log("Victoria");
        setTimeout(() => {
            console.log("John");
            setTimeout(() => {
                console.log("Doe");
                setTimeout(() => {
                    console.log("Sarah");
                }, 2000);
            }, 2000);
        }, 2000);
    }, 2000);
}, 2000);

Ví dụ trên sẽ hoạt động, nhưng sẽ khó hiểu, gỡ lỗi hoặc thậm chí thêm xử lý lỗi vào. Điều này được gọi là "Địa ngục gọi lại". Địa ngục cuộc gọi lại là một vấn đề lớn gây ra bởi mã hóa với các cuộc gọi lại lồng nhau phức tạp

Lý do chính để sử dụng lời hứa là để ngăn chặn địa ngục gọi lại. Với Promise, chúng tôi có thể viết mã không đồng bộ theo cách đồng bộ

Gotcha. Bạn có thể tìm hiểu ý nghĩa của đồng bộ và không đồng bộ trong JavaScript qua bài viết này của TAPAS ADHIKARY

Lời hứa là một đối tượng trả về một giá trị mà bạn dự đoán sẽ thấy trong tương lai nhưng hiện tại không thấy

Việc sử dụng thực tế cho các lời hứa sẽ có trong các yêu cầu HTTP, nơi bạn gửi yêu cầu và không nhận được phản hồi ngay lập tức vì đó là hoạt động không đồng bộ. Bạn chỉ nhận được câu trả lời (dữ liệu hoặc lỗi) khi máy chủ phản hồi

Cú pháp lời hứa JavaScript

const myPromise = new Promise((resolve, reject) => {  
    // condition
});

Lời hứa có hai tham số, một cho thành công (giải quyết) và một cho thất bại (từ chối). Mỗi người có một điều kiện phải được thỏa mãn để Lời hứa được giải quyết – nếu không, nó sẽ bị từ chối

const promise = new Promise((resolve, reject) => {  
    let condition;
    
    if(condition is met) {    
        resolve('Promise is resolved successfully.');  
    } else {    
        reject('Promise is rejected');  
    }
});

Có 3 trạng thái của đối tượng Promise

Chưa giải quyết. theo mặc định, đây là Trạng thái ban đầu, trước khi Lời hứa thành công hay thất bại
giải quyết. Hoàn thành lời hứa
Bác bỏ. thất hứa

Cuối cùng, hãy thử triển khai lại callback hell như một lời hứa

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

Bạn có thể xem qua bài viết này của Cem Eygi để hiểu rõ hơn về những lời hứa

Bản đồ () trong JavaScript

Một trong những phương thức thường được sử dụng nhất là

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

9, cho phép bạn lặp lại một mảng và sửa đổi các phần tử của nó bằng hàm gọi lại. Hàm gọi lại sẽ được chạy trên từng phần tử mảng

Giả sử chúng ta có một mảng người dùng chứa thông tin của họ

let users = [
  { firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
  { firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
  { firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];

Chúng tôi có thể lặp lại bằng cách sử dụng bản đồ và sửa đổi đầu ra của nó

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

0

Bạn nên lưu ý rằng

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

6 luôn trả về một mảng mới, ngay cả khi đó là một mảng trống

Nó không làm thay đổi kích thước của mảng ban đầu so với phương thức filter
Nó luôn sử dụng các giá trị từ mảng ban đầu của bạn khi tạo một mảng mới

Gotcha. Phương thức bản đồ hoạt động gần giống như mọi trình lặp JavaScript khác, chẳng hạn như

let users = [
  { firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
  { firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
  { firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];

1 nhưng bạn nên luôn sử dụng phương thức bản đồ bất cứ khi nào bạn định trả về một giá trị

Đây là một mô tả hoàn hảo của Simon Høiberg

Một trong những lý do chính mà chúng tôi sử dụng bản đồ là để chúng tôi có thể đóng gói dữ liệu của mình trong một số HTML, trong khi đối với React, điều này được thực hiện đơn giản bằng cách sử dụng JSX

Bạn có thể đọc thêm về map() tại đây

Lọc() và Tìm() trong JavaScript

let users = [
  { firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
  { firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
  { firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];

2 cung cấp một mảng mới tùy thuộc vào tiêu chí nhất định. Không giống như map(), nó có thể thay đổi kích thước của mảng mới, trong khi

let users = [
  { firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
  { firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
  { firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];

3 chỉ trả về một thể hiện duy nhất (đây có thể là một đối tượng hoặc mục). Nếu có nhiều kết quả phù hợp, nó sẽ trả về kết quả khớp đầu tiên – nếu không, nó sẽ trả về không xác định

Giả sử bạn có một tập hợp mảng người dùng đã đăng ký với các độ tuổi khác nhau

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

5

Bạn có thể chọn sắp xếp dữ liệu này theo nhóm tuổi, chẳng hạn như những người trẻ tuổi (1-15 tuổi), người cao tuổi (50-70 tuổi), v.v.

Trong trường hợp này, chức năng bộ lọc có ích vì nó tạo ra một mảng mới dựa trên các tiêu chí. Chúng ta hãy xem nó hoạt động như thế nào

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

6

Điều này tạo ra một mảng mới. Nó tạo ra một mảng trống nếu điều kiện không thỏa mãn (không khớp)

Bạn có thể đọc thêm về điều này ở đây

Tìm thấy()

Phương thức

let users = [
  { firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
  { firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
  { firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];

3, giống như phương thức

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

7, lặp lại trên mảng để tìm kiếm một thể hiện/mục đáp ứng điều kiện đã chỉ định. Khi tìm thấy nó, nó trả về mục mảng cụ thể đó và ngay lập tức kết thúc vòng lặp. Nếu không tìm thấy kết quả khớp, hàm trả về không xác định

Ví dụ

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

9

Bạn có thể đọc thêm về phương thức find() tại đây

Phá hủy mảng và đối tượng trong JavaScript

Hủy cấu trúc là một tính năng JavaScript được giới thiệu trong ES6, cho phép truy cập và giải nén các biến từ mảng và đối tượng nhanh hơn và đơn giản hơn

Trước khi tính năng hủy được giới thiệu, nếu chúng ta có một dãy trái cây và muốn lấy riêng trái cây thứ nhất, thứ hai và thứ ba, chúng ta sẽ có kết quả như thế này

setTimeout(() => {
    console.log("Joel");
    setTimeout(() => {
        console.log("Victoria");
        setTimeout(() => {
            console.log("John");
            setTimeout(() => {
                console.log("Doe");
                setTimeout(() => {
                    console.log("Sarah");
                }, 2000);
            }, 2000);
        }, 2000);
    }, 2000);
}, 2000);

0

Điều này giống như lặp đi lặp lại cùng một điều có thể trở nên rườm rà. Hãy xem làm thế nào điều này có thể được sắp xếp lại để có được 3 quả đầu tiên

setTimeout(() => {
    console.log("Joel");
    setTimeout(() => {
        console.log("Victoria");
        setTimeout(() => {
            console.log("John");
            setTimeout(() => {
                console.log("Doe");
                setTimeout(() => {
                    console.log("Sarah");
                }, 2000);
            }, 2000);
        }, 2000);
    }, 2000);
}, 2000);

1

Bạn có thể tự hỏi làm thế nào bạn có thể bỏ qua dữ liệu nếu bạn chỉ muốn in kết quả đầu tiên và kết quả cuối cùng, hoặc kết quả thứ hai và thứ tư. Bạn sẽ sử dụng dấu phẩy như sau

setTimeout(() => {
    console.log("Joel");
    setTimeout(() => {
        console.log("Victoria");
        setTimeout(() => {
            console.log("John");
            setTimeout(() => {
                console.log("Doe");
                setTimeout(() => {
                    console.log("Sarah");
                }, 2000);
            }, 2000);
        }, 2000);
    }, 2000);
}, 2000);

2

phá hủy đối tượng

Bây giờ hãy xem cách chúng ta có thể giải cấu trúc một đối tượng – bởi vì trong React bạn sẽ thực hiện rất nhiều việc giải cấu trúc đối tượng

Giả sử chúng ta có một đối tượng người dùng chứa tên, họ của họ, v.v.

setTimeout(() => {
    console.log("Joel");
    setTimeout(() => {
        console.log("Victoria");
        setTimeout(() => {
            console.log("John");
            setTimeout(() => {
                console.log("Doe");
                setTimeout(() => {
                    console.log("Sarah");
                }, 2000);
            }, 2000);
        }, 2000);
    }, 2000);
}, 2000);

3

Theo cách cũ, việc lấy những dữ liệu này có thể gây căng thẳng và lặp đi lặp lại

setTimeout(() => {
    console.log("Joel");
    setTimeout(() => {
        console.log("Victoria");
        setTimeout(() => {
            console.log("John");
            setTimeout(() => {
                console.log("Doe");
                setTimeout(() => {
                    console.log("Sarah");
                }, 2000);
            }, 2000);
        }, 2000);
    }, 2000);
}, 2000);

4

nhưng với việc phá hủy nó dễ dàng hơn rất nhiều

setTimeout(() => {
    console.log("Joel");
    setTimeout(() => {
        console.log("Victoria");
        setTimeout(() => {
            console.log("John");
            setTimeout(() => {
                console.log("Doe");
                setTimeout(() => {
                    console.log("Sarah");
                }, 2000);
            }, 2000);
        }, 2000);
    }, 2000);
}, 2000);

5

Chúng ta cũng có thể làm điều này trong một chức năng

setTimeout(() => {
    console.log("Joel");
    setTimeout(() => {
        console.log("Victoria");
        setTimeout(() => {
            console.log("John");
            setTimeout(() => {
                console.log("Doe");
                setTimeout(() => {
                    console.log("Sarah");
                }, 2000);
            }, 2000);
        }, 2000);
    }, 2000);
}, 2000);

6

Bạn có thể đọc thêm về phá hủy Mảng và Đối tượng tại đây

Toán tử nghỉ ngơi và trải rộng trong JavaScript

Các toán tử trải rộng và nghỉ ngơi của JavaScript sử dụng dấu ba chấm

let users = [
  { firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
  { firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
  { firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];

6. Toán tử còn lại tập hợp hoặc thu thập các mục – nó đặt “phần còn lại” của một số giá trị cụ thể do người dùng cung cấp vào một mảng/đối tượng JavaScript

Giả sử bạn có một loạt các loại trái cây

setTimeout(() => {
    console.log("Joel");
    setTimeout(() => {
        console.log("Victoria");
        setTimeout(() => {
            console.log("John");
            setTimeout(() => {
                console.log("Doe");
                setTimeout(() => {
                    console.log("Sarah");
                }, 2000);
            }, 2000);
        }, 2000);
    }, 2000);
}, 2000);

7

Chúng ta có thể hủy cấu trúc để lấy kết quả thứ nhất và thứ hai, sau đó đặt “phần còn lại” của các kết quả vào một mảng bằng cách sử dụng toán tử phần còn lại

setTimeout(() => {
    console.log("Joel");
    setTimeout(() => {
        console.log("Victoria");
        setTimeout(() => {
            console.log("John");
            setTimeout(() => {
                console.log("Doe");
                setTimeout(() => {
                    console.log("Sarah");
                }, 2000);
            }, 2000);
        }, 2000);
    }, 2000);
}, 2000);

8

Nhìn vào kết quả, bạn sẽ thấy 2 mục đầu tiên và sau đó là mục thứ 3 là một mảng bao gồm các loại trái cây còn lại mà chúng ta không cấu trúc. Bây giờ chúng ta có thể tiến hành bất kỳ loại xử lý nào trên mảng mới được tạo, chẳng hạn như

setTimeout(() => {
    console.log("Joel");
    setTimeout(() => {
        console.log("Victoria");
        setTimeout(() => {
            console.log("John");
            setTimeout(() => {
                console.log("Doe");
                setTimeout(() => {
                    console.log("Sarah");
                }, 2000);
            }, 2000);
        }, 2000);
    }, 2000);
}, 2000);

9

Điều quan trọng cần nhớ là điều này luôn luôn đến sau cùng (vị trí rất quan trọng)

Chúng ta vừa làm việc với mảng - bây giờ hãy xử lý các đối tượng, chúng hoàn toàn giống nhau

Giả sử chúng ta có một đối tượng người dùng có tên, họ và nhiều hơn nữa. Chúng tôi có thể hủy cấu trúc nó và sau đó trích xuất phần còn lại của dữ liệu

const myPromise = new Promise((resolve, reject) => {  
    // condition
});

0

Điều này sẽ ghi kết quả sau

const myPromise = new Promise((resolve, reject) => {  
    // condition
});

1

Bây giờ chúng ta hãy hiểu cách thức hoạt động của toán tử trải rộng và cuối cùng tóm tắt bằng cách phân biệt giữa cả hai toán tử

Toán tử trải rộng

Toán tử trải rộng, như tên của nó, được sử dụng để trải rộng các phần tử mảng. Nó cho chúng ta khả năng lấy danh sách các tham số từ một mảng. Toán tử trải rộng có cú pháp tương tự như toán tử còn lại, ngoại trừ nó hoạt động theo hướng ngược lại

Ghi chú. Toán tử trải rộng chỉ có hiệu quả khi được sử dụng trong các ký tự mảng, lệnh gọi hàm hoặc đối tượng thuộc tính được khởi tạo

Ví dụ: giả sử bạn có mảng các loại động vật khác nhau

const myPromise = new Promise((resolve, reject) => {  
    // condition
});

2

Bạn có thể muốn kết hợp hai mảng này thành một mảng động vật. Hãy thử nó ra

const myPromise = new Promise((resolve, reject) => {  
    // condition
});

3

Đây không phải là điều chúng tôi muốn – chúng tôi muốn tất cả các mục chỉ trong một mảng duy nhất. Và chúng ta có thể đạt được điều này bằng cách sử dụng toán tử trải rộng

const myPromise = new Promise((resolve, reject) => {  
    // condition
});

4

Điều này cũng hoạt động với các đối tượng. Điều quan trọng cần lưu ý là toán tử trải rộng không thể mở rộng các giá trị của đối tượng bằng chữ, vì đối tượng thuộc tính không phải là đối tượng có thể lặp lại. Nhưng chúng ta có thể sử dụng nó để sao chép các thuộc tính từ đối tượng này sang đối tượng khác

Ví dụ

const myPromise = new Promise((resolve, reject) => {  
    // condition
});

5

Bạn có thể đọc thêm về các toán tử Trải rộng và Nghỉ ngơi của JavaScript tại đây

Giá trị duy nhất - Set() trong JavaScript

Gần đây, tôi đã cố gắng tạo một tab danh mục cho một ứng dụng mà tôi cần tìm nạp giá trị danh mục từ một mảng

const myPromise = new Promise((resolve, reject) => {  
    // condition
});

6

Điều đầu tiên là lặp qua mảng, nhưng tôi nhận được các giá trị lặp lại

const myPromise = new Promise((resolve, reject) => {  
    // condition
});

7

Điều này có nghĩa là tôi cần thiết lập một điều kiện để tránh lặp lại. Có một chút khó khăn cho đến khi tôi bắt gặp hàm tạo/đối tượng

let users = [
  { firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
  { firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
  { firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];

7 do ES6 cung cấp. )

Tập hợp là tập hợp các phần tử là duy nhất, không phần tử nào lặp lại. Hãy xem làm thế nào chúng ta có thể thực hiện điều này một cách dễ dàng

const myPromise = new Promise((resolve, reject) => {  
    // condition
});

8

NB. Tôi quyết định trải các giá trị thành một mảng. Bạn có thể đọc thêm về các giá trị duy nhất tại đây

Các khóa đối tượng động trong JavaScript

Điều này cho phép chúng tôi thêm các khóa đối tượng bằng cách sử dụng ký hiệu dấu ngoặc vuông. Điều này có thể không hợp lý với bạn ngay bây giờ, nhưng khi bạn tiếp tục học React hoặc bắt đầu làm việc với các nhóm, bạn có thể bắt gặp nó

Trong JavaScript, chúng tôi biết rằng các đối tượng thường được tạo thành từ các thuộc tính/khóa và giá trị và chúng tôi có thể sử dụng ký hiệu dấu chấm để thêm, chỉnh sửa hoặc truy cập một số giá trị. như một ví dụ

const myPromise = new Promise((resolve, reject) => {  
    // condition
});

9

Chúng tôi cũng có tùy chọn sử dụng ký hiệu dấu ngoặc vuông, được sử dụng khi chúng tôi cần các khóa đối tượng động

Chúng ta có ý nghĩa gì bởi các phím đối tượng động? . Quy ước đặt tên tiêu chuẩn chỉ cho phép camelCase và Snake_case, nhưng bằng cách sử dụng ký hiệu dấu ngoặc vuông, chúng ta có thể giải quyết vấn đề này

Ví dụ: giả sử chúng tôi đặt tên cho khóa của mình bằng dấu gạch ngang ở giữa các từ, chẳng hạn (

let users = [
  { firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
  { firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
  { firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];

8)

const promise = new Promise((resolve, reject) => {  
    let condition;
    
    if(condition is met) {    
        resolve('Promise is resolved successfully.');  
    } else {    
        reject('Promise is rejected');  
    }
});

0

Bạn có thể thấy sự khác biệt giữa ký hiệu dấu chấm và ký hiệu dấu ngoặc. Hãy xem các ví dụ khác

const promise = new Promise((resolve, reject) => {  
    let condition;
    
    if(condition is met) {    
        resolve('Promise is resolved successfully.');  
    } else {    
        reject('Promise is rejected');  
    }
});

1

Bạn cũng có thể thực hiện các thao tác phức tạp hơn bằng cách sử dụng các điều kiện trong dấu ngoặc vuông, như thế này

const promise = new Promise((resolve, reject) => {  
    let condition;
    
    if(condition is met) {    
        resolve('Promise is resolved successfully.');  
    } else {    
        reject('Promise is rejected');  
    }
});

2

Bạn có thể đọc thêm về điều này ở đây

giảm () trong JavaScript

Đây được cho là hàm mảng mạnh nhất. Nó có thể thay thế các phương thức

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

7 và

let users = [
  { firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
  { firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
  { firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];

3 và cũng khá tiện lợi khi thực hiện các phương thức

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

6 và

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

7 trên một lượng lớn dữ liệu

Khi bạn xâu chuỗi phương thức bản đồ và bộ lọc lại với nhau, bạn sẽ thực hiện công việc hai lần - đầu tiên lọc từng giá trị đơn lẻ và sau đó ánh xạ các giá trị còn lại. Mặt khác,

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

03 cho phép bạn lọc và lập bản đồ trong một lượt. Phương pháp này mạnh mẽ, nhưng nó cũng phức tạp và phức tạp hơn một chút

Chúng tôi lặp lại mảng của mình và sau đó nhận được hàm gọi lại, tương tự như

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

6,

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

7,

let users = [
  { firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
  { firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
  { firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];

3 và các hàm khác. Sự khác biệt chính là nó giảm mảng của chúng ta thành một giá trị duy nhất, có thể là một số, mảng hoặc đối tượng

Một điều khác cần lưu ý về phương thức reduce() là chúng ta đang truyền vào hai đối số, điều này chưa từng xảy ra kể từ khi bạn bắt đầu đọc hướng dẫn này

Đối số đầu tiên là tổng/tổng của tất cả các tính toán và đối số thứ hai là giá trị lặp lại hiện tại (bạn sẽ hiểu ngay sau đây)

Ví dụ: giả sử chúng tôi có một danh sách tiền lương cho nhân viên của mình

const promise = new Promise((resolve, reject) => {  
    let condition;
    
    if(condition is met) {    
        resolve('Promise is resolved successfully.');  
    } else {    
        reject('Promise is rejected');  
    }
});

3

Và chúng tôi muốn tính 10% phần mười cho tất cả nhân viên. Chúng ta có thể dễ dàng làm điều này với phương thức rút gọn, nhưng trước khi làm điều đó, hãy làm điều gì đó dễ dàng hơn. trước tiên hãy tính tổng tiền lương

const promise = new Promise((resolve, reject) => {  
    let condition;
    
    if(condition is met) {    
        resolve('Promise is resolved successfully.');  
    } else {    
        reject('Promise is rejected');  
    }
});

4

NB. Chúng tôi đã chuyển một đối số thứ hai là tổng số, nó có thể là bất kỳ thứ gì - ví dụ: một số hoặc đối tượng

Bây giờ hãy tính phần mười 10% cho tất cả nhân viên và lấy tổng số. Chúng tôi chỉ có thể nhận được 10% từ tổng số hoặc lần đầu tiên nhận được từ mỗi mức lương trước khi cộng chúng lại

const promise = new Promise((resolve, reject) => {  
    let condition;
    
    if(condition is met) {    
        resolve('Promise is resolved successfully.');  
    } else {    
        reject('Promise is rejected');  
    }
});

5

Gotcha. Chúng tôi đã sử dụng một đối tượng làm đối số thứ hai và chúng tôi cũng sử dụng các khóa đối tượng động. Bạn có thể đọc thêm về phương pháp rút gọn tại đây

Chuỗi tùy chọn trong JavaScript

Chuỗi tùy chọn là một cách an toàn để truy cập các thuộc tính đối tượng lồng nhau trong JavaScript thay vì phải thực hiện nhiều kiểm tra null khi truy cập một chuỗi dài các thuộc tính đối tượng. Đây là một tính năng mới được giới thiệu trong ES2020

Ví dụ

const promise = new Promise((resolve, reject) => {  
    let condition;
    
    if(condition is met) {    
        resolve('Promise is resolved successfully.');  
    } else {    
        reject('Promise is rejected');  
    }
});

6

Giả sử bạn đang cố lấy các sở thích từ mảng trên. Hãy thử nó ra

const promise = new Promise((resolve, reject) => {  
    let condition;
    
    if(condition is met) {    
        resolve('Promise is resolved successfully.');  
    } else {    
        reject('Promise is rejected');  
    }
});

7

Khi bạn nhìn vào bảng điều khiển của mình, bạn sẽ nhận thấy rằng lần lặp đầu tiên đã hoàn thành, nhưng lần lặp thứ hai không có sở thích. Vì vậy, nó phải đưa ra một lỗi và thoát ra khỏi vòng lặp - điều đó có nghĩa là nó không thể lấy dữ liệu từ các Đối tượng khác trong mảng

đầu ra

const promise = new Promise((resolve, reject) => {  
    let condition;
    
    if(condition is met) {    
        resolve('Promise is resolved successfully.');  
    } else {    
        reject('Promise is rejected');  
    }
});

8

Lỗi này có thể được khắc phục bằng chuỗi tùy chọn, mặc dù có một số phương pháp có thể khắc phục lỗi (ví dụ: sử dụng điều kiện). Hãy xem cách chúng tôi thực hiện điều này với cả điều kiện và chuỗi tùy chọn

Phương pháp kết xuất có điều kiện

const promise = new Promise((resolve, reject) => {  
    let condition;
    
    if(condition is met) {    
        resolve('Promise is resolved successfully.');  
    } else {    
        reject('Promise is rejected');  
    }
});

9

Chuỗi tùy chọn

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

0

đầu ra

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

1

Điều này có thể không thực sự có ý nghĩa với bạn bây giờ, nhưng khi bạn bắt đầu làm việc gì đó lớn hơn trong tương lai, nó sẽ đâu vào đó. Bạn có thể đọc thêm ở đây

Tìm nạp API & Lỗi trong JavaScript

API tìm nạp, đúng như tên gọi, được sử dụng để lấy dữ liệu từ các API. Đó là API trình duyệt cho phép bạn sử dụng JavaScript để thực hiện các yêu cầu AJAX (JavaScript và XML không đồng bộ) cơ bản

Bởi vì nó được cung cấp bởi trình duyệt, bạn có thể sử dụng nó mà không cần phải cài đặt hoặc nhập bất kỳ gói hoặc phần phụ thuộc nào (như axios). Cấu hình của nó khá đơn giản để nắm bắt. API tìm nạp cung cấp một lời hứa theo mặc định (Tôi đã đề cập đến các lời hứa trước đó trong bài viết này)

Hãy xem cách tìm nạp dữ liệu qua API tìm nạp. Chúng tôi sẽ sử dụng API miễn phí chứa hàng nghìn trích dẫn ngẫu nhiên

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

2

Những gì chúng tôi đã làm ở đây là

Dòng 1. chúng tôi đã nhận được dữ liệu từ API, đã trả lại một lời hứa

Dòng 2. Sau đó, chúng tôi đã nhận được định dạng dữ liệu

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

07, đây cũng là một lời hứa

dòng 3. Chúng tôi đã nhận được dữ liệu hiện trả về JSON
dòng 4. Chúng tôi đã nhận lỗi trong trường hợp có bất kỳ

Chúng ta sẽ xem làm thế nào điều này có thể được thực hiện với async/await trong phần tiếp theo. Bạn có thể đọc thêm về API tìm nạp tại đây

Cách xử lý lỗi trong Fetch API

Bây giờ chúng ta hãy xem cách chúng ta có thể xử lý lỗi từ tìm nạp API mà không cần phụ thuộc vào từ khóa catch. Hàm

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

08 sẽ tự động đưa ra lỗi đối với lỗi mạng chứ không phải đối với lỗi HTTP, chẳng hạn như phản hồi từ 400 đến 5xx

Tin tốt là

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

09 cung cấp một cờ

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

50 đơn giản cho biết liệu yêu cầu có thất bại hay mã trạng thái của phản hồi HTTP nằm trong phạm vi thành công

Điều này rất đơn giản để thực hiện

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

3

Bạn có thể đọc thêm về Tìm nạp lỗi API tại đây

Không đồng bộ/Đang chờ trong JavaScript

Async/Await cho phép chúng ta viết mã không đồng bộ theo kiểu đồng bộ. Điều này có nghĩa là bạn không cần tiếp tục lồng các cuộc gọi lại

Hàm async luôn trả về một lời hứa

Bạn có thể đang vắt óc tự hỏi sự khác biệt giữa đồng bộ và không đồng bộ nghĩa là gì. Nói một cách đơn giản, đồng bộ có nghĩa là các công việc được hoàn thành lần lượt. Không đồng bộ có nghĩa là các tác vụ được hoàn thành độc lập

Lưu ý rằng chúng tôi luôn có async trước chức năng và chúng tôi chỉ có thể sử dụng chờ đợi khi chúng tôi có async. Bạn sẽ hiểu sớm thôi

Bây giờ, hãy triển khai mã API Tìm nạp mà chúng ta đã thực hiện trước đó bằng cách sử dụng async/await

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

4

Đây là cách dễ đọc hơn, phải không?

Bạn có thể tự hỏi làm thế nào chúng ta có thể xử lý lỗi với async/await. Chuẩn rồi. Bạn sử dụng từ khóa thử và bắt

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

5

Bạn có thể đọc thêm về async/await tại đây

Phần kết luận

Trong bài viết này, chúng ta đã tìm hiểu hơn 10 phương thức và khái niệm JavaScript mà mọi người nên tìm hiểu kỹ trước khi học React

Có rất nhiều phương pháp và khái niệm khác mà bạn nên biết, nhưng đây là những thứ bạn có thể không thực sự chú ý khi học JavaScript. Đây là những điều quan trọng cần hiểu trước khi bạn học React

Giả sử bạn mới bắt đầu với JavaScript – Tôi đã tuyển chọn một danh sách tài nguyên tuyệt vời sẽ giúp bạn tìm hiểu các khái niệm và chủ đề về JavaScript tại đây. Đừng quên sao và chia sẻ. . )

QUẢNG CÁO

Joel Olawanle

Nhà phát triển Frontend & Người viết kỹ thuật

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Tôi có thể trực tiếp học React mà không cần biết JavaScript không?

Bạn không cần phải là một chuyên gia JavaScript để bắt đầu hành trình ReactJS của mình , nhưng kiến thức về nguyên liệu là điều bắt buộc đối với bất kỳ đầu bếp nào muốn nấu ăn thành thạo, điều đó cũng giống như .

Tôi có thể trực tiếp học phản ứng JS không?

Rất may, React rất dễ học, nhưng chỉ khi bạn có kiến thức cơ bản về JavaScript . Tất nhiên, khó khăn khi học bất cứ điều gì mới là hơi chủ quan. Bất kể kinh nghiệm trước đó của bạn là gì, có rất nhiều tài nguyên giúp học React dễ dàng hơn.

React có khó học hơn JavaScript không?

React khó học hơn nhiều so với JavaScript nếu bạn cố gắng học nó trước . Điều này là do về cơ bản bạn sẽ học cả hai ngôn ngữ cùng một lúc. Chủ yếu là vì rất nhiều React thực sự là JavaScript vani thuần túy. Tuy nhiên, nếu bạn cố gắng học JavaScript trước, thì việc học React sẽ cực kỳ dễ dàng.

Tôi có thể học ReactJS trong 2 ngày không?

Trong khi bạn có thể nắm vững kiến thức cơ bản về React sau vài ngày , chẳng hạn như hiểu kiến thức cơ bản về các thành phần và cách định cấu hình một trang web đơn giản .

programming javascript

Tìm hiểu React mà không cần JavaScript

Hàm gọi lại trong JavaScript

Lời hứa trong JavaScript

Bản đồ () trong JavaScript

Lọc() và Tìm() trong JavaScript

Tìm thấy()

Phá hủy mảng và đối tượng trong JavaScript

phá hủy đối tượng

Toán tử nghỉ ngơi và trải rộng trong JavaScript

Toán tử trải rộng

Giá trị duy nhất - Set() trong JavaScript

Các khóa đối tượng động trong JavaScript

giảm () trong JavaScript

Chuỗi tùy chọn trong JavaScript

Phương pháp kết xuất có điều kiện

Chuỗi tùy chọn

Tìm nạp API & Lỗi trong JavaScript

Cách xử lý lỗi trong Fetch API

Không đồng bộ/Đang chờ trong JavaScript

Phần kết luận

Tôi có thể trực tiếp học React mà không cần biết JavaScript không?

Tôi có thể trực tiếp học phản ứng JS không?

React có khó học hơn JavaScript không?

Tôi có thể học ReactJS trong 2 ngày không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội