How To Dev

Introduction React is a JavaScript library created by Facebook , often referred to as the most popular frontend framework today. This page aims to gather articles related to ReactJS , covering topics such as theory, features, and commonly used packages in the process of building ReactJS applications. I will update this series with more articles in the future as new ideas for content come up. The articles are arranged in increasing order of difficulty, so if you have time, it's recommended to start from the beginning of the series. This will ensure you grasp the essential knowledge and information needed for the subsequent articles. Here are some key topics in the series that you need to explore to effectively use ReactJS : Fundamental : React Hook, React Context, Lazy load, etc. State management : redux, mobx, recoil, etc. Middleware libraries : redux-thunk, redux-saga, redux-observable, etc. Popular packages : react-query, immer, styled-components, etc. Rendering techniques : C...

Introduction In this article, I will guide you through deploying a React Application to Google Kubernetes Engine (GKE) . Previously, I wrote an article about deploying a NodeJS Application to GKE , which you can refer to for some basic information before continuing. Steps to Follow The process is quite similar to deploying a NodeJS Application and includes the following steps: Create a React Application Build a Docker image Push the Docker image Deploy the Docker image to GKE You will notice that when working with Kubernetes , the main difference is in the step where you build the Docker image . Depending on the application you need to deploy, there are different ways to build the Docker image . However, the common point is that once you build the Docker image , you have completed almost half of the process. This is because the subsequent steps involving Kubernetes are entirely the same. Detailed Process 1. Create a React Application In this step, you can either use an existing R...

Introduction Firebase Firebase is a product of Google that helps developers build, manage, and grow their apps easily. It’s designed to make app development faster and more secure. In this article, I'll guide you through deploying a ReactJS application on Firebase . Google provides Firebase hosting for free, offering stable speed and SSL certificates, making it ideal for creating HTTPS-supported websites. Creating a React Application Firstly, you need to create a React Application project or use an existing one. You can use tools like vite , create-react-app , or Nx/Nrwl . The project initialization process is straightforward and can be easily found. Here, I'll use Nx, a build system that provides various tools for developing projects in multiple programming languages. You can learn more about Nx/React here . After successfully initializing and running the React application, the result should look like this: Next, let's proceed to build the React application. If you...

Introduction PureComponent in React is built on the concept of Pure Function. In this article, let's dive into PureComponent and the memo hook in React, as well as how to apply these tools to improve performance in React applications. What is a Pure Function? First off, it's important to understand the concept of a Pure Function, which will always return the same result with the same input parameters. To put it simply, the same input will always yield the same output. For example: // this is pure function function sum ( a : number , b : number ): number { return a + b ; } sum ( 1 , 2 ); // always return 3 const offset = 3 ; // this is not pure function function sumWithOffset ( a : number , b : number ): number { return a + b + offset ; } sum ( 1 , 2 ); // result depend on offset value What is a Pure Component? In React, a PureComponent is considered a component that only renders when there's a change in props or state, where the change in props or state is det...

A page aggregator designed for easy reference and search, compiling all blog posts for convenient access.

Introduction As most of us already know, React enables us to break down interfaces into independent parts called Components, facilitating reuse and customization. Currently, React Components are divided into two main types: Client Components : widely used in Client Side Rendering (CSR) applications. Server Components : a new type of component that renders on the server side before being sent to the client (browser). At first glance, it may seem similar to Server Side Rendering (SSR) which has been used for a while, but in reality, these two concepts have certain differences. The Difference of RSC (React Server Component) Ease of development: React Server Component allows easy direct connection to server-side resources such as databases or internal services, streamlining development processes. Improved performance: By reducing latency in communication between client and server, React Server Component enhances overall application performance. Reduced source code size: Libraries utili...

Introduction When it comes to styling your React application with a css-in-js approach, styled-components stands out as a top choice. In this post, I'll walk you through how to utilize styled-components in a Next application. By default, Next provides a way to use  css-in-js  through styled-jsx. However, if you find styled-jsx cumbersome because it requires writing CSS within JSX , which can make your components lengthier, then styled-components might be the right fit for you. Installation of styled-components npm install styled-components // or yarn add styled-components Example usage: import styled from 'styled-components' const Wrapper = styled . div ` color: red; text-align: center; ` // Component with input param const Wrapper2 = styled . div <{ $color ?: string }> ` color: ${ props => props . $color } ; text-align: center; ` export default function Index () { return ( <> < Wrapper > Demo 1 </ Wrapper > ...

Introduction You might have heard or seen others mention the react-query library quite often. Why should we use react-query when we can use useEffect to fetch data from an API ? This article will answer that question. What is react-query? react-query is a set of hooks for fetching, caching, and updating asynchronous data in React . Simply put, react-query is a library for fetching , caching , and updating asynchronous data when used in React . Why should we use react-query? Normally, there are many ways to fetch data from a server. Some popular methods include using useEffect and useState , or using a state management library like redux . export const Page = () => { const [ data , setData ] = useState (); useEffect (() => { const loadData = async () => { const response = await fetch ( hostAPI ). then ( response => response . json ()); setData ( response ) } loadData () }) return < DisplayData /> } This me...