Awesome React
A collection of awesome React tools, resources, videos and shiny things.
Resources
General Resources
- React Official Site
- React Docs
- React Blog
- React GitHub
- React Wiki
- React StackOverflow
- React GoogleGroup
- React Twitter
- React npm module
- React Tools npm module
- React TodoMVC
- React Future
Tutorials
- React Tutorial
- React Tutorial Project
- React One Hour
- Pro Javascript React Tutorial
- Writing React components as CommonJS modules
- 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
- Full example using Koa, React, Passport, Mongoose, Gulp, Mocha
- 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
- 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
- Creating Chrome Extensions with React
- Using ReactJS and KendoUI Together
- Building dynamic forms with Facebook React
- Intro to React livecoding workshop
- Using React components as Backbone Views
- 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
- Testing React Components
- Dealing with asynchronous code in React components
- Testing React components with Huxley
- Tooltip mixin for React
- React Tutorial: Two way data binding
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
Approach Explanation
- Remarkable React
- Reactive Table
- ReActiveTable bookmarklet
- 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
- Compiling JSX with Sweet.js using Readtables
- 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
- Set State in Callbacks in React
- Send Props to Children in React
- Custom Components: React & x-tags
- React & CoffeeScript
- JSX for the real DOM
- JSX: E4X The Good Parts
- React: Referencing Dynamic Children
Tools
Flux
- Flux Project
- Flux Application Architecture
- 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
- Async requests with React.js and Flux
- Async requests with React.js and Flux, revisited
- Implementing Flux in CoffeeScript
- React: Flux Architecture
- Understanding Flux
Boilerplates
- 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 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
Components
- React Component List
- Khan Academy React Components
- 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
- 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 element that autoupdates
- react-time - Component for React to render relative and/or formatted dates into
- 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 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 polyfill for Reactjs
- 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-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-draggable - React draggable component
- react-sticky - component for React-based apps
Integration
- ReactJS.NET
- React Bootstrap
- 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
- 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
- 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 - Topcoat CSS components built with the React library
- 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
- jreact - React on server-side Java (with Rhino or Nashorn)
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
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
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
Graphics
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
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
- react-stylePrefixr - A simple utility for React.js to help deal with style vendor prefixes
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
- 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
- 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
Video Tutorials
- Learn ReactJS (make a Pokedex!) - part 1
- Learn ReactJS (make a Pokedex!) - part 2
- Advanced Input Validation With React
- ReactJS: Dealing with the Server
- Thinking in React
Books
Demos
- react-pokemon - A React component for displaying Pokémon
- React + Backbone TodoMVC
- 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
Examples
- React HTML Template
- React Helloworld
- Props
- State
- Props and State
- External Plugin
- POST/GET with HTTP server
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. (✿◠‿◠)