Javascript

Javascript: Unit testing React Component với Jest và Enzyme

Sau khi chúng ta thống nhất structure và chia những component trong React, chúng ta bắt đầu phần cài đặt cho từng component, kiểm thử bằng tay và sau đó viết unit testing. Vậy tại sao phải viết unit test cho những component trong React? Đảm bảo code chúng ta chạy đúng một lần nữa sau vòng manual testingKiểm tra…

Continue Reading

Javascript

Javascript: Sự khác nhau giữa Cookie, localStorage và sessionStorage

Hiện nay với nhu cầu lưu trữ thông tin người dùng trên trình duyệt, chúng ta có thể sử dụng localStorage, sessionStorage, hay cookie. Những dữ liệu này thường đơn giản chỉ là những thông tin như ngôn ngữ, theme, tùy chỉnh layout, … Nhưng trên thực tế, chúng ta thường nhầm lẫn giữa cookie, localStorage và sessionStorage. Vậy hôm…

Continue Reading

Javascript

Javascript: Web worker là gì?

Web worker là một tác vụ javascript chạy ngầm dưới trang web, không làm ảnh hưởng đến hiệu năng của trang web hiện tại. Như bạn đã biết Javascript chỉ có một luồng. Nên nếu chúng ta thực hiện nhiều tác vụ cùng một lúc thì nó sẽ làm đứng trình duyệt. Ví dụ như sắp xếp và format một…

Continue Reading

Javascript

ReactJS: Code-Splitting là gì?

Code-Splitting là một trong những kỹ thuật giúp tăng tốc thời gian load Javascript của React App. Một trang web thường có một số thành phần cơ bản sau: HTML, CSS, Javascript và một số media như images, fonts … Và có thể Javascript là một trong những thành phần làm chậm thời gian load page nhất. Một byte của…

Continue Reading

Javascript

ReactJS: HOC là gì?

HOC(Higher Order Component) đơn giản là một component nhận đầu vào là một component và trả về là một component khác. Tất cả trong React đều là component. Và ở một số trường hợp HOC giúp chúng ta tránh việc lặp code và sử dụng lại logic cho nhiều component khác nhau. HOC giống như một dịch vụ mà khi…

Continue Reading

Javascript

ReactJS: Render Props là gì?

Nói một cách dễ hiểu là Render Props là một thủ thuật giúp chúng ta sử dụng lại logic của một Component cho một Component khác. Render Props được sử dụng như một props với giá trị là một function. Thông thường nó có dạng như sau: <Component render={ (data) => <OtherComponent item={data}></OtherComponent> }> </Component> Để hiểu hơn về ứng…

Continue Reading

Javascript

ReactJS: Lifecycle trong ReactJS -get Derived State From Props là gì?

Một trong những phần quan trọng khi phát triển một React Component là hiểu được những lifecycles. Hiểu được khi nào Component khởi tạo(constructor), component đã được build thành DOM(componentDidMount), component đã được cập nhật state(componentDidUpdate), khi nào component bị huỷ bỏ(componentWillUnmount),… Bạn có thể tham khảo toàn bộ sơ đồ tại đây. Và có một phương thức static khiến…

Continue Reading

Javascript

ReactJS: Cách tạo và sử dụng Context API

Reactjs là một View library, nó cho phép chúng ta kết hợp những component với nhau để tạo nên một web app. Và một khi cây component của app nhiều hơn thì sẽ phát sinh trường hợp chúng ta muốn chia sẻ những state chung với nhau cho nhiều component. Do đó, bạn có thể cân nhắc và sử dụng…

Continue Reading