Skip to content

Complementary Tools

Jump to bottom
元彦 edited this page Mar 12, 2015 · 39 revisions

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 Developer Tools: a Chrome extension 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

  • Many editors already include reasonable support for JSX (Vim, Emacs js2-mode).
  • sublime-react: Snippets and syntax highlighting for React.js / JSX
  • babel: Snippets, syntax highlighting and optimized color schemes for Sublime Text
  • javascript-react.tmbundle Syntax and build on save for Textmate
  • web-mode.el: An autonomous emacs major mode that indents and highlights JSX
  • Atom React.js Support
  • vim-jsx: Syntax highlighting and indenting for JSX
  • JetBRAINS WebStorm: Syntax highlighting, code completion, error detection for JSX

Build Tools

Full-stack starter kits

Routing

Model management

  • 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.
  • cortex: A JavaScript library for centrally managing data with React.
  • 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.
  • 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.

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.

UI components

Miscellaneous

  • 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 rendering for React components by Flipboard
  • react-signals: Signals Component for React.
  • react-storage: Local Storage Component for React.
  • 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
  • react-stylist: Easy styling with React components.
Clone this wiki locally