React
Lộ trình phát triển toàn diện React theo tiêu chuẩn quốc tế nilbuild/developer-roadmap
Hướng dẫn từng bước từ nền tảng đến chuyên sâu giúp bạn làm chủ React. Tích hợp tài liệu lý thuyết, bài viết thực chiến, video tham khảo và bài tập lập trình trực tiếp trên IDE.
Nền Tảng & Khái Niệm Cốt Lõi
Giai đoạn 1 tập trung hoàn thiện 17 chủ đề then chốt.
Animation
React Animation allows you to change the visual state of elements over time, such as fading, sliding, or scaling them in response to user interaction or state changes. React does not include animation tools by default, so most projects rely on dedicated libraries to handle timing, easing, and transitions smoothly.
API Calls
APIs, short for Application Programming Interfaces, are software-to-software interfaces. Meaning, they allow different applications to talk to each other and exchange information or functionality. This allows businesses to access another business’s data, piece of code, software, or services in order to extend the functionality of their own products — all while saving time and money. There are several options available to make API calls from your React.js applications.
Apollo
Apollo Client is a library for working with GraphQL APIs in React. It handles sending queries and mutations, caching the results, and keeping the UI in sync as data changes. It is one of the most established tools for GraphQL in the React ecosystem, with hooks like useQuery and useMutation built in.
Ark UI
Ark UI is a headless component library that provides the state and accessibility logic for common UI patterns, and works across multiple frameworks, not just React. It gives full control over markup and styling while handling the more complex interaction logic behind the scenes. It shares some underlying tooling with Panda CSS.
Astro
Astro is the web framework for building content-driven websites like blogs, marketing, and e-commerce. Astro is best-known for pioneering a new frontend architecture to reduce JavaScript overhead and complexity compared to other frameworks. If you need a website that loads fast and has great SEO, then Astro is for you.
Axios
Axios is a promise-based HTTP client used to make requests from a React app to a server. It works similarly to the built-in fetch function but adds features like automatic JSON parsing, request and response interceptors, and easier error handling. It remains popular even though modern fetch has closed some of the gap between the two.
Chakra UI
Chakra UI is a component library that provides accessible, ready-to-use React components along with a styling system based on style props. It focuses on accessibility and developer experience out of the box, with sensible defaults for spacing, color, and responsive design. Components can be customized through a theme configuration.
CLI Tools
CLI tools are command line programs that help developers set up, run, and manage a React project without doing everything by hand. They handle tasks like creating a new project structure, starting a development server, or bundling code for production. Most modern React setups rely on a CLI tool instead of manual configuration, since it saves time and avoids mistakes.
Component / Libraries
React component libraries are collections of pre-built, reusable components that can be used to speed up the development process. They can be styled using CSS in various ways, including traditional CSS files, CSS modules, and CSS-in-JS solutions like styled-components.
Component Life Cycle
The component lifecycle describes the different stages a component goes through, from being created and added to the page, to updating, and finally being removed. In function components, lifecycle behavior is handled through hooks like useEffect instead of separate lifecycle methods. Knowing this lifecycle helps developers run code at the right moment, such as fetching data when a component first appears.
Components
Components are the building blocks of a React application. Each one is a piece of code, usually a function, that returns some UI and can be reused across the app. Breaking an interface into components makes the code easier to read, test, and maintain.
Composition vs Inheritance
Composition means building complex components by combining smaller, simpler ones. Instead of relying on inheritance, React encourages passing components as props or nesting them as children to reuse logic and layout. This keeps components flexible and easier to reason about compared to sharing code through class hierarchies.
Conditional Rendering
Conditional rendering means showing different UI depending on a condition, such as whether a user is logged in or a list is empty. In React, this is often done with plain JavaScript, using if statements, ternary operators, or logical AND. There is no special syntax for it since JSX already works with normal JavaScript expressions.
Context
Context is a built-in React feature that lets you share data across the component tree without passing it through props at every level. You create a context, provide a value at some point in the tree, and any component below can read that value with useContext. It works well for data that does not change often, like theme or authentication status, but is not designed to replace a full state management library for frequently changing data.
Writing Custom Hooks
A custom hook is a function you write yourself that starts with "use" and calls other hooks inside it. It lets you extract reusable logic, such as fetching data or tracking window size, out of a component and share it across multiple components. Custom hooks follow the same rules as built-in hooks, since they are really just regular functions built on top of them.
CSS Modules
CSS Modules let you write regular CSS files where class names are automatically scoped to the component that imports them. This avoids the common problem of class name collisions across a large codebase. You import the styles as an object in your component file and apply them like normal JavaScript variables.
Cypress
Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework.
Kỹ Năng Trọng Tâm & Thực Hành
Giai đoạn 2 tập trung hoàn thiện 17 chủ đề then chốt.
Error Boundaries
An error boundary is a component that catches JavaScript errors thrown by its child components during rendering, preventing the whole app from crashing. Instead of showing a broken UI, it can display a fallback message. Error boundaries only catch errors in the component tree below them, not in event handlers or asynchronous code.
Events
React wraps native browser events in its own system called synthetic events, so they behave consistently across different browsers. You attach event handlers directly in JSX, such as onClick or onChange, and they receive an event object similar to the native one. This lets components respond to user interaction like clicks, typing, or form submissions.
Formik
Formik is a library for building forms in React, handling values, validation, and submission through a consistent API. It uses controlled inputs, meaning form state is tracked in React state as the user types. It was one of the most popular form libraries before performance-focused alternatives like React Hook Form gained traction.
Formish
Formish is a lightweight library designed to simplify the process of handling forms in web applications by managing state, validation, and submission logic with minimal boilerplate. It provides a set of hooks and components that allow you to track user input, display error messages, and handle form resets efficiently.
Forms
Forms in React need extra handling compared to plain HTML, since input values are usually tied to component state to keep the UI in sync with user input. This includes tracking values, validating input, and showing error messages. Libraries exist to simplify this instead of writing all the state and validation logic by hand.
Framer Motion
Framer Motion is an animation library for React that lets you animate components with simple props, such as defining an initial state, an animate state, and a transition. It supports gestures, layout animations, and page transitions, and integrates naturally with React's component model.
SSR Frameworks
A framework built on top of React adds extra structure and features, such as routing, server-side rendering, or file-based page organization, that React itself does not provide. Choosing a framework can save time on setup and give a project a more opinionated, consistent structure from the start.
Functional Components
Functional components are some of the more common components that will come across while working in React. These are simply JavaScript functions. We can create a functional component to React by writing a JavaScript function. These functions may or may not receive data as parameters. In the functional Components, the return value is the JSX code to render to the DOM tree. Functional components can also have state which is managed using React hooks.
GSock
`GSAP` (GreenSock Animation Platform) is a framework-agnostic JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in every major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...anything JavaScript can touch!
Headless Component Libraries
Headless component libraries have some powerful state, logic and data management tools that do not enforce any UI structure. Consequently, developers are able to build custom UI components with unique styles but that still benefit from strong reusable logics. This kind of library simplifies complex behaviors and accessibility issues in outdoor environments allowing you to create innovative interfaces. With headless components, developers keep code clean and maintainable as a result of the reusability aspect inherent in these, this also guarantees efficient and accessible components enhancing application quality.
Headless Component Libraries
Headless component libraries provide the logic and accessibility behavior of UI components, like managing open and closed states or keyboard navigation, without any built-in styling. Developers apply their own CSS or design system on top. This gives more design flexibility compared to libraries that ship with fixed visual styles.
High Order Components
A higher order component, often shortened to HOC, is a function that takes a component and returns a new component with extra behavior or props added. It is a pattern for reusing logic across multiple components, such as handling authentication checks or loading states. Hooks have replaced many use cases for HOCs, but the pattern still shows up in some libraries.
Hooks Best Practices
To fully leverage the capabilities of React Hooks, it is crucial to adopt best practices that not only enhance code readability but also optimize performance. By adhering to these practices, developers can create cleaner, more maintainable components that make the most of React's powerful features, leading to a more efficient and enjoyable development experience.
Hooks
Hooks are functions that let you use React features like state and lifecycle behavior inside function components. They were introduced to avoid the need for class components when handling things like data fetching or subscriptions. Every hook name starts with "use", such as useState or useEffect, and they must be called in the same order on every render.
Jest
Jest is a JavaScript testing framework commonly used for unit and integration tests in React projects. It includes a test runner, assertion library, and mocking tools all in one package, so there is little extra setup needed. It has been a default choice for React testing for many years.
Jotai
Jotai is a state management library built around small, independent units of state called atoms. Instead of one large central store, you create atoms as needed and combine them however you like. It fits well with React's component model, since components only subscribe to the atoms they actually use.
JSX
JSX is a syntax extension for JavaScript that lets you write HTML-like code inside your JavaScript files. React uses it to describe what the UI should look like, and it gets compiled into regular JavaScript function calls behind the scenes. Writing markup and logic in the same file makes components easier to understand at a glance.
Kiến Trúc Nâng Cao & Tối Ưu
Giai đoạn 3 tập trung hoàn thiện 17 chủ đề then chốt.
Lists and Keys
Rendering a list in React usually means mapping over an array of data and returning a component for each item. React needs a unique key for each item in the list so it can track which elements changed, were added, or were removed. Without proper keys, React may re-render list items incorrectly or lose track of their state.
Material UI
Material UI, often called MUI, is a component library that implements Google's Material Design guidelines in React. It provides a wide range of components, from buttons to complex data tables, with built-in theming support. It is one of the older and more widely adopted component libraries in the React ecosystem.
Mobile Applications
React can be extended beyond the web to build mobile applications, reusing similar concepts like components, props, and state. This lets developers apply React knowledge to build apps that run on iOS and Android, instead of learning a completely separate native development stack.
MobX
MobX is a state management library based on observable data, where changes to state automatically trigger updates in any component using that data. It relies on decorators or plain functions to mark state as observable, and React components re-render only when the specific data they use changes. It takes a more reactive, less explicit approach compared to libraries like Redux.
Next.js
Next.js is a React framework that adds features like server-side rendering, static site generation, and file-based routing on top of React. It handles a lot of the setup that would otherwise need to be configured manually, and it is widely used for production applications that need good performance and SEO.
Panda CSS
Panda CSS is a CSS-in-JS tool that generates static CSS at build time instead of at runtime. You write styles using a type-safe API in your components, and Panda extracts and compiles them into optimized CSS files. This gives some of the developer experience of CSS-in-JS without the runtime performance cost.
Playwright
Playwright is an end-to-end testing tool built by Microsoft that can run tests across multiple browsers, including Chromium, Firefox, and WebKit. It supports features like automatic waiting for elements and parallel test execution, which helps keep test suites fast and reliable as they grow.
Portals
A portal lets you render a component's children into a different part of the DOM, outside its parent's normal hierarchy. This is useful for things like modals or tooltips that need to visually sit above other content, even though logically they still belong to their original component in React's tree.
Props vs State
Props (short for “properties”) and state are both plain JavaScript objects. While both hold information that influences the output of component render, they are different in one important way: props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function).
Radix UI
Radix UI is an open-source library designed to make it easier to create accessible and customizable User Interface (UI) components in React. It provides developers with a range of `unstyled`, fully `accessible` primitives, giving them complete control over the appearance and behavior of their UI elements.
React Aria
React Aria is style-free out of the box, allowing you to build custom designs to fit your application or design system using any styling and animation solution. Each component is broken down into individual parts with built-in states, render props, and slots that make styling a breeze.
React hook form
React Hook Form is a library for managing form state and validation in React with minimal re-renders. It uses uncontrolled inputs by default, registering fields through refs instead of updating state on every keystroke, which improves performance for large forms. It integrates with validation libraries like Zod or Yup.
React Native
React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities.
react-router
As a framework, react-router extends beyond simple client-side navigation to include features like data loading, actions, and nested layouts, similar to what full frameworks like Next.js offer. It grew out of the original React Router library into a more complete solution for building routed applications.
React Router
React Router is a standard library for routing in React applications. It enables navigation between different views or components within a single-page application (SPA) without requiring the browser to reload the page. It provides a declarative way to define routes and map them to specific components, allowing users to seamlessly navigate through different parts of the application.
react spring
React Spring is a popular animation library for React that leverages the principles of spring physics to create smooth, natural-looking animations. Unlike traditional animation libraries that rely on keyframes and linear transitions, React Spring uses spring-based physics to produce fluid and realistic animations that can dynamically respond to user interactions and state changes.
React Testing Library
The React Testing Library is a very lightweight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. Its primary guiding principle is: The more your tests resemble the way your software is used, the more confidence they can give you.
Hệ Sinh Thái & Triển Khai Thực Tế
Giai đoạn 4 tập trung hoàn thiện 17 chủ đề then chốt.
Refs
A render prop is a pattern where a component takes a function as a prop and calls it to decide what to render. This allows the component to share logic with whatever gets rendered, without dictating the exact UI. It was common before hooks existed, and hooks now cover many of the same use cases in a simpler way.
Relay
Relay is a JavaScript client used in the browser to fetch GraphQL data. It's a JavaScript framework developed by Facebook for managing and fetching data in React applications. It is built with scalability in mind in order to power complex applications like Facebook. The ultimate goal of GraphQL and Relay is to deliver instant UI-response interactions.
Render Props
A render prop is a pattern where a component takes a function as a prop and calls it to decide what to render. This allows the component to share logic with whatever gets rendered, without dictating the exact UI. It was common before hooks existed, and hooks now cover many of the same use cases in a simpler way.
Rendering
Rendering is the process where React takes your component code and turns it into actual elements on the screen. React decides when to re-render a component based on changes to its state or props. Understanding how rendering works helps explain why an app updates the way it does, and where performance issues can come from.
Routing
A router in React handles navigation between different views or pages without reloading the whole browser page. It matches the current URL to a specific component and renders it, giving the app the feel of multiple pages while staying a single-page application. Several libraries exist to add this functionality, since React itself does not include routing.
rtk-query
[RTK Query](https://redux-toolkit.js.org/rtk-query/overview) is a data fetching and caching tool that is included in the Redux Toolkit package. It is designed to simplify common use cases for fetching data, including caching, polling, and invalidation.
Server APIs
The react-dom/server APIs let you render React components to HTML on the server. These APIs are only used on the server at the top level of your app to generate the initial HTML. A [framework](https://react.dev/learn/start-a-new-react-project#production-grade-react-frameworks) may call them for you. Most of your components don’t need to import or use them.
Shadcn UI
Shadcn is an open-source framework providing pre-built, accessible, and customizable UI components for rapid web application development. It offers a streamlined approach to construct modern user interfaces.
State Management
Application state management is the process of maintaining knowledge of an application's inputs across multiple related data flows that form a complete business transaction -- or a session -- to understand the condition of the app at any given moment. In computer science, an input is information put into the program by the user and state refers to the condition of an application according to its stored inputs -- saved as variables or constants. State can also be described as the collection of preserved information that forms a complete session.
Suspense
Suspense is a React feature that lets a component "wait" for something, such as data or code, before rendering, showing a fallback UI in the meantime. It was originally built for code splitting with lazy loading, and has since been extended to support data fetching in some frameworks and libraries.
SWR
SWR is a data fetching library for React whose name comes from "stale-while-revalidate", a caching strategy where old data is shown immediately while fresh data loads in the background. It handles caching, revalidation, and re-fetching on focus or network reconnect with minimal setup. It was built by the team behind Next.js.
Tailwind CSS
Tailwind CSS is a utility-first CSS framework where you style elements by combining small, single-purpose classes directly in your markup. Instead of writing custom CSS files, you apply classes like flex, p-4, or text-center straight in the JSX. It speeds up styling and keeps design consistent, though it can make markup more verbose.
TanStack Query
TanStack Query, previously known as React Query, is a powerful library for fetching, caching, synchronizing, and updating server state in your React applications. It simplifies the process of handling asynchronous data, reducing boilerplate code and improving the user experience by providing features like automatic retries, background updates, and optimistic updates. It essentially helps you manage data fetching and caching in a declarative and efficient way.
TanStack Router
Tanstack Router is a routing library built with type safety in mind, generating types based on your route definitions. It supports features like nested routes, loaders for fetching data before a page renders, and search parameter validation. It is part of the same family of tools as Tanstack Query.
Testing
A key to building software that meets requirements without defects is testing. Software testing helps developers know they are building the right software. When tests are run as part of the development process (often with continuous integration tools), they build confidence and prevent regressions in the code.
Types & Validation
Types and validation in a React app help catch mistakes early and make sure data matches the expected shape, whether it comes from user input, an API, or props. Static typing checks this at compile time, while validation libraries check it at runtime, and the two are often used together.
TypeScript
TypeScript is a superset of JavaScript that adds static typing, letting you catch type-related errors before running the code. In React, it is used to type props, state, and function signatures, which helps catch mistakes like passing the wrong data to a component. Most modern React projects use TypeScript instead of plain JavaScript.
Chuyên Gia & Mở Rộng Hệ Thống
Giai đoạn 5 tập trung hoàn thiện 15 chủ đề then chốt.
urql
urql is a lightweight GraphQL client for React, built to be simpler and smaller than alternatives like Apollo or Relay. It supports caching, and its behavior can be extended through a system of exchanges, which are similar to middleware. It suits projects that want GraphQL support without a heavy setup.
useCallback
`useCallback` is a React hook that returns a memoized version of a callback function. It's used to optimize performance by preventing unnecessary re-renders. Specifically, it helps avoid recreating functions when their dependencies haven't changed, which can be useful when passing callbacks to child components that rely on referential equality to prevent re-rendering.
useContext
The `useContext` Hook lets us share data between components without having to pass props down through every level of the component tree. This is particularly useful when many components need to access the same data or when components are deeply nested.
useEffect Hook
`useEffect` is a special hook that lets you run side effects in React. It is similar to componentDidMount and componentDidUpdate, but it only runs when the component (or some of its props) changes and during the initial mount.
useMemo
`useMemo` is a React hook that memoizes the result of a function. It is used to optimize performance by caching the result of a function and returning the cached result when the inputs to the function have not changed.
useReducer
`useReducer`: An alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.)
useRef
`useRef` is a React hook that provides a way to create a mutable reference that persists across component re-renders. It stores a value that doesn't cause re-renders when it changes.
useState Hook
`useState` is a React Hook that lets you add state to functional components. When you call `useState`, you get back the current state value and a function to update it, allowing components to store and manage data that persists between renders.
useState
`useState` is a React Hook that adds state to function components. It returns an array with the current state value and a setter function; calling the setter with a new value schedules a re-render, and you can pass a function to compute the new state from the previous one.
Valibot
Valibot is a modular and type-safe schema validation library designed to be extremely lightweight and fast. It allows you to define schemas for your data and automatically infer TypeScript types from them, ensuring that the inputs your application receives match the expected structure. It provides a simple way to validate form data, API responses, or configuration objects without the overhead of larger validation alternatives.
Vite
Vite is a build tool that starts a development server almost instantly and updates the browser as soon as you save a file. It uses native ES modules during development instead of bundling everything upfront, which makes it much faster than older tools. Many React projects use Vite to scaffold a new app and handle the build process for production.
Vitest
Vitest is a testing framework built to work closely with Vite, sharing its configuration and fast startup time. It is designed as a drop-in alternative to Jest, with a similar API but faster execution, especially in projects already using Vite for their build setup.
Styling
While "CSS in JS" is the most predominant way of styling modern frontend applications, there are several different ways to style your React applications whether it is vanilla CSS, [CSS Modules](https://github.com/css-modules/css-modules), or [CSS in JS](https://css-tricks.com/a-thorough-analysis-of-css-in-js/) etc and each has several frameworks available.
Zod
Zod is a schema validation library for TypeScript that lets you define the shape of your data and validate it at runtime, while also inferring TypeScript types from that same schema. It is commonly used to validate form input or API responses, so the same source of truth defines both validation and types.
Zustand
Zustand is a small state management library that uses a single store defined with a simple function, without requiring reducers or actions like Redux. Components can read and update the store directly through a hook, with minimal boilerplate. Its simplicity and small bundle size make it a common choice for apps that outgrow plain Context.