awesome-react
awesome-react copied to clipboard
gaearon
A collection of awesome React libraries, resources and shiny things.
Awesome React
A collection of awesome React tools, resources, videos and shiny things.
- Resources
- General Resources
- Tutorials
- General Tutorials
- Writing React Components
- Writing Isomorphic Apps
- JSX Tutorials
- Flux Tutorials
- Building Robust Web Apps with React
- React and Backbone
- React and Angular
- React and Bootstrap
- React and ClojureScript
- Server-Client with React
- Server Side Rendering
- Compiling React Tutorials
- Testing React Tutorials
- Data Models for React
- Approach Explanation
- Tools
- Flux
- Boilerplates
- Components
- Libraries
- Integration
- Routing
- Unit Testing
- Graphics
- Data Managing
- Development Environment
- Generating
- Compiling
- Videos
- Video from Confs
- Video Tutorials
- Books
- Demos
- Examples
- Other Awesome Lists
- Contribution
Resources
General Resources
- React Official Site
- React Docs
- React Blog
- React GitHub
- React Wiki
- React StackOverflow
- React GoogleGroup
- React Facebook Community
- React Twitter
- React npm module
- React Tools npm module
- React TodoMVC
- React Future
Tutorials
General Tutorials
- React Tutorial
- React Tutorial Project
- React One Hour
- Pro Javascript React Tutorial
- Medium React Tutorials
- Intro to the React Framework
- React beginner tutorial: implementing the board game Go
- Trying Out ReactJS With the Marvel API
- Yo in React
- Creating Chrome Extensions with React
- Using ReactJS and KendoUI Together
- Building dynamic forms with Facebook React
- Intro to React livecoding workshop
- Tooltip mixin for React
- React Tutorial: Two way data binding
- React PhoneCat: Rewriting the AngularJS Tutorial App in React
- A React.js case study
- Simplifying Code with React
- The New React-based Brackets Project Tree
- A React.js case study follow-up
- Scroll Position with React
- React Style
- Component Interop With React And Custom Elements
- Getting Started with React.js: Creating Material Design Components
- Building a board game with React.js
- ReactJS and Socket.IO Chat Application
Writing React Components
- Writing React components as CommonJS modules
- Reliable web components with React.js and ReactiveElements
- A Sortable List Component in React utilizing the HTML5 Drag & Drop API
- A Truly Reactive Sortable Component
- Dealing with asynchronous code in React components
- Component-based Web Apps with React
- Reactive Table
- ReActiveTable bookmarklet
- Set State in Callbacks in React
- Send Props to Children in React
- Creating Modular View Components with React and Grunt
- React Components for Cat Videos
Writing Isomorphic Apps
- Isomorphic JavaScript: The Future of Web Apps
- Isomorphic apps with Backbone.js and React
- From AngularJS to React: The Isomorphic Way
- Going Isomorphic with React
- newforms - Isomorphic form-handling for React
- newforms-examples - Examples repository for newforms
JSX Tutorials
- JSX Specification
- JSX in Depth
- JSX extensions to Mozilla AST Format
- Compiling JSX with Sweet.js using Readtables
- JSX for the real DOM
- JSX: E4X The Good Parts
Flux Tutorials
- Flux Application Architecture
- Isomorphic Flux examples using Dispatchr and Fetchr from Yahoo
- Async requests with React.js and Flux
- Implementing Flux in CoffeeScript
- React: Flux Architecture
- Understanding Flux
- A sample app showcasing Flux with React Router
- Yo in Flux
- React.js architecture - Flux VS Reflux
- Avoiding Event Chains in Single Page Applications
- ReactJS and FLUX
Building robust web apps with React
- Building robust web apps with React: Part 1
- Building robust web apps with React: Part 2
- Building robust web apps with React: Part 3
- Building robust web apps with React: Part 4
React and Backbone
- Using React components as Backbone Views
- Chicago Backbone Meetup: React + Backbone slides
- Pimp my Backbone.View
React and Angular
- NgReact - React Components in Angular
- ng-React Update - React 0.9 and Angular Track By
- Using React for Faster Renders and Isomosphism in Angular
- Faster AngularJS Rendering
- Improving AngularJS long list rendering performance using ReactJS
React and Bootstrap
- Better Bootstrap modals and popover with React.js
- A mixin-based design for a React.js Bootstrap component library
- Popover mixin
- Bootstrap TabbedArea component with React.js
- Bootstrap forms using React.js
React and ClojureScript
React and D3js
Server-Client with React
- Server/Client With React, Part 1: Getting Started
- Server/Client With React, Part 2: The Build System
- Server/Client With React, Part 3: Frontend Server
Server Side rendering
- Server Side Rendering for ReactJS
- React Server Rendering
- JDK8 + Facebook React: Rendering single page apps on the server
- Server-side React with PHP – part 1
- Server-side React with PHP – part 2
- Server-rendered React components in Rails
Compiling React Tutorials
- React JS and a browserify workflow
- Using ReactJS with Browserify and Gulp
- Choosing the correct packaging tool for React JS
- Browserify and Gulp with React
- Using Facebook's React with Require.js
Testing React Tutorials
Data Models for React
Approach Explanation
- React: Convincing the Boss
- Why did we build React?
- Remarkable React
- Play Framework and Facebook's React library
- The Future of JavaScript MVC Frameworks
- Om sweet Om
- BirdWatch: AngularJS vs. ReactJS
- Scala.js and ReactJS
- Pros and Cons of Facebook's React vs. Web Components
- React.js plays nicely with other tools and other thoughts
- First Reactions
- Backbone to React
- Moving Atom to React
- Why we use React.js in our Rails projects
- ReactJS-Rethinking-Web-UI
- Removing User Interface Complexity, or Why React is Awesome
- Facebook React vs. Ember
- Moving From Backbone To React
- Pimp my Backbone.View (by replacing it with React)
- From Backbone Views To React
- React.js vs traditional MVC
- Why you might not need MVC with React.js
- React: Finally, a great server/client web stack
- Custom Components: React & x-tags
- React & CoffeeScript
- React: Referencing Dynamic Children
- React.js and How Does It Fit In With Everything Else?
- JavaScript’s History and How it Led To ReactJS
- Saving Time and Staying Sane? Pros and Cons of React.js
- Opinionated Rundown of JS Frameworks
- Facebook's React vs AngularJS: A Closer Look
- Why We May Ditch AngularJS For React
- AngularJS vs React
- Why is React's js size so big given its small API?
- React Demystified
- Two-Way Data Binding
- React vs. Ember
- Using React to speed up the Khan Academy question editor
Tools
Flux
- Flux official site
- Flux Project
- jFlux.js - one-way flow of state
- flux-router-component - Router React mixin for applications built with Flux
- fluxxor - A set of tools to facilitate building JavaScript data layers using the Flux
- fluxy - An implementation of Facebook's Flux architecture
- refluxjs - A simple library for uni-directional dataflow application architecture inspired by Flux
- dispatchr - A Flux dispatcher for applications that run on the server and the client
- fetchr - Augments Flux applications by allowing the same syntax on server/client
- capacitor - Lightweight implementation of the Flux architecture for client-side applications
Boilerplates
- react-starter-kit - a skeleton for an isomorphic web application
- React Quickstart
- React Hack
- react-component-boilerplate - Boilerplate for creating React components
- react-browserify-template - Quick template for building with Browserify + React
- React Boileplate
- Coffee React Quickstart
- react-starter-template - React (reactjs), Gulp, Webpack, Bootstrap, LiveReload
- react-starter - Starter template for React with webpack
- react-webpack - React + Webpack project template
- react-server-rendering-example - Super-basic example of how server rendering works
- React Webpack Server Side Example]
- genesis-skeleton - Modern, opinionated, full-stack starter kit
- react-seed by @fizerkhan - Seed project for react apps
- react-seed by @kriasoft - A single-page application (SPA) project template based on React
- gulp-browserify-react-phonegap-starter - A starter kit for Phonegap, using Gulp, Browserify and React
- react-isomorphic - An experimental playground to try and find unobtrusive patterns using React
- react-isomorphic-test - Testing an isomorphic React application
- este - Robust and comfortable dev stack for mobile/offline/frontend first isomorphic web apps
- leveldb-baconjs-react-example - LevelDB React example
- reactor-core - A small library for creating isomorphic apps in React
- react-hot-boilerplate - Live-editing boilerplate for your next ReactJS project
- react-webpack-stylus-starter - Project stub for React project
- Full example using Koa, React, Passport, Mongoose, Gulp, Mocha
- Basic skeleton for a Rendr app
- react-component-boilerplate - A React component boilerplate
Components
- React Components
- React Component List
- Khan Academy React Components
- VistarMedia Components
- Reactjsx Components List
- react-material - Material design components written with React.js and React Style
- react-touch - React photo viewer for mobile
- griddle - A simple grid component for use with React
- react-grid - Data grid for React
- react-async - Async rendering for React components
- react-async-input - Inputs that behave properly with async set{State,Props} calls
- react-mediaswitch - Choose your DOM based on media queries
- react-frame-component - Render your React app to an iFrame
- react-gravatar - React component for rendering a gravatar profile image
- markdown-react - React Render for Standard Markdown
- react-markdown-textarea - Component to create textareas for entering Markdown
- react-textarea-autosize - Textarea component for React which grows with content
- react-spinner - Zero configuration loading spinner
- react-treeview - Easy, light, flexible tree view made with React
- react-tween-state - React animation tween state
- react-swipe - Brad Birdsall's swipe.js, as a React component
- react-smart-time-ago - Show relative "time ago" dates
- react-autoupdate-time - Renders a
- react-time - Component for React to render relative and/or formatted dates into
- react-crouton - A message component for reactjs
- react-ago-component - A component for React that renders the approximate time ago
- react-translate-component - A component for React that multi-lingual/localized text
- react-lorem-component - A component for React that renders lorem ipsum placeholder text
- react-interpolate-component - Renders elements into a format string
- react-proxy-loader - Hot Module Replacement and Code Splitting
- RCSS - Turn your JavaScript objects into CSS classes
- ReactiveElements - Allows to use React.js component as HTML element
- react-chosen - React wrapper for Chosen jQuery
- react-inlinesvg - An SVG loader component for React
- react-imageloader - A React component for wrangling image loading
- react-loadqueueloader - A React component for managing loads with a load queue
- react-loadermixin - A React mixin for giving components loading behavior
- react-controlfacades - Style form controls but use their default behavior
- react-pressable - Add onRelease, onReleaseInside, onReleaseOutside, and onPress events
- react-google-analytics - Google analytics component
- react-google-maps - React interface to Google maps
- react-gcal-events-list - A Reusable component that pulls events from your google calendar
- reactdi - Dependency injection for ReactJS components
- qrcode.react - A <QRCode/> component for use with React
- react-qrcode - This is a React wrapper for qrcode.js
- react-swf - Shockwave Flash Player component for React
- react-unmount-listener-mixin - React mixin for listenable componentWillUnmount
- react-sortable - A sortable list component built \w React
- react-controllables - Easily create controllable components
- react-datalist - A
- react-pad - Authoring tool for React components
- ogre.js - Object graph manager, built with ReactJS in mind
- react-scroll-components - A set of components that react to page scrolling
- react-fullscreen-component - Create fullscreen toggles
- react-frozenhead - Make your whole page a React component and render it on the server
- react-tags - A simple wrapper around React.DOM
- react-datepicker by @misino - Datepicker component for application using Facebook React
- react-datepicker by @Hacker0x01 - A simple and reusable datepicker component for React
- react-maps - A map component for React
- react-styles - Utility to manage styles for React JS components
- react-stylesheet - A component for React to declare stylesheet dependencies
- react-table-sorter-demo - A React.js Table Sorter Component
- react-table-component - React Table Component for creating a very basic html table
- react-input-placeholder - Input is a small wrapper around React.DOM.input
- react-infinite-scroll - An infinite scroll component for React
- react-ellipsis - Ellipsis component for React
- react-pillbox - Pillbox component for React
- react-intl - React Internationalization Component
- react-tokeninput - Tokeninput component for React
- react-select-box - An accessible select box component for React
- react-ladda - React wrapper for Ladda buttons
- react-list - A versatile infinite scroll React component
- olay-react - Olay implemented as a React component
- reactable - Fast, flexible, and simple data tables in React
- react-tabs - React tabs component
- react-simpletabs - Just a simple tabs component
- react-draggable - React draggable component
- react-sticky - <Sticky /> component for React-based apps
- js-object-to-table - JavaScript objects drawing themselves into a table using React
- react-kaomoji - A React component for displaying Japanese emoticons
- react-calendar - Calendar that inspired by React philosophy
- react-element-pan - React component for allowing panning of DOM-elements
- react-anchor - Functional factory to create react anchor components
- react-bootstrap-daterangepicker - A date/time picker for react (using Bootstrap)
- react-bootstrap-datetimepicker - A react.js datetime picker for Bootstrap
- react-bootstrap-multiselect - A multiselect component for react (with bootstrap)
- react-colorpicker - Colorpicker for React
- react-commits-graph - A React component to render an svg graph of git commits
- react-layout - Dynamic subview layout for React
- react-weather - Example React weather app using forecast.io's API
- react-sparkline - React component for rendering simple sparklines
- react-component-width-mixin - React mixin which sets width
- react-micro-bar-chart - React component for micro bar-charts rendered with D3
- react-infinity - A UITableView Inspired list and grid display
- react-timeago - A simple time-ago component for React
- react-stylePrefixr - A simple utility for React.js to help deal with style vendor prefixes
- react-spinkit - A collection of loading indicators animated with CSS for React
- react-html-elements-styleguide -React styleguide component
Libraries
- react-magic - Automatically AJAXify plain HTML with the power of React
- tcomb-react - Library allowing you to check all the props of your React components
- react-responsive - Media queries in react for responsive design
Integration
- ReactJS.NET
- React Bootstrap
- React Bootstrap Components Playground
- React Rails
- om - ClojureScript interface
- quiescent - A lightweight ClojureScript abstraction over React
- Express React views
- React Page Middleware
- ngReact - React Components in Angular
- React Bower
- React Python
- React PHP
- React Meteor
- node-jsx - Transparently require() jsx from within node
- jsx-loader - JSX loader for Webpack
- cjsx-loader - coffee-react-transform loader module for webpack
- Coffee React
- react-coffee - Build React components using natural CoffeeScript syntax
- coffee-react-transform - Provides React JSX support for Coffeescript
- sprockets-coffee-react - Sprockets preprocessor for CJSX
- react-kup - A simple, non-intrusive alternative to jsx for coffeescript
- turbo-react - Combine Turbolinks and React to apply DOM diffs
- react-bacon - A little module for using React with Bacon.js
- msx - React's JSX Transformer, tweaked to output calls to Mithril
- Backbone React Component
- react-backbone - Backbone-aware mixins for react
- backbone-reaction - React, Backbone and then some
- react.backbone - Plugin for React to make Backbone migration easier
- reactbone - React extensions for Backbone
- backbone-react-ui - React components for use with backbone and backbone paginator
- react-events - Declarative managed event bindings for react components
- react-mixin-manager - React mixin registration manager
- gsap-react-plugin - A GSAP plugin for tweening React.js component state
- react-topcoat by @plaxdan - Topcoat CSS components built with the React library
- react-topcoat by @arnemart - A collection of React components for Topcoat
- reactdown - Write React components using markdown syntax
- react-jade - Compile Jade to React JavaScript
- jade-react - Compile Jade templates to React.DOM expressions
- gulp-jade-react - Compile Jade templates into React de-sugared JSX with Gulp
- react-semantic-ui - React components for Semantic UI
- semantic-react - React wrappers for Semantic UI
- sbt-reactjs - React SBT Plugin using npm
- scalajs-react - A guilty affair between Scala.js and Facebook's React
- rpm-xtags-rivets-finch-react - RPM project: x-tags, rivets.js, finch.js, and React
- react-xtags - Using React to implement xtags
- jreact - React on server-side Java (with Rhino or Nashorn)
- React.hiccup - A complete replacement for JSX written in sweet.js
- react-style - Integrate CSS into your React.js components
- react-play - Rendering React components in the Play Framework with JDK8's Nashorn
- react-style - Integrate CSS into your React.js components
- rx-react - Utilitiels to works with React in a RxJS
- react-typescript - Wrapper to make react play nicely with typescript
- react-with-di - A hacked prototype of React.js with DI
- reactfire - ReactJS mixin for easy Firebase integration
Routing
- react-router by @raackt - A complete routing solution for React.js
- react-router-component by @andreypopp - Declarative router component for React
- react-router by @jaredly - An integrated router for react
- rrouter - Declarative routing layer for React applications
- react-mini-router - A minimal URL router for React.js
- monorouter - An isomorphic JS router
- routr - A component that provides router related functionalities for both client and server from Yahoo
- route-reactor - Framework-agnostic client-side router
Forms
- React Forms
- react-forms - Forms library for React
- wingspan-forms - A dynamic form library for Facebook React
- newforms - Isomorphic form-handling for React
- formjs - A form generator for Reactjs
- react-form-builder - A Form Builder for React.js
Autocomplete
- react-autocomplete by @rackt - WAI-ARIA compliant React autocomplete
- react-autocomplete by @eliseumds- Just tasting some ReactJS + RxJS
- react-autocomplete by @prometheusresearch - Autocomplete widget based on React
Unit Testing
- jest - Painless JavaScript Unit Testing
- jasmine-react - Unit test your React.js applications with Jasmine
- chai-react - Chai assertions for React
Graphics
- react-art - React Bridge to the ART Drawing Library
- react-kinetic - HTML5 Canvas via KineticJS using React
Data Managing
- immutable-js - Immutable Data Collections for Javascript
- cortex - A javascript library for centrally managing data with React
- avers - A modern client-side model abstraction library
- imvvm - Immutable Model-View-ViewModel for React
- morearty.js - Better state management for React in pure JavaScript
- valuable - An immutable data store for React
Development Environment
- react-devtools - React Chrome Developer Tools
- sublime-react - Sublime Text React
- Atom React
- vim-jsx - Vim JSX Syntax
- Vim React Snippets
- Textmate Bundle for JSX
- js2-mode - JavaScript editing mode for GNU Emacs
- web-mode.el - An autonomous emacs major-mode for editing web templates
- JSXHint - Wrapper around JSHint for linting JSX files
- React Starter Kit for Microsoft Visual Studio
Generating
- generator-react-webpack - Yeoman generator for ReactJS and Webpack
- generator-react-app - Yeoman generator to create React application (with Express and Mongoose) + Backbone + Bootstrap
- generator-react-library - Yeoman generator for React components
Compiling
- reactify - Browserify transform for JSX
- Grunt React
- Gulp React
- broccoli-react - Broccoli preprocessor for React JSX
- require-jsx - A require.js plugin that allows you to use JSX files as require.js dependencies
- react-requirejs-example - React tutorial working together with require.js
- jsx-requirejs-plugin - A RequireJS plugin for loading and compiling
- react-brunch - Adds React.js support to brunch build tool
- react-tags-brunch - Adds React.js tag interpolation to brunch build tool
- react-hot-loader - Webpack loader that enables live-editing React components without unmounting or losing their state
- fez-react - Transform React JSX using Fez build tool
- mimosa-react - A JSX compiler for Mimosa build tool
- HTML2React - Convert plain HTML into Coffeescript calls of React.DOM
Videos
Video from Confs
- Pete Hunt: React: Rethinking best practices - JSConf EU 2013
- Pete Hunt: React: Rethinking Best Practices (updated) - JSConf.Asia 2013
- Stoyan Stefanov: Reactive JavaScript - BrazilJS 2013
- Tom Occhino and Jordan Walke: JS Apps at Facebook - JSConfUS 2013
- Tom Occhino and Jordan Walke: Introduction to React.js - Facebook Seattle
- Pete Hunt: High performance functional programming with React and Meteor -- Devshop 11
- Steven Luscher: Developing User Interfaces With Facebook's React - Super VanJS 2013
- Stoyan Stefano: Introduction to React - LAWebSpeed meetup
- Pete Hunt: Be Predictable, Not Correct - Mountain West JavaScript 2014
- Pete Hunt: The Secrets of React's Virtual DOM - FutureJS 2014
- Hacker Way: Rethinking Web App Development at Facebook
- Areeb Malik: Going big with React - The Skills Matter eXchange
- Christopher Chedeau: Why does React Scale? - JSConf2014
- Christopher Chedeau: React's Architecture - OSCON 2014
- Christian Johansen: Functional UI Programming - flatMap 2014
- Pete Hunt: React RESTful UI Rendering - Strange Loop 2014
- Stefano Masini: Refactoring to React - Amsterdam Javascript MVC meetup 10 sep 2014
- Pete Hunt: How Instagram.com Works - OSCON 2014
- Bill Fisher and Jing Chen: React and Flux: Building Applications with a Unidirectional Data Flow - NewCircle Training 2014
Video Tutorials
- Learn ReactJS (make a Pokedex!) - part 1
- Learn ReactJS (make a Pokedex!) - part 2
- React.js Components - part 1
- React.js Components - part 2
- Advanced Input Validation With React
- ReactJS: Dealing with the Server
- Thinking in React
- Building UIs with ReactJS
Books
Demos
- react-hn - A React & react-router-powered implementation of Hacker News
- react-pokemon - A React component for displaying Pokémon
- React + Backbone TodoMVC
- react-rxjs-todomvc - TodoMVC implementation with React and RxJS
- react-observe-todomvc - TodoMVC implementation built on top of React and Object.observe
- reactodo - Multiple localStorage TODO lists
- lifequote - React port of a life insurance quick quoting application
- reactor-demo - Isomorphic Javascript app with React
- imgsible - React-based Imgur-like isomorphic demo app
- wow-realm-status-react - WoW Realm Status: React Edition
- react-json-editor - A generic JSON editor
- react-todos - Backbone's example TODO app with React JS for views
- reactodo - Multiple localStorage TODO lists, built with React
- react.io - Small experiment to see how easy it is to synchronize React.js components using Socket.io
- github-issues-viewer - A gitub issues viewer build in react + backbone
- wolfenstein3D-react - Wolfenstein with the rendering layer written in React
Examples
- React HTML Template
- React Helloworld
- Props
- State
- Props and State
- External Plugin
- POST/GET with HTTP server
- Refs to send messages between components
Other Awesome Lists
- Frontend Development
- JavaScript Programming
- Node.js Programming by @sindresorhus
- Node.js Programming by @vndmtrx
- Awesome Awesomness
Contribution
Your contributions and suggestions are heartily♡ welcome. (✿◠‿◠)
gaearon