在github上编辑这篇文章
辅助工具#
React is a small library that does one thing well. Here's a list of tools we've found that work really well with React when building applications.
If you want your project on this list, or think one of these projects should be removed, feel free to edit this page.
Debugging#
- React Storybook: Develop and design React UI components without an app.
- Atellier: The smartest way to share interactive components with your team.
- React Inspector: Power of Browser DevTools inspectors right inside your React app
- React Developer Tools: an extension available for Chrome and Firefox that allows you to inspect the React component hierarchy in the Chrome Developer Tools.
- Pretty Diff: a beautifier that supports JSX and can auto-detect it apart from JavaScript. It provides some minimal level of scope analysis by generating a colorful HTML result to identify variables against the scope where they are declared.
JSX Integrations#
Editor Integration#
Build Tools#
Basic Starter Kits (client-side only)#
- React CDK - Component Development Kit for React
- React Static Boilerplate: Static site generator based on React.js, Gulp/Webpack, React Hot Loader, Babel, postCSS/cssnext. Best suited for deploying React.js site to GitHub Pages or Amazon S3.
- React, TypeScript, JSPM starter-kit: Unopinionated starter kit to build modular web apps with React & TypeScript powered by JSPM/SystemJS 0.17.X (ES2016, hot-reload, browser-sync, bundle for prod scripts)
- Subschema - Subschema is a Dependency Injection Library for React, included is a project starter, with webpack, karma and babel.
Full-stack Starter Kits#
- starter-react-flux A generator for React and Flux project with Flux-Utils, Jest, Immutable.js, React Addons, Webpack, ESLint, Babel and ES2015.
- react-slingshot: React + Redux starter kit with Babel, hot reloading, testing, linting and a working example app.
- react-async-starter: React + Redux + Fetch + ES7 Async with Webpack, Babel and hot reloading.
- spa-starter-kit: Full stack Docker node.js container with React, webpack, babel, sass, ESLint, React Hot Loader, Redux for a single-page application.
- react-flux-starter-kit: React, Flux, React Router with Browserify, Bootstrap, and ESLint, all wired up via Gulp. Includes link to associated course.
- exnext-quickstart: Compilation, testing, code validation (ESLint) and hot reloading
- react-component-template: Base for npm-publisheable standalone React Components with tests, ES6 coverage
- Base: An open-source, security focused, web application starter kit.
Built with ReactJS, Flux, Express, and Postgres.
- Este: Dev stack and starter kit for functional and universal (browser, server, mobile) React applications. Everything you need to start is included.
- essential-react: A minimal skeleton for building testable React apps using ES6
- jspm-react: Lightweight boilerplate on JSPM/Systemjs with hot-reloading modules for the browser
- react-flux-coffeescript-browserify-gulp-demo: React, Flux, Coffeescript, Browserify, Watchify, Gulp
- react-reflux-boilerplate-with-webpack: React Reflux Workflow Boilerplate -- React, Reflux, Gulp, Webpack, Stylus and CoffeeScript.
- React-Phonegap App: Phonegap App built with react using Flux.
- Kriasoft React Starter Kit: Gulp, Webpack, BrowserSync + React Starter Kit for Visual Studio
- react-express-template: Web app starter template with React, React Router, ES6 (via Babel), CoffeeScript, Express/Node.js, Semantic-UI, Gulp, LiveReload, and more
- generator-react-webpack: Yeoman generator for React and Webpack.
- generator-react-express: Yeoman generator for React and Express with browserify, react-router and bootstrap.
- generator-react-component: Yeoman generator React Component projects with Gulp, Browserify, Live Reload and publishing to GitHub Pages.
- Racket: Yeoman generator for creating a universal React Redux web application.
- Genesis Skeleton: Modern, opinionated, full-stack starter kit for rapid, streamlined application development (supports React).
- react-starter-template: Starter template with Gulp, Webpack and Bootstrap.
- react-brunch: Brunch plugin.
- react-browserify-template: Quick-start with Browserify.
- react-router-bootstrap-seed: Starter template with react-router, react-bootstrap and react-bootstrap-router (build with Gulp).
- React Phonegap Starter:
Gulp, NPM, Browserify, React, Phonegap, Less, Recess, Underscore, JQuery...
- generator-react-gulp-browserify Yeoman generator for React, Gulp, Browserify and Twitter Bootstrap Sass official.
- generator-react-boilerplate Yeoman generator for React, Gulp, Browserify, Bootstrap and Fluxxor.
- react-starterify: React JS application skeleton using Browserify and other awesome tools
- fluxury: A React/Flux starter kit with NPM (build tool), Browserify, ImmutableJS, JSXHint and React-Router completely written in ES6 (Babelify transform).
- react-app-boilerplate: Browserify workflow with automatic JSX transformation, dependency handling for fast builds and jasmine test environment.
- nuts: A fully-featured starter kit that uses webpack, react, flux, backbone, mongo, and kue. Includes server-side and client-side rendering.
- generator-rc: A scaffold to develop react component quickly.
- MimosaReactBackbone: A TodoMVC React/Backbone app w/ Mimosa for tooling.
- TodoMVC - NestedReact: TodoMVC React app built with NestedTypes and NestedReact.
- react-boilerplate: It is a basic React project boilerplate, it uses JSX, React Router, Browserify, Reactify (ES6) and SASS.
- koa-react-full-example Boilerplate of a Koa React integration. Also shows a way to integrate koa-passport, react-router and react-bootstrap and a few other common modules. Includes an authentication flow.
- generator-simple-react-browserify Really simple React + Browserify app generator for yeoman. Start here if you're trying to actually learn something.
- react-starterkit-with-reflux It's a fork of react-starterkit with React, Reflux, ES6 with Babel,Fontawesome,SASS, Bootstrap SASS(not react-bootstrap), and Browserify.
- react-jspm Boilerplate for developing React with jspm and SystemJS module loader.
- sails-generator-reactjs A SailsJS generator for bootstrapping a modern web stack app using ReactJS, Bootstrap 3, Mocha/ESLint as the testing framework, minification/unification, less, Babel and Browserify.
- electron-react-boilerplate A React + Flux Electron application boilerplate based on React, Flux, React Router, Webpack, React Hot Loader
- Coils: React/SQL full stack realtime framework in Clojure
- isomorphic-flux-react-react-router: A clean, unbloated starter template without any unnecessary complexity for isomorphic web apps using React, Flux, react-router. Uses gulp and webpack for builds, jest for testing and SASS for CSS preprocessing.
- generator-sui-react: A Yeoman generator for Schibsted User Interface (sui) ReactJS components. The generator provides a basic structure to start developing a component, including coding standard rules, naming conventions and a unit testing suite.
- Universal-routed-flux-demo Example app to get started building universal flux applications, with Reactjs, React Router and es6.
- react-starter React starter project with ES2015, Browserify, Babel, mobservable.
- react-flux-flow-webpack-jest-es6 A complete React, Flux, Flow, Webpack, Jest and ES6 starter kit.
- react-boilerplate Quick setup for performance orientated, offline-first React.js applications featuring Redux, hot-reloading, PostCSS, react-router, ServiceWorker, AppCache, FontFaceObserver and Mocha.
- vortigern A universal boilerplate for building web applications w/ TypeScript, React, Redux and more.
Routing#
Model Management#
- immutable-di: Cursor-like state management with power of Dependency Injection.
- react.backbone: A suite of Backbone-related mixins for ReactJS to provide seamless integration.
- backbone-react-component: Use multiple Backbone models and collections with React components both on the client and server sides.
- NestedReact: React application architecture with fast OO models in the data layer. Support for unidirectional data flow and "pure render", interoperability with Backbone Views.
- flux-stores: Models and Collections for data storage. Inspired by Backbone Models and Collections.
- cortex: A JavaScript library for centrally managing data with React.
- caplet: A client/server-side model library.
- ReactFlux: A library for implementing Flux data flow + Code Generation.
- avers: A modern client-side model abstraction library.
- astarisx: Highly Composable MVVM Framework for React with built-in pushState router.
- Fluxxor: Fluxxor is a set of tools to facilitate building JavaScript data layers using the Flux architecture by reifying many of the core Flux concepts.
- Ancient Oak: Immutable data structures library in plain JavaScript.
- Baobab: Persistent data tree supporting cursors.
- mori: Immutable data structures from Clojure ported to JavaScript.
- Immutable: Immutable data structures designed to be more JavaScript-y than Mori
- Morearty.js: Features similar to Om but for plain ol' Javascript. Built on Immutable.
- FFlux: Flux-based architecture library with immutable data support
- Reflux: An event-based implementation of the Flux architecture that integrates with React components.
- Marty: A JavaScript library for state management in React applications (Implementing Flux)
- DeLorean: A completely agnostic JavaScript framework to apply Flux concepts into your interfaces easily.
- McFly: A lightweight Flux library that adds factories for Stores & Actions.
- Fluxy: An implementation of Facebook's Flux architecture.
- NuclearJS: Immutable, reactive Flux architecture. UI Agnostic.
- Alt: Pure vanilla flux made isomorphic and without the boilerplate.
- reactX:
ReactX
provides PropertyBinder
also make it easier to bind store
/state source
to component. Besides ReactX
also add immutable state, PureRender Component, React-Router integration, MixIn(with good parts only) to React in ES6 syntax.
- RR: RR - Reactive React. A super tiny but purely reactive implementation of Flux architecture. React-Native Supported.
- js-data: A framework-agnostic frontend datastore, that will also fetch your data
Data Fetching#
- superagent: A lightweight "isomorphic" library for AJAX requests.
- reqwest: AJAX all over again. Includes support for xmlHttpRequest, JSONP, CORS, and CommonJS Promises A. Browser support stretches back to IE6.
- react-ajax: Ajax Request Component for React.
- axios: Promise based HTTP client for the browser and node.js.
- request: Simplified HTTP request client.
Testing#
- enzyme: a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.
- unexpected-react: Plugin for the unexpected assertion library that makes it easy to assert over your React Components and trigger events.
- skin-deep: Testing helpers for use with React's shallowRender test utils.
- expect-jsx: toEqualJSX for expect.js
- react-unit: a lightweight unit test library for ReactJS with very few (js-only) dependencies.
UI Components#
- ag-Grid Advanced data grid / data table for React.
- Grommet The most advanced open source UX framework for enterprise applications.
- React Web A framework for building web apps with React.
- React Mdl React Components for Material Design Lite.
- Amaze UI React (in Chinese): Amaze UI components built with React.
- Belle: Configurable React Components with great UX
- Khan Academy's component library
- Elemental UI: A UI toolkit for React websites and apps, themeable and composed of individually packaged components
- Halogen: A collection of highly customizable loading spinner animations with React.
- react-bootstrap: Bootstrap 3 components built with React.
- react-bootstrap-table: It's a react table for Bootstrap.
- Topcoat UI Components: Topcoat UI Components built with react.
- react-foundation-apps: Foundation Apps components built with React
- orb: React pivot grid.
- react-topcoat: Topcoat components built with React.
- react-slick: Carousel component built with React
- react-lorem-component: Lorem Ipsum placeholder component.
- wingspan-forms: React library for dynamic forms & grids; widgets provided by KendoUI.
- react-translate-component: React component for i18n.
- newforms: Form-handling library which renders to
React.DOM
components on the client and the server.
- react-highlight: React component for syntax highlighting
- react-responsive-mixin: Mixin to develop responsive react components
- react-chosen: React wrapper for Chosen jQuery.
- react-select: Native React Select / Multiselect input field, similar to Selectize / Chosen / Select2
- react-ladda: React wrapper for Ladda buttons.
- react-scroll-components: A set of components and mixins that react to page scrolling.
- react-forms: Form rendering and validation for React
- valuelink: Full-featured two-way data binding and forms validation with extended React links.
- tcomb-form: Automatically generate form markup, automatic labels and inline validation from a domain model
- react-treeview: Easy, light, flexible tree view.
- react-multiselect: Filter and select from a list of items.
- react-date-picker: A simple and reusable datepicker component for React.
- react-textarea-autosize: Like
<textarea />
but resizes automatically to fit all its content.
- react-growable-textarea: Resizes
<textarea />
to fit all its content using a css shim (no javascript calculations).
- react-input-autosize: Like
<input />
but resizes automatically to fit all its content.
- React-TimeAgo A minimal live updating Time Ago component that smartly converts any time to a ‘ago’ or ‘from now’ format and keeps it updated.
- react-maps Embed Google Maps. Supports markers, polylines and programmatic mutation.
- material-ui A set of React Components that implement Google's Material Design.
- Ant Design of React An enterprise-class UI design language and React-based implementation.
- react-tappable A Tappable React Component that provides native-feeling onTap events for mobile React apps
- react-tour-guideA ReactJS mixin to give new users a popup-based tour of your application
- react-contentEditable Example component for contentEditable elements
- react-dnd Flexible HTML5 drag-and-drop mixin for React with full DOM control
- react-autosuggest WAI-ARIA compliant React autosuggest component
- react-document-title Declarative, nested, stateful, isomorphic document.title for React
- react-image: Like
<img />
and Enhanced Image Component for React.
- react-mq: Easy Media Query Helper for React.
- react-timesheet: Visualize your data and events with sexy time sheet component.
- react-switch-button: Beautiful React Switch button component
- react-amiga-guru-meditation: React JS Class to display a Amiga Guru Meditation Tribute
- react-notification: Snackbar style notifications
- react-swipe-views: React Swipe Views
- react-spreadsheet: React Spreadsheets / Editable tables with Excel-Style keyboard input and navigation
- react-dropzone: React Dropzone for File-Uploads
- react-twitter-typeahead: React auto-suggestion component
- react-sparklines: Beautiful and expressive sparklines component
- Winterfell: Generate complex, validated and extendable JSON-based forms in React
- react-selectize: A stateless & flexible Select component, designed as a drop in replacement for React.DOM.Select, inspired by Selectize
- react-joyride: Create walkthroughs and guided tours for your ReactJS apps.
- react-stamp: Composables for React.
- mobservable-react-buttons: These are rollover buttons with some extra functionality. A more elaborate demo is running at http://schalk.ninja but I don't presently have a repo available.
- UXCore (in Chinese): UXCore UXCore components built with React.
- reactstrap: Simple Bootstrap 4 components built with tether
- Onsen UI React Components: UI components for hybrid mobile apps with both Material Design for Android and flat design for iOS.
- react-pagenav: react pagenav component. [demo]
- React Amazing Grid Flex grid with inline styles.
- Selectivity: Modular and light-weight selection library.
Miscellaneous#
- react-kefir: A library for connecting Kefir streams and observable properties to React components.
- react-bacon: provides a mixin for using Bacon.js with React components.
- react-mixin-manager: A manager for named mixins which allows for defined dependencies (and auto-inclusion of those dependencies), overrideable mixins (3rd party mixins can expose core functionality to be overrideable), and mixin groupings (use a single name to represent a set of mixins)
- react-events: A mixin which gives component for managed declaritive event bindings (similar to Backbone Views). It has default support for window, refs and DOM.
- dispatchr: A Flux dispatcher for applications that run on the server and the client.
- HTML2React: A tool that helps reusing HTML code and migrating projects to React by compiling pure HTML to Coffeescript React code like this.
- React-Prefixr: A simple utility for handling vendor prefixes in React. It's a simple function that takes and object of styles and returns a properly prefixed version. `npm install react-prefixr
- react-unmount-listener-mixin: React mixin for listenable componentWillUnmount
- shivie8: Minimal HTML5 element shiv for IE8. Enables safe use of the new semantic HTML5 elements in React, without the unnecessary overhead associated with html5shiv.
- jreact: Rendering react server-side within a JVM (Java 7 or Java 8)
- React Component Library: A community maintained list of React Components
to help other developers find pre-built components.
- ReactDebugMixin: Debug mixin, for creating a nested visual representation of your components in your developer console.
- react-htmlparser2: Parse an HTML string to a React renderable component.
- rx-react: Provides mixins and helpers for using RxJS with React components.
- JSnoX: A concise, expressive way to build React DOM in pure JavaScript.
- react-component: A collection of react components maintained by Alibaba/Alipay employee
- react-canvas: High performance
- react-signals: Signals Component for React.
- react-storage: Local Storage Component for React.
- react-jss: Inject and mount jss styles in React components.
- react-styl: Keep your component CSS and JS in the same file
- react-style: Maintainable styling for React.js components
- react-zeroclipboard-mixin: React mixin for automatic binding of the ZeroClipboard client to the clipboard action DOM elements
- barium: Easy styling with React components.
- react-mask-mixin: Input mask for text input.
- django-react: Server-side rendering of React components for django apps.
- react-engine: Composite render engine for isomorphic express apps to render both plain react views and react-router views.
- react-mount: React goes web component. Use custom tags to place react components directly in html.
- reactX:
ReactX
add missing features to React in ES6 class syntax: Immutable.js state, PureRender Component, React-Router integration, MixIn(with good parts only). PropertyBinder
also make it easier to bind store
/state source
to component.
- reactjs-server: Renders React components on a server with Nashorn in JVM (Scala)
- react-render-visualizer: A visual way to see what is (re)rendering and why.
- Haskell Websockets React Game of Score: React with a Haskell websockets server.
- javascript-monads: As this project matures, the monads are becoming more than mere toys. React is used in unorthodox ways, so if you want to use React the way they do at Facebook, this is not for you. Transpiled code for the three monad classes can be downloaded by entering "npm install reactive-monads". A demo is online at http://transcendent.ninja.
- ReactCSS: The way CSS in React should be