React

Learn the basics of end-to-end testing in a real browser, and how to install Playwright, write tests, and run them with UI mode and Codegen.

Review Parts 1–14, see how TDD changed the code, and explore where to go next with end-to-end and visual regression testing.

Explore the costs and benefits of introducing TDD to a production project, strategies for adopting it as a team, and how CI/CD makes testing sustainable.

Compare unit, integration, and end-to-end tests, and learn how the Testing Trophy guides an effective React testing strategy.

Learn to write robust tests that survive internal changes by avoiding implementation details and focusing on user behavior.

Recognize hard-to-test components and improve testability through UI/logic separation and provider-aware test setup.

Use userEvent.type to simulate text input and verify validation messages when required fields are missing.

Introduce Mock Service Worker to intercept network requests, manage mock responses, and test success and server-error cases without a real server.

Learn to test asynchronous operations such as API calls, and verify Loading, Success, and Error states with findBy queries.

Extract business logic into a custom hook and test it independently with renderHook and act.

Test conditional rendering as React state changes, and learn when to use getBy and queryBy.

Refactor a React component by extracting a reusable child component, and use existing tests to confirm the behavior remains reliable.

Implement the minimum component code to turn failing tests green, then use useState to complete its interactive behavior.

Learn to test React from the user’s perspective, use accessibility queries, and write a failing test as the first TDD step.

Create a React project with Vite, then configure Vitest and React Testing Library for test-driven development.

Learn why frontend testing matters, what TDD offers React projects, and which behaviors to cover with tests.

Explore View Transitions, stronger Server Actions security, useOptimistic, useEffectEvent, and Activity in Next.js 16 and React 19.

Analyze the React2Shell vulnerability from a computer science perspective (serialization and RCE), and review general mitigations that are not tied to a specific cloud provider.

Build a TypeScript To-Do app with Zustand and learn how to design a store, manage form state, and structure components efficiently.

Understand Zustand’s create function with TypeScript, optimize performance with selectors and shallow, and use advanced store methods such as get, set, and subscribe.

Learn why React applications need state management, compare Zustand with Context API, Redux, and Recoil, and build a simple counter store.

Abstract React Query into reusable custom hooks for pages and components, with practical JSONPlaceholder examples.

Install TanStack Query in React and learn to fetch, cache, and refetch API data, with examples of query keys, Suspense, SSR, and error handling.

Set up i18next in React, Expo, and React Native, manage translation resources, use dynamic keys and variables, format values, and handle plural forms.

Set up a typed Axios client with interceptors and shared request and response types in Next.js, with patterns you can adapt to React, React Native, or Node.js.

Learn practical TypeScript patterns for React, including generic components, custom hook type inference, and type-safe forms with Zod or Yup.

Learn to use React DevTools (Components and Profiler), test patterns with Jest and React Testing Library (events, async behavior, and mocks), and a UI development and testing workflow with Storybook and Chromatic.

Learn how to prevent XSS and CSRF in React, understand the front end’s role in OAuth 2.0/OIDC, and manage code splitting and third-party scripts safely.

Explore effective API communication and asynchronous strategies in React, including Fetch vs. Axios, request cancellation with AbortController, when to use GraphQL clients, and Suspense for data loading.

Explore micro frontend architecture, its benefits and costs, and implementation options including single-spa and Webpack Module Federation.

Learn principles and patterns for reusable, maintainable React components. Explore SRP, Atomic Design, and the Container/Presentational pattern with examples, plus practical ways to improve testability.

Learn how arrays, linked lists, trees, graphs, and hash tables support React rendering, Hooks, Update Queues, caching, code splitting, and performance.

Learn React Router v6 through the History API, URL matching, nested routes and Outlet, Link, navigation hooks, and code splitting.

Compare CSR, SSR, and SSG in React, understand Hydration, and explore Next.js streaming SSR and Islands Architecture, with their benefits, trade-offs, and use cases.

Learn how React global state works, optimize the Context API, compare Redux Toolkit, Zustand, and Recoil, and manage server state with React Query and SWR.

Learn how browsers render pages, how React performs its first render, how the JavaScript event loop works, and how CSR, SSR, and SSG differ.

Understand the timing differences between useEffect and useLayoutEffect, practical uses for useRef, state management with useReducer, and how custom hooks make logic reusable.

Learn how React 18 automatic batching and concurrency work, including differences from React 17, microtasks, flushSync, and the startTransition API.

Learn how React’s useState Hook and setter work internally, including Hook call order, linked lists, the Update Queue, functional updates, batching, and lazy initial state.

Understand React’s rendering pipeline and Fiber architecture, including the Virtual DOM, reconciliation, Fiber nodes, cooperative scheduling, and why keys matter.

Create API keys and retrieve EOA wallet balances across chains using Etherscan V2, React, and TypeScript.

A deep dive into Server-Side Rendering (SSR) for React developers. Learn why SSR is useful, how it works, and how React 18 streaming rendering uses renderToPipeableStream and Suspense.

Learn how to manage global state with Context API in React (Native), with detailed explanations and examples for beginners.

Use JSDoc syntax and tags to document functions, improve IDE assistance, and make JavaScript and TypeScript code easier to share and maintain.

Customize Tailwind themes, reusable CSS sets, global styles, and fonts with configuration files and plugins.

The technology stack and libraries used to build this blog, their roles, and why I chose them.

Compare custom API endpoints powered by Prisma with Supabase REST API for fetching data in Next.js, including setup examples and a performance comparison.