If you are using React or learning React, you must have heard of the term “Virtual DOM”. Now what is a Virtual DOM, and why does React use it? Real DOM First things first, DOM stands for “Document Object Model”. The DOM in simple words represents the UI of your application. Everytime there is a…
There are lots of tutorials online that give you instructions on how to set up Google Analytics with Next.js project. But most of them require you to use , a library that basically wraps Google Analytics logic inside a React component. This is good, but I personally prefer a solution that: Does not…
When you need server-side rendering React app. Next.js is the best choice. And when it comes to styling react component first thing comes in my mind is styled-components. Although it depends on your preference. Let say you want to pair Next.js with styled-components. But use styled-components with…
According to Gatsby documentation, you can use wrapRootElement to wrap your application with provider components and wrapPageElement to wrap your pages with components that won’t get unmounted on page change. But that explanation begs the question: why we don’t do both with , and instead, we need…
When building an app with React Router, eventually you’ll run into the question of navigating programmatically. Because of the churn that React Router has gone through in the last few years, there are a lot of outdated, and frankly incorrect tutorials out there. The goal of this post is to break…
A common use case for when you’re building an app with React Router is to have a “catch all” route that will be rendered if none of your other routes match. A good example of this is if you wanted your client-side router to render a 404 page. To see how this works, let’s first render a navbar with…
React Context API is a way to essentially create global variables that can be passed around in a React app. This is the alternative to “prop drilling”, or passing props from grandparent to parent to child, and so on. Context is often touted as a simpler, lighter solution to using Redux for state…
controlled-vs-uncontrolled-cover Có thể bạn đã thấy nhiều bài viết nói rằng “bạn không nên sử dụng **setState”** , và nhiều tài liệu khẳng định” **ref là thứ không nên dùng”** … Những điều này thật sự rất mâu thuẫn. Thật khó để hiểu được làm thế nào để “làm đúng” và thậm chí là tìm ra những tiêu chí…
Chào các bạn, hôm nay mình sẽ nói về một chủ đề mình tưởng chừng như khá là đơn giản, ai làm React cũng biết rồi nhưng hóa ra là không phải. Đấy là việc viết function trong React. Mình có tham gia một số group về React thì thấy các bạn vẫn đang than thở về việc code React khi viết function cứ phải…
react lifecycle Bạn có thể check diagram này trên http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ Summary Từ phiên bản 16.3 trở đi, React đã có lifecycle mới tuy nhiên vẫn hỗ trợ life cycle cũ. Từ phiên bản 17 thì lifecycle cũ không được hỗ trợ nữa nên ở bài này chỉ để cập đến lifecyle…
Bạn mới bắt đầu với React? Bạn đang băn khoăn tại sao càng code nhiều thì website chạy càng chậm? Bạn không biết làm sao để khi test trên Google PageSpeed Insights đạt được kết quả tốt hơn? Mình cũng đã từng có những băn khoăn đó. Hôm nay mình sẽ hướng dẫn cho các bạn một vài thủ thuật để làm cho…