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 NodeJS is an open-source and cross-platform JavaScript runtime environment . Here are some key points about NodeJS : V8 Engine : NodeJS runs on the V8 JavaScript engine , which is also the core of Google Chrome . This allows NodeJS to be highly performant. Asynchronous and Non-Blocking : NodeJS  uses an event-driven, non-blocking I/O model. It’s lightweight and efficient, making it ideal for data-intensive real-time applications. Single-Threaded : NodeJS  runs in a single process, handling multiple requests without creating new threads. It eliminates waiting and continues with the next request. Common Language : Frontend developers who write JavaScript for browsers can use the same language for server-side code in NodeJS . You can even use the latest ECMAScript standards without waiting for browser updates. This page is designed to compile articles related to NodeJS , including how to integrate it with various libraries and relevant tech stacks. I will continue to u

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 In this article, we're diving into Immutable and Mutable in JavaScript, while also exploring how functions like Object.freeze() and Object.seal() relate to Immutable . This is a pretty important topic that can be super helpful in projects with complex codebase. So, what's Immutable? Immutable is like a property of data in JavaScript. It means once the data is created, it can't be changed. This allows for better memory management and catching changes promptly. This is a big deal and totally contrasts with Mutable, which is the default nature when you initialize data in JavaScript. Implementing Immutable in a project makes development much smoother, reduces issues that crop up, and saves a ton of effort and time for maintenance down the road. But what happens if you don't use Immutable? Let me give you an example of how changing data during development can lead to some serious issues. let info = { name: "name" , address: "addres

Introduction For a long time, we've relied on callbacks to deal with asynchronous code in JavaScript. As a result, many of us have faced dreadful experiences dealing with deeply nested functions ( callback hell ). Callback hell Callbacks come with a lot of drawbacks. When we have multiple asynchronous operations, callbacks have to wait for each other to execute, prolonging the completion time. Additionally, writing nested callbacks makes our code messy and hard to maintain. In the ES6 (ECMAScript 2015) version, JavaScript introduced Promises. This was a fantastic replacement for callbacks and was quickly embraced by the community. Our new code looks similar to the old one, making it easier to follow and maintain. However, the issues with callbacks weren't completely resolved. Since the ES7 (ECMAScript 2016) version, Async/Await has been added to make asynchronous code in JavaScript look and feel easier to use. What is Async/Await? Async/Await is a feature of JavaScript that

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 >