Posts

Showing posts with the label web development

User Guide for Zustand

Image
Introduction Zustand is an extremely lightweight, fast, and easy-to-use state management library for React applications. Highlighted advantages of Zustand include: No need for a Provider to wrap the application Extremely concise syntax that reduces boilerplate code Excellent support for TypeScript High performance thanks to a mechanism that only re-renders necessary components. Detail First, install it into your project as follows: yarn add zustand Let's start with a simple Counter app example for you to easily understand how to use it. Create file useCounterStore.ts import {create} from 'zustand' interface CounterState { count : number increment : () => void decrement : () => void reset : () => void } const useCounterStore = create < CounterState >( set => ({ count: 0 , increment : () => set ( state => ({ count: state.count + 1 })) , decrement : () => set ( state => ({ count: state.count - 1 })) , res...

NextJS Practice Series

Image
Introduction NextJS is a powerful React framework that enables developers to build high-performance web applications with features like Server-Side Rendering (SSR) and Static Site Generation (SSG). Key advantages include improved SEO, automatic code splitting for faster page loads, a built-in routing system, and an optimized developer experience with "Fast Refresh" and easy deployment through platforms like Vercel. Prerequisites NextJS framework is primarily used for building web applications based on ReactJS and is supported with many more features, so if you only have a need to create a Single Page Web Application or have never started with React , you should look up some basic knowledge before continuing with the posts in this series. Detail Using styled-components in Next Applications Understanding React Server Component User Guide for Zustand Konva React Konva User Guide Optimizing Konva Performance with Viewport Culling Optimizing Konva Performance with rAF Optimizing K...

Guide to Setting Up Jest Testing for a NextJS Project

Image
Introduction In this article, I will guide you on adding Jest (currently the most popular testing library) to test for projects using the NextJS framework. This integration helps developers automate the source code testing process, from logical functions (Unit Testing) to user interface testing (Integration Testing) in the Node.js environment. Here are the prominent advantages: Fast and effective: Jest runs tests in parallel, saving significant time as the project scales. Built-in Support: Next.js provides the next/jest configuration, making setup extremely simple, automatically handling CSS files, images, and framework-specific features. Excellent Watch Mode: Jest has the ability to detect recently changed files and only run related tests, keeping the development workflow smooth. Coverage Reports: This tool has built-in capability to statistic the percentage of source code tested, helping you assess application quality and reliability visually. Rich ecosystem: When combined with React...