react.js

A collection of 10 post

Using Google Analytics with Next.js

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…

Using Next.js ▲ with styled-components 💅 the easy way

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…

wrapPageElement vs wrapRootElement in Gatsby

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…

Programmatically navigate with React Router

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…

Handling 404 pages (catch all routes) with React Router v4

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…

Using Context API in React (Hooks and Classes)

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 form input vs Uncontrolled form input

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í…

Function trong React không cần bind

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…

Bàn một chút về React Lifecycle

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…

Tối ưu performance cho React

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…