Skip to content

ilcherry/React-Ecosystem

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 

Repository files navigation

CSR React

  • React - 全球用户量最多的前端开发框架,构建用户交互页面

SSR React

  • Next.js - Vercel出品的 React SSR 框架,支持全栈开发
  • Remix - 流行的SSR框架,支持全栈开发

SSG React

  • docz - Documenting code is one of the most important and time-heavy processes when developing software.
  • Storybook - 当前最流行的UI 组件开发环境
  • Gatsby - 大名鼎鼎的静态站点生成器
  • Rspress - 基于 Rsbuild 的静态站点生成器

Compiler

  • SWC - an extensible Rust-based platform for the next generation of fast developer tools
  • Babel - 老牌的 JavaScript 编译器
  • esBuild - 基于 golang 的编译和构建工具

Bundler

  • Vite - 卓越的 Web 开发构建工具
  • Webpack - webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具
  • Rspack - The fast Rust-based web bundler
  • Parcel - 极速零配置Web应用打包工具
  • Rollup - Rollup 是一个用于 JavaScript 的模块打包工具,它将小的代码片段编译成更大、更复杂的代码,例如库或应用程序
  • esBuild - An extremely fast bundler for the web

React Router

  • React Router - A user‑obsessed, standards‑focused, multi‑strategy router you can deploy anywhere.
  • TanStack Router - Modern and scalable routing for React and Solid applications
  • Reach Router - 一个更轻量、简洁的 React 路由库
  • Wouter - 一个轻量级的 React 路由库,强调快速和小巧
  • React Location - 一个相对较新的路由库,它提供了更丰富的功能,如支持异步加载、路由元数据、嵌套路由等
  • Routify - 一个简单且快速的路由库,适合用于 Svelte 和 React 等框架
  • Page.js - 一个轻量级的客户端路由库

State Management

  • Zustand - Bear necessities for state management in React
  • Recoil - React 状态管理库
  • Redux - JS 应用的状态容器,提供可预测的状态管理
  • Redux-Saga - An intuitive Redux side effect manager.Easy to manage, easy to test, and executes efficiently.
  • Hox - 在 React 组件间共享状态
  • Jotai - Jotai takes an atomic approach to global React state management
  • MobX - 简单、可扩展的状态管理

Hooks Utils

  • ahooks - 一套高质量可靠的 React Hooks 库
  • useHooks - A collection of modern, server-safe React hooks – from the ui.dev team
  • react-use - 必不可少的 React Hooks集合

UI Components

  • Ant Design - 一套企业级 UI 设计语言和 React 组件库
  • MUI - 一套基于 Google Material Design 的 UI 组件,非常受欢迎,功能丰富,支持自定义主题
  • Chakra UI - Chakra UI is a component system for building products with speed
  • TDesign - TDesign 适配桌面端的组件库,适合在 React 技术栈项目中使用。
  • fluentui - Microsoft's Fluent UI
  • shadcn-ui - Beautifully designed components built using Radix UI and Tailwind CSS
  • React-Bootstrap - Bootstrap components built with React
  • Arco Design - 字节跳动开源的 React 组件库

Animate

  • motion - A modern animation library for React and JavaScript
  • react-spring - A spring physics based React animation library
  • auto-animate - A zero-config, drop-in animation utility that adds smooth transitions to your web app
  • anime.js - 一个轻量级且强大的动画库,支持 CSS、SVG、JavaScript 对象等的动画
  • Lottie - 由 Airbnb 开发的动画库,专门用于展示 JSON 格式的动画
  • Velocity.js - 高效的 JavaScript 动画库
  • PixiJS - 一个 2D 渲染引擎,基于 WebGL 构建
  • Mo.js - 一个强大的、灵活的动画库,能够创建复杂的形状和图形动画。它支持路径动画、粒子动画、形状动画等,适合需要创造独特视觉效果的项目
  • Vivus - 一个用于 SVG 动画的轻量级库,可以让开发者将 SVG 图形的路径动画化,呈现类似手绘效果的动画

HTTP Request

  • axios - Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中
  • SWR - 用于数据请求的 React Hooks 库
  • React Query - Powerful asynchronous state management for TS/JS, React, Solid, Vue, Svelte and Angular
  • Alova.js - 下一代请求工具
  • dataloader - DataLoader is a generic utility to be used as part of your application's data fetching layer to provide a consistent API over various backends and reduce requests to those backends via batching and caching.

WebSocket

  • Socket.IO - Bidirectional and low-latency communication for every platform

Server-sent events

  • eventsource - EventSource client for Node.js, browsers and other JavaScript runtimes

GraphQL

  • GraphQL Request - Minimal GraphQL client supporting Node and browsers for scripts or simple apps
  • Apollo Client - A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
  • AWS Amplify - A declarative JavaScript library for application development using cloud services
  • Relay - Relay is a JavaScript framework for building data-driven React applications.
  • urql - The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
  • graphql-hooks - Minimal hooks-first GraphQL client
  • graphqurl - curl for GraphQL with autocomplete, subscriptions and GraphiQL. Also a dead-simple universal javascript GraphQL client.

CSS

  • clsx - A tiny (239B) utility for constructing className strings conditionally.
  • classnames - A simple javascript utility for conditionally joining classNames together
  • React-JSS - A lib for generating CSS from JavaScript.
  • styled-components - Styling your way with speed, strong typing, and flexibility.
  • UnoCSS - Instant On-demand Atomic CSS Engine
  • Tailwind CSS - Tailwind CSS是一个开放源代码CSS框架

Form

  • React Hook Form - Performant, flexible and extensible forms with easy-to-use validation
  • Formik - Build forms in React, without the tears
  • XRender - 后台「表单/表格/图表」开箱即用解决方案

Table

  • Tanstack-Table - Headless UI for building powerful tables & datagrids

Modal

Drag&Drop

Date

  • Day.js - Moment.js 的 2kB 轻量化方案,拥有同样强大的 API
  • Moment.js - 在 JavaScript 中解析、校验、操作、显示日期和时间
  • date-fns - Modern JavaScript date utility library
  • timeago-react - A simple and efficient component to format date with *** time ago statement.

Math

  • mathjs - An extensive math library for JavaScript and Node.js

i18n

Charts

  • Apache ECharts - 一个基于 JavaScript 的开源可视化图表库
  • Chart.js - Simple yet flexible JavaScript charting library for the modern web
  • Recharts - A composable charting library built on React components
  • D3 - Create custom dynamic visualizations with unparalleled flexibility
  • Ant Design Charts - 简单好用的 React 图表库
  • ApexCharts - Modern & Interactive Open-source Charts
  • React Charts - Beautiful, flexible, highly-performant charts for React
  • react-chartjs-2 - React components for Chart.js, the most popular charting library.
  • BizCharts - BizCharts是阿里通用图表组件库,致力于打造企业中后台高效、专业、便捷的数据可视化解决方案
  • visx - a collection of expressive, low-level visualization primitives for React
  • G2Plot React - G2Plot React is a chart component set powered by G2Plot and developed for React.
  • React-Vis - a React visualization library
  • nivo - nivo provides a rich set of dataviz components, built on top of D3 and React
  • VictoryChart - Intuitive React components for advanced charting and data visualization.

Typed Safe

  • Zod - 一个TypeScript 优先的模式声明和验证库
  • io-ts - Runtime type system for IO decoding/encoding
  • Yup - Dead simple Object schema validation

JS Utils

  • Lodash - A modern JavaScript utility library delivering modularity, performance & extras.
  • Underscore.js - a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects
  • Ramda - 优秀的函数式JS工具库
  • Radash - 一个零依赖、模块化、高性能的 JS/TS 实用工具库

Log

  • tslog - Powerful, fast and expressive logging for TypeScript and JavaScript
  • Winston - A logger for just about everything.

Phone Number Valiadate

UUID

  • nanoid - 生成更紧凑的 URL 友好 ID(非标准 UUID)
  • uuid - 支持 RFC4122 标准的 UUID v1/v3/v4/v5
  • @uuidjs/uuid - 专为现代前端优化的 UUID 库
  • shortid - 用于生成简短、唯一、URL 友好的 ID 的 JavaScript 库

Lint

  • Prettier - an opinionated code formatter
  • ESLint - 一个可配置的JavaScript 检查器
  • Stylelint - A mighty CSS linter that helps you avoid errors and enforce conventions
  • commitlint - Lint commit messages
  • CSpell - a spell checker for code.
  • EditorConfig - 帮助多个开发人员在不同的编辑器和 IDE 上维护同一个项目的一致编码风格

Unit Test

  • Jest - Jest 是一款优雅、简洁的 JavaScript 测试框架
  • Vitest - A Vite-native testing framework. It's fast!
  • jsdom - 许多Web 标准的纯JavaScript 实现
  • happy-dom - jsdom 的替代品
  • React Testing Library - 一个非常轻量级的解决方案,用于测试React组件

集成测试

  • Cypress - 基于JavaScript的前端端到端测试框架

End to End

  • Playwright - Playwright enables reliable end-to-end testing for modern web apps
  • Cypress - 基于JavaScript的前端端到端测试框架

Visual Regression Testing

  • Playwright - Playwright enables reliable end-to-end testing for modern web apps
  • jest-image-snapshot - Jest matcher for image comparisons. Most commonly used for visual regression testing.
  • Puppeteer - Puppeteer 是一个Node library,提供了一套完整的通过DevTools 协议操纵Chrome 或Chromium 的API
  • BackstopJS - Catch CSS curve balls.
  • Screener

Mock Server

  • json-server - Get a full fake REST API with zero coding in less than 30 seconds (seriously)
  • Mock.js - 生成随机数据,拦截 Ajax 请求
  • Faker - 生成大量虚假(但真实)的数据用于测试和开发

CI

  • GitHub CI - GitHub 官方的CI服务
  • Gitlab CI - Gitlab 官方的CI服务
  • TeamCity - 面向现代 DevOps 团队的强大 CI/CD 解决方案
  • [Jenkins]
  • [Travis CI]
  • CircleCI - Continuous Integration and Delivery
  • [Azure Pipelines]
  • Bitbucket Pipelines
  • Bamboo - 一个持续交付渠道,可为任意规模的团队提供弹性、可靠性和可扩展性
  • Drone CI - a self-service Continuous Integration platform for busy development teams

CD

  • Github Pages - GitHub提供的免费的静态网页托管服务
  • GitLab Pages - GitLab提供的免费的静态网页托管服务
  • Gitee Pages - 免费的静态网页托管服务

代码托管

  • Vercel - developers the frameworks, workflows, and infrastructure to build a faster, more personalized web
  • Netlify - 支持构建、部署和扩展网站
  • Surge - 一个简单易用的静态网站托管服务,适用于前端开发者
  • Firebase Hosting - Google 提供,支持快速部署前端应用,适合静态网站和单页应用(SPA)

Web Container

APM

  • New Relic - 很强大的服务器性能监控工具
  • Sentry - 一个开源的实时错误追踪系统,可以帮助开发者实时监控并修复异常问题
  • Dynatrace - 用于监控、分析和优化全球企业和政府机构的应用程序性能、软件开发和安全实践

About

React 生态系统

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published