After years of continuous evolution, React has built an extremely rich and powerful ecosystem. This article will list the most powerful technology stack combinations for React development in 2024!
Create a project: Vite/Next.js/Astro
- Vite: React application for client rendering .
- Next.js: A React application for server-side rendering .
- Astro: React apps for static generation .
Vite
Vite is a modern JavaScript build tool designed to simplify the front-end development process, achieve fast development experience and Hot Module Replacement function. As an ideal alternative to create-react-app (CRA), Vite's design concept is to not interfere with React at the functional level, allowing developers to focus more on React itself rather than the limitations of the framework.
Vite is mainly optimized for single-page applications and Client rendering. Therefore, for Client-rendered projects, creating a new project using Vite is a more appropriate choice.
Next.js
Next.js is a highly mature React framework and the preferred way to create new React projects recommended by React officials. With its rich built-in features such as file-based routing, Next.js provides strong support for React development.
Next.js uses server-side rendering (SSR) as its main rendering technology. Therefore, for projects with server-side rendering, creating a new project using Next.js is a more appropriate choice.
Astro
Astro is a versatile web framework designed for building fast, content-centric static websites. It provides excellent performance through server-first API design and default zero JavaScript runtime overhead. Its main features are as follows:
- Content-centric : Designed to showcase rich content.
- Server first : render HTML on the server to improve running speed.
- Default Zero JS : Reduce Client resource consumption and speed up loading.
- Customizable : Over 100 integration options including Tailwind, MDX, etc.
- Framework independent : Supports multiple frameworks such as React, Preact, Svelte, etc.
Usage scenarios : Astro is great for building blogs, marketing websites, e-commerce websites, document websites, personal portfolios, landing pages, and community websites, especially those that require fast loading and good SEO optimization.
**Github：**https://github.com/withastro/astro
State Management: Zustand
Zustand is a modern React state management library that aims to simplify state management and provide concise, scalable, and efficient state management solutions. In recent years, Zustand has grown rapidly, and more and more developers choose to use Zustand as their preferred React state management tool
**GitHub：**https://github.com/pmndrs/zustand
Routing: React Router
React Router is a popular JavaScript routing library for building single-page applications (SPAs), and it is also the officially recommended routing library.
**Github：**https://github.com/remix-run/react-router
Built by: Vite
Vite is a lightweight and extremely fast next-generation front-end build tool that provides first-priority support for Vue SFC. It was originally created for Vue 3 projects, but can also be used for other frameworks such as React, Svelte, Preact, etc. Currently, it has been used as the default build tool by multiple front-end frameworks.
Github：https://github.com/vitejs/vite
Debugging: React DevTools
React DevTools is a browser extension for inspecting and analyzing React applications. It allows developers to gain a deep understanding of the structure and state of the React component tree, as well as the interaction between components.
Testing: Vitest/React Testing Library/Cypress
In a React project, the following frameworks are recommended for testing:
- Unit/Integration Testing: Vitest + React Testing Library
- E2E Test (E2E): Cypress
Unit/integration testing
Vitest is a next-generation testing framework based on Vite, designed to provide a fast and efficient unit test experience. It supports a variety of test runners, testing frameworks, and coverage reporting tools, and can provide real-time responsive test feedback for components. It is worth mentioning that Vitest has reached over 5 million downloads per week in just two years.
**Github：**https://github.com/vitest-dev/vitest
React Testing Library is a testing library specifically designed for React, which provides a set of APIs for testing React components. It follows the "user-centric" testing philosophy, focusing on testing component functionality and interaction rather than internal implementation details.
**Github：**https://github.com/testing-library/react-testing-library
The combination of Vitest and React Testing Library can achieve unit testing and integration testing of React components. By using Vitest as a test runner and combining with the testing methods of React Testing Library, an efficient testing process can be built. By automating test execution and result verification, the efficiency and accuracy of testing can be significantly improved.
Unit testing can test individual functions or modules of components, while integration testing can verify the interaction between components and the behavior of the entire application.
E2E Testing
Cypress is an open-source JavaScript testing framework for writing E2E Tests, focusing on providing a simple, easy-to-use, reliable and stable testing environment for testing web applications. In Vue projects, it is recommended for E2E testing, and can also be used for single-file component testing of Vue SFC through the Cypress component test runner.
**Github：**https://github.com/cypress-io/cypress
Static Site Generator: Docusaurus
Docusaurus is a static site generator open-sourced by Facebook, designed to help users quickly build beautiful and easy-to-maintain document sites. It provides a comprehensive set of tools and features that allow users to focus on writing content without spending a lot of time and effort building and designing websites.
**GitHub：**https://github.com/facebook/docusaurus
Framework: Next.js/UmiJS
If you want to do SSR, Next.js is a very good choice, while if you only do CSR, Umi would be a better choice.
- Client rendering : Next.js
- Server-side rendering : UmiJS
Next.js
Next.js is a lightweight framework for building React applications. It provides many enhanced features such as server rendering, static generation, routing, etc., to simplify the development process and improve performance and development experience. The core goal of Next.js is to automatically compile JS code into DOM elements by using React's server-side rendering feature, thereby simplifying the SSR development process and improving application performance.
Currently, Next.js ranks second in download volume among all front-end frameworks, second only to React.
**Github：**https://github.com/vercel/next.js
UmiJS
UmiJS is an extensible enterprise-level React application framework open-sourced by Ant Group. Umi is based on routing and supports both configurable and scheduled routing, ensuring the completeness of routing functions and extending them accordingly. Then, it is equipped with a complete lifecycle plugin system, covering every lifecycle from source code to bundle, supporting various functional extensions and business needs.
Compared to Next.js, Umi has better scalability; and Umi has many more down-to-earth features, such as configurable routing, patch solutions, Antd access, micro frontend, internationalization, permissions, etc.
**Github：**https://github.com/umijs/umi
Type checking: TypeScript/Zod
TypeScript
TypeScript is a superset of JavaScript, adding static type checking and some other language features. TypeScript is a basic standard for modern front-end projects, and the weekly download volume of TypeScript is currently as high as 52 million.
The official React documentation provides a guide to using TypeScript in Vue: https://zh-hans.react.dev/learn/typescript
Zod
Zod is a TypeScript-based pattern validation library that provides a concise API and compile-time type safety for validating input data in JavaScript or TypeScript applications at runtime. It supports pattern inheritance, custom error messages, asynchronous validation, and can be tightly integrated with TypeScript, suitable for various scenarios that require strict data validation.
**Github：**https://github.com/colinhacks/zod
Tool function: ahooks
Ahooks is a React Hooks library developed by the Alibaba team. It provides a series of efficient and easy-to-use hook functions, such as data requests, state management, Performance optimization, etc. It aims to simplify React application development, reduce boilerplate code, and support TypeScript, making it suitable for building complex and efficient front-end applications.
**Github：**https://github.com/alibaba/hooks
Internationalization: react-i18next
React-i18next is an Internationalization (i18n) solution for React applications. Based on the i18next library, it provides a simple and flexible way to implement multilingual support for React and React Native applications.
By providing a useTranslationHook and with TranslationHigher Order Component, react-i18next makes it easy to use translation in React components.
**Github：**https://github.com/i18next/react-i18next
Style: Tailwind CSS/Styled Components/CSS Modules
- CSS-in-CSS：CSS Modules
- CSS-in-JS：Styled Components
- Practical first: Tailwind CSS
CSS Modules
CSS Modules is a CSS file organization technology that avoids style conflicts and improves component maintainability by encapsulating local scopes and automatically naming class names. It is easy to maintain and combine, and is compatible with modern front-end building tools and frameworks, making style management safer and more efficient in large-scale application and component library development.
Styled Components
Styled Components is a CSS-in-JS library for React. It provides a declarative way to write component-level styles by marking template literals. It supports dynamic styles, themes, server-side rendering, and is compatible with TypeScript, making style writing more intuitive, component maintenance easier, and avoiding global style conflicts.
**Github：**https://github.com/styled-components/styled-components
Tailwind CSS
Tailwind CSS is a utility-first CSS framework that provides a series of predefined and highly customizable utility classes, allowing developers to quickly build responsive and consistent User Interfaces without writing traditional CSS.
**Github：**https://github.com/tailwindlabs/tailwindcss
UI component library: Ant Design/shadcn-ui /Ant Design Mobile
- Web: Ant Design, shadcn/ui
- Mobile end: Ant Design Mobile
Ant Design
Ant Design is an enterprise-level UI component library based on React, developed by Ant Financial Experience Technology Department. It provides a series of high-quality React components to help developers quickly build beautiful and easy-to-use interfaces and applications.
**Github：**https://github.com/ant-design/ant-design
**shadcn/ui **
Shadcn/ui is a modern React-based UI component library that provides a rich collection of components to reuse, allowing developers to integrate components into web applications with simple copy and paste operations.
**Github：**https://github.com/shadcn-ui/ui
Ant Design Mobile
Ant Design Mobile is a mobile end UI component library developed by Ant Financial Experience Technology Department, designed specifically for mobile applications. These components follow Ant Design's design language and development patterns, ensuring consistency and User Experience in mobile end applications.
**Github：**https://github.com/ant-design/ant-design-mobile
Desktop App Development: Electron ⚡ Vite
Electron ⚡ Vite is committed to providing the best community practices for combining Electron and Vite! It makes Electron projects based on Vite very simple!
**Github：**https://github.com/electron-vite/electron-vite-react
Inter-App communications application development: Taro/React Native/Expo
Taro
Taro is a cross-platform and multi-terminal unified development framework developed by JD.com Aotu Lab, supporting the use of React/Vue/Nerv and other frameworks to develop WeChat/JD.com/Baidu/Alipay/ByteDance/QQ Mini Program /H5/React Native and other applications.
**Github：**https://github.com/NervJS/taro
React Native
React Native is a cross-platform framework developed by Facebook that allows the use of JavaScript and React technology stacks to build high-performance native mobile applications. It supports writing code once and then compiling it to iOS and Android platforms, providing performance close to native applications and the ability to access device native features.
**Github：**https://github.com/facebook/react-native
Expo
Expo is a React Native-based framework designed for building unified native applications that can run on Android, iOS, and the web. It is based on React Native, but provides more upper-layer encapsulation and extension capabilities, making it easier for developers to build and extend cross-platform applications. Expo is currently React Native officially recommended way to create React Native projects.
**Github：**https://github.com/expo/expo
Data request: Axios/TanStack Query
Axios
Axios is a flexible and Promise-based HTTP Client, widely used for asynchronous HTTP requests in browsers and Node.js environments. It supports request/response interception, data conversion, and request cancellation, simplifying the complexity of front-end data interaction. Axios currently has over 200 million downloads per month and is currently the most used data request tool library.
**Github：**https://github.com/axios/axios
TanStack Query
TanStack Query, also known as React Query, is a data retrieval and state management library for React applications. It simplifies the process of retrieving and managing data from servers through functions such as automatic caching, query resending, and request cancellation, providing an efficient and easy-to-use API for processing asynchronous data.
React Query can be used in conjunction with Axios. React Query itself is a data retrieval and state management library that does not directly execute HTTP requests, but can work with any data retrieval library, including Axios. By passing Axios as a data retrieval function to React Query's useQueryor useMutationHooks, you can use Axios to send HTTP requests, and React Query handles data caching and state updates.
**Github：**https://github.com/tanstack/query
Visualization: ECharts/AntV
ECharts
ECharts is an open-source data lake visualization chart library based on JavaScript, originally developed by the Baidu team and donated to the Apache Foundation in 2018. It provides intuitive, vivid, interactive, and customizable data lake visualization charts, widely used in web development, supporting multiple chart types and rich configuration options.
**Github：**https://github.com/apache/echarts
AntV
AntV is a data lake visualization solution launched by Ant Financial. It includes a series of visualization libraries and tools to help developers and data analysts quickly build high-quality data lake visualization applications. The goal of AntV is to provide a simple, professional, and scalable visualization toolset to meet the data lake visualization needs in different scenarios.
**Github：**https://github.com/antvis
Form: React Hook Form
React Hook Form is a form processing library for React applications. It provides a simple and intuitive API through React Hooks to manage form status, validate, and handle submissions. It is very suitable for scenarios that require rapid development and highly customized forms.
**Github：**https://github.com/react-hook-form/react-hook-form
Code Formatting: ESLint/Prettier
ESLint
ESLint is a JavaScript code inspection tool that helps developers identify issues in their code and ensure code quality. It is based on a plug-in architecture, allowing developers to customize rules and configurations to meet different project requirements.
We recommend using the following ESLint rule set:
- **eslint-plugin-react：**https://www.npmjs.com/package/eslint-plugin-react
- **eslint-plugin-react-hooks：**https://www.npmjs.com/package/eslint-plugin-react-hooks
- **eslint-config-react-app：**https://www.npmjs.com/package/eslint-config-react-app
Prettier
Prettier is a code formatting tool that achieves style consistency by parsing code and reprinting it with its own rules. It supports multiple programming languages including JavaScript, TypeScript, CSS, HTML, and can integrate with most editors.
**Github：**https://github.com/prettier/prettier