Complementary Tools

bmarkov edited this page Jan 16, 2017 · 233 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 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.
  • patternplate: platform for pattern and component library development using React.

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 Redux Boilerplate: React Redux Boilerplate is a workflow boilerplate that make life easier for developers by providing a virtual development environment and production ready build workflow out of the box. ( React, Redux, Reselect, Redux Actions, ES6, ESLint, Webpack with integrated environment config support )
  • 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.
  • React + Redux + Saga Boilerplate - Ready to grow boilerplate with react-router, redux, saga, webpack 2, jest w/ coverage and enzyme.
  • generator-enigma a minimalist React application scaffolding tool that sets up a ready-to-deploy web app, complete with testing via Jest and optional react-router boilerplate.
  • Component-Template - A create-react-app based starter kit for building, documenting, & publishing React Components. Includes React Router v4, Bootstrap 4 and Reactstrap.

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.
  • react-redux-starter-kit: Terrific universal Redux + React Router starter kit with Babel, SASS, hot reloading, testing, linting. Unopinionated as possible.

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.
  • Apollo: Easy to set up and use GraphQL 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

  • jQWidgets for React: How to use jQWidgets in ReactJS apps.
  • jQWidgets Grid for React: Grid component ready for enterprise applications.
  • jQWidgets Chart for React: Chart component ready for enterprise applications.
  • jQWidgets React UI Components: 60+ UI Components for React - Grids, Charts, Gauges, Buttons and Actions, Editors, Navigation, Lists, Layouts, Scheduling.
  • Semantic-ui: The official Semantic-UI-React integration, Advanced components and declarative UI.
    • markdown-to-jsx: compiles markdown into safe React JSX without using dangerous escape hatches
    • chartify: Ultra lightweight and customizable React.js chart component
    • react-sigma: Lightweight but powerful library for drawing network graphs
    • video-react: A web video player built for the HTML5 world using React library.
    • recharts: A composable charting library built on React components.

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 rendering for React components by Flipboard
  • 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".
  • ReactCSS: The way CSS in React should be
  • ReactQuestionnaire: Simple react components for building a questionnaire or survey.