# awesome-react **Repository Path**: labike/awesome-react ## Basic Information - **Project Name**: awesome-react - **Description**: A collection of awesome things regarding React ecosystem. - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2019-10-10 - **Last Updated**: 2024-10-15 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ### **Awesome React** [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) [![Build Status](https://travis-ci.org/enaqx/awesome-react.svg?branch=master)](https://travis-ci.org/enaqx/awesome-react) A collection of awesome things regarding React ecosystem. - [React](#react) - [React General Resources](#react-general-resources) - [React Community](#react-community) - [React Online Playground](#react-online-playground) - [React Tutorials](#react-tutorials) - [React General Tutorials](#react-general-tutorials) - [React styling](#react-styling) - [React Charts Tutorials](#react-charts-tutorials) - [React and Meteor](#react-and-meteor) - [React and Angular](#react-and-angular) - [React and Bootstrap](#react-and-bootstrap) - [React and ClojureScript](#react-and-clojurescript) - [React and CoffeeScript](#react-and-coffeescript) - [React and Datatables](#react-and-datatables) - [React and Haskell](#react-and-haskell) - [React and SocketIO](#react-and-socketio) - [Server-Client with React](#server-client-with-react) - [Server Side Rendering](#server-side-rendering) - [Compiling React Tutorials](#compiling-react-tutorials) - [Debugging React](#debugging-react) - [Authentication](#authentication) - [File Uploads](#file-uploads) - [React Tools](#react-tools) - [Boilerplates](#boilerplates) - [Routing](#routing) - [React Projects](#react-projects) - [Components](#components) - [Libraries](#libraries) - [Integration](#integration) - [Forms](#forms) - [Autocomplete](#autocomplete) - [Documentation Tools](#documentation-tools) - [Graphics](#graphics) - [Model Libraries](#model-libraries) - [Data Managing](#data-managing) - [React Developer Experience](#react-developer-experience) - [Template Engines](#template-engines) - [Maps](#maps) - [Charts](#charts) - [React Native](#react-native) - [React Native General Resources](#react-native-general-resources) - [React Native Community](#react-native-community) - [React Native Tutorials](#react-native-tutorials) - [React Native Developer Experience](#react-native-developer-experience) - [React Native Sample Apps](#react-native-sample-apps) - [React Native Boilerplates](#react-native-boilerplates) - [React Native Awesome Components](#react-native-awesome-components) - [JSX](#jsx) - [JSX Resources](#jsx-resources) - [Flux](#flux) - [Flux General Resources](#flux-general-resources) - [Flux Implementations](#flux-implementations) - [Flux Tutorials](#flux-tutorials) - [Redux](#redux) - [Redux General Resources](#redux-general-resources) - [Redux Tools](#redux-tools) - [Redux Tutorials](#redux-tutorials) - [MobX](#mobx) - [MobX General Resources](#mobx-general-resources) - [MobX Tools](#mobx-tools) - [MobX Tutorials](#mobx-tutorials) - [Testing](#testing) - [Testing Utilities](#testing-utilities) - [Testing Tutorials](#testing-tutorials) - [GraphQL](#graphql) - [GraphQL Spec](#graphql-spec) - [GraphQL Tools](#graphql-tools) - [GraphQL Tutorials](#graphql-tutorials) - [GraphQL Implementations](#graphql-implementations) - [Server Integration](#server-integration) - [Database Integration](#database-integration) - [Relay](#relay) - [Relay General Resources](#relay-general-resources) - [Relay Tutorials](#relay-tutorials) - [Relay Tools](#relay-tools) - [Apollo](#apollo) - [Apolo General Resources](#apollo-general-resources) - [Flow](#flow) - [Flow Resources](#flow-resources) - [Videos](#videos) - [Video from Confs](#video-from-confs) - [React.js Conf 2015 Playlist](#reactjs-conf-2015-playlist) - [ReactEurope Conf 2015 Day 1 Playlist](#reacteurope-conf-2015-day-1-playlist) - [ReactEurope Conf 2015 Day 2 Playlist](#reacteurope-conf-2015-day-2-playlist) - [ReactRally Conf 2015 Playlist](#reactrally-conf-2015-playlist) - [React.js Conf 2016 Playlist](#reactjs-conf-2016-playlist) - [ReactRally Conf 2016 Playlist](#reactrally-conf-2016-playlist) - [Video Tutorials](#video-tutorials) - [Books](#books) - [Demos](#demos) - [Example Apps](#example-apps) - [Real Apps](#real-apps) - [Contribution](#contribution) --- ### React > JavaScript Library for building User Interfaces #### React General Resources * [React Official Site](http://facebook.github.io/react/) * [React GitHub](https://github.com/facebook/react) * [React Community GitHub](https://github.com/reactjs) #### React Community * [Reactiflux](http://www.reactiflux.com/) * [React Discussion Forum](https://discuss.reactjs.org/) * [React StackOverflow](http://stackoverflow.com/questions/tagged/reactjs) * [React Twitter](https://twitter.com/reactjs) * [React Core meeting notes](https://github.com/reactjs/core-notes) #### React Online Playground * [React JSFiddle Integration with JSX](https://jsfiddle.net/reactjs/69z2wepo/) * [React JSFiddle Integration without JSX](https://jsfiddle.net/reactjs/5vjqabv3/) * [Babel REPL](https://babeljs.io/repl/) * [React HTML to JSX Online Compiler](https://facebook.github.io/react/html-jsx.html) * [React browser prototyping for components](http://react.run) #### React Tutorials ##### React General Tutorials * [React Tutorial](https://facebook.github.io/react/docs/tutorial.html) * [React.js Fundamentals](http://courses.reactjsprogram.com/courses/reactjsfundamentals) * [React Primer](https://github.com/mikechau/react-primer-draft) * [ReactJS: Keep Simple. Everything can be a component!](https://speakerdeck.com/pedronauck/reactjs-keep-simple-everything-can-be-a-component) * [React.js Koans: Practical exercises that will help you learn React.js from square one](https://github.com/arkency/reactjs_koans) * [React.js Introduction For People Who Know Just Enough jQuery To Get By](http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/) * [LearnCode React Tutorials](https://www.youtube.com/watch?v=MhkGQAoc7bc&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b) * [Thinkster React topics](https://thinkster.io/topics/react) * [React tutorial - Cloning Yelp](https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/) * [Learn React by building the Hacker News front page](https://github.com/mking/react-hn) * [React.js in patterns](http://krasimirtsonev.com/blog/article/react-js-in-design-patterns) ##### React styling * [React: CSS in JS](http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html) * [React: CSS in JS techniques comparison](https://github.com/MicheleBertoli/css-in-js) * [Radium](https://github.com/FormidableLabs/radium) * [jsxstyle](https://github.com/petehunt/jsxstyle) * [ReactCSS](https://github.com/casesandberg/reactcss) * [Aphrodite](https://github.com/Khan/aphrodite) * [Glamor](https://github.com/threepointone/glamor) * [Styletron](https://github.com/rtsao/styletron) * [TypeStyle](https://github.com/typestyle/typestyle) * [styled-components](https://github.com/styled-components/styled-components) ##### React Charts Tutorials * [Integrating D3.js visualizations in a React app](http://nicolashery.com/integrating-d3js-visualizations-in-a-react-app/) * [D3 and React - the future of charting components?](http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/) ##### React and Meteor * [Meteor official Guide](http://guide.meteor.com/react.html) * [Meteor with React Tutorial](https://www.meteor.com/tutorials/react/creating-an-app) * [React for Meteor developers](http://blog.differential.com/react-for-meteor-developers/) ##### React and Angular * [NgReact - React Components in Angular](http://davidandsuzi.com/ngreact-react-components-in-angular/) * [ng-React Update - React 0.9 and Angular Track By](http://davidandsuzi.com/ngreact-update/) * [Using React for Faster Renders and Isomosphism in Angular](http://davidandsuzi.com/using-react-for-faster-renders-and-isomorphism-in-angular/) * [Faster AngularJS Rendering](http://www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs/) * [Improving AngularJS long list rendering performance using ReactJS](http://www.mono-software.com/blog/post/Mono/242/Improving-AngularJS-long-list-rendering-performance-using-ReactJS/) * [How can React and Flux help us create better Angular applications?](https://medium.com/@gilbox/how-can-react-and-flux-help-us-create-better-stronger-faster-angular-applications-639247898fb) * [Achieving Reasonable and Scalable Routing in AngularJS with Flux](https://medium.com/@gilbox/achieving-reasonable-and-scalable-routing-in-angularjs-with-flux-2655e06cd5ee) ##### React and Bootstrap * [Better Bootstrap modals and popover with React.js](http://clozeit.wordpress.com/2014/01/08/bootstrap-modals-and-popover-in-react-js/) * [A mixin-based design for a React.js Bootstrap component library](http://clozeit.wordpress.com/2014/01/08/13/) * [Popover mixin](http://clozeit.wordpress.com/2014/01/09/popover-mixin/) * [Bootstrap TabbedArea component with React.js](http://clozeit.wordpress.com/2014/01/13/34/) * [Bootstrap forms using React.js](http://clozeit.wordpress.com/2014/01/13/bootstrap-forms-using-react-js/) ##### React and ClojureScript * [The Future of JavaScript MVC Frameworks](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs) * [The Case for React.js and ClojureScript](http://murilopereira.com/the-case-for-reactjs-and-clojurescript/) * [A Reagent Framework For Writing SPAs](https://github.com/Day8/re-frame) ##### React and CoffeeScript * [React & CoffeeScript](http://blog.vjeux.com/2013/javascript/react-coffeescript.html) * [React patterns - Mostly reasonable patterns for writing React in CoffeeScript](https://github.com/planningcenter/react-patterns) ##### React and Datatables * [React and Datatables](https://github.com/wyvernnot/react-datatables-example) ##### React and Haskell * [Animating Web UI with React and Haskell](http://joelburget.com/react-haskell/index.html) * [stackage-view, built with Yesod and GHCJS+React](https://github.com/fpco/stackage-view) * [TodoMVC example with Shade (Haste+React)](https://github.com/takeoutweight/shade-todomvc) * [react-haskell, to be used with Haste](https://hackage.haskell.org/package/react-haskell) ([blog post](http://joelburget.com/react-haskell/)) * [blaze-react, blaze-html style React bindings using GHCJS](https://github.com/meiersi/blaze-react) ([video tutorial](https://www.youtube.com/watch?v=4nTnC0t7pzY)) * [purescript-react bindings](https://github.com/purescript-contrib/purescript-react) ([example app](https://github.com/fujimura/purescript-react-example)) ##### React and Socket.IO * [Socket.IO integration example](https://gist.github.com/zpao/5686416) * [Socket.IO integration example inside of a single React component](https://gist.github.com/petehunt/5687230) * [Socket.IO integration employing separation of concerns](https://gist.github.com/petehunt/5687276) ##### Server-Client with React * [Server/Client With React, Part 1: Getting Started](http://eflorenzano.com/blog/2014/04/09/react-part-1-getting-started/) * [Server/Client With React, Part 2: The Build System](http://eflorenzano.com/blog/2014/04/10/react-part-2-build-system/) * [Server/Client With React, Part 3: Frontend Server](http://eflorenzano.com/blog/2014/04/11/react-part-3-frontend-server/) ##### Server Side rendering * [Super-basic example of how server rendering works](https://github.com/petehunt/react-server-rendering-example) * [Server Side Rendering for ReactJS](http://yanns.github.io/blog/2014/03/15/server-side-rendering-for-javascript-reactjs-framework/) * [React Server Rendering](https://github.com/mhart/react-server-example) * [JDK8 + Facebook React: Rendering single page apps on the server](http://augustl.com/blog/2014/jdk8_react_rendering_on_server/) * [Server-side React with PHP – part 1](http://www.phpied.com/server-side-react-with-php/) * [Server-side React with PHP – part 2](http://www.phpied.com/server-side-react-with-php-part-2/) * [Server-rendered React components in Rails](http://bensmithett.com/server-rendered-react-components-in-rails/) * [Server-rendered React + Flux in Rails](https://github.com/nambrot/rails-webpack-react-flux) * [Golang Isomorphic Hot Reloadable/React/Flummox/Css-Module Starter Kit](https://github.com/olebedev/go-starter-kit) * [Serverside rendering with React + Hapi](https://github.com/jedireza/hapi-react-views) * [Isomorphic React apps in PHP via dnode](http://ericescalante.com/2015/06/07/isomorphic/) ##### Compiling React Tutorials * [Webpack Howto by Pete Hunt](https://github.com/petehunt/webpack-howto) * [React Webpack Cookbook](https://github.com/christianalfoni/react-webpack-cookbook) * [AMD and CommonJS examples with Webpack](https://github.com/simonsmith/webpack-example) * [Integrating JSX live reload into your React workflow](http://gaearon.github.io/react-hot-loader/) * [React JS and a browserify workflow, part1](http://christianalfoni.github.io/javascript/2014/08/15/react-js-workflow.html) * [React JS and a browserify workflow, part2](http://christianalfoni.github.io/javascript/2014/10/30/react-js-workflow-part2.html) * [Choosing the correct packaging tool for React JS](http://christianalfoni.github.io/javascript/2014/08/29/choosing-the-correct-packaging-tool-for-react-js.html) ##### Debugging React * [Trace Logging with React](http://www.garysieling.com/blog/trace-logging-react) * [Reactotron: Control, monitor, and instrument](https://github.com/skellock/reactotron) ##### Authentication * [Adding authentication to your React Flux app](https://auth0.com/blog/2015/04/09/adding-authentication-to-your-react-flux-app/) * [Build a React Application with User Authentication](https://stormpath.com/blog/build-a-react-app-with-user-authentication/) ##### File Uploads * [Direct uploads to S3 with React, Rails, and Paperclip](http://blog.littleblimp.com/post/119230396893/direct-uploads-to-s3-with-react-rails-and) ##### API Integration * [react-flux-cosmicjs Data-driven react application connected to the Cosmic JS API](https://github.com/tonyspiro/react-flux-cosmicjs) #### React Tools ##### Boilerplates * [Create React App](https://github.com/facebookincubator/create-react-app) * [React App SDK - CLI tools and templates for authoring React apps with a single dev dependency and zero configurations](https://github.com/kriasoft/react-app) * [React Starter Kit — isomorphic web app boilerplate (Node.js, GraphQL, React, Babel, Webpack, CSS Modules, HMR)](https://github.com/kriasoft/react-starter-kit) * [ASP.NET Core Starter Kit (C#) — Frontend: React, Babel, PostCSS, CSS Modules + backend: .NET Core, C#](https://github.com/kriasoft/aspnet-starter-kit) * [ASP.NET Core Starter Kit (F#) — Frontend: React, Babel, PostCSS, CSS Modules + backend: .NET Core, F#](https://github.com/kriasoft/fsharp-starter-kit) * [React Redux Universal Hot Example](https://github.com/erikras/react-redux-universal-hot-example) * [React Slingshot - React + Redux with Babel, hot reloading, testing, linting and working example app](https://github.com/coryhouse/react-slingshot) * [este - Robust and comfortable dev stack for mobile/offline/frontend first isomorphic web apps](https://github.com/steida/este) * [frontend-boilerplate - webpack-react-redux-babel-autoprefixer-hmr-postcss-css-modules-rucksack-boilerplate](https://github.com/tj/frontend-boilerplate) * [react-engine - A composite render engine for isomorphic express apps](https://github.com/paypal/react-engine) * [react-webpack-node - Boilerplate for an universal/isomorphic React + Redux/alt Flux](https://github.com/choonkending/react-webpack-node) * [react-native-nw-react-calculator - Mobile, desktop and website Apps with the same code](https://github.com/benoitvallon/react-native-nw-react-calculator) * [StarHackIt - An ES6/ES7 full-stack starter kit with authentication and authorization code](https://github.com/FredericHeem/starhackit) * [react-cordova-boilerplate - TodoMVC example for React to build a Cordova application](https://github.com/unimonkiez/react-cordova-boilerplate) * [UniversalRelayBoilerplate - Boilerplate + examples for React Native (iOS, Android), React (isomorphic, Material-UI), Relay, GraphQL, JWT, Node.js, Apache Cassandra](https://github.com/codefoundries/UniversalRelayBoilerplate) * [react-boilerplate - A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.](http://reactboilerplate.com) * [Next.js - A minimalistic framework for server-rendered React applications](https://zeit.co/blog/next) ##### Routing * [react-router - A complete routing library for React](https://github.com/reactjs/react-router) ##### React Projects * [gatsby - Transform plain text into dynamic blogs and websites using React.js](https://github.com/gatsbyjs/gatsby) * [react-blessed - A react renderer for blessed terminal interface library](https://github.com/Yomguithereal/react-blessed) * [MJML - The only framework that makes responsive-email easy. Based on React](https://mjml.io) ##### Components * [React Component List](http://dvemac.github.io/react-component-list/) * [JS.coach - A catalog of React components](https://js.coach/) * [iReact: Fantastic React Components and Libraries!](http://ireact.cn/) * [Khan Academy React Components](http://khan.github.io/react-components/) * [VistarMedia Components](http://cmpnt.vistarmedia.com/) * [React Topcoat UI components](https://github.com/kjda/react-topui) * [react-material - Material design components written with React.js and React Style](https://github.com/SanderSpies/react-material) * [material-ui - A CSS Framework and a Set of React Components for Material Design](https://github.com/callemall/material-ui) * [react-google-login-component](https://github.com/kennetpostigo/react-google-login-component) * [react-facebook-login-component](https://github.com/kennetpostigo/react-facebook-login-component) * [react-component - A Collection of React UI Components](http://react-component.github.io/badgeboard/) * [Ant Design - An enterprise-class UI design language and React-based implementation](https://github.com/ant-design/ant-design) * [UXCore - A React UI Component Set living for enterprise backend application](https://github.com/uxcore/uxcore) * [react-desktop - OS X and Windows UI components built with React](https://github.com/gabrielbull/react-desktop) * [react-aim - Determine the cursor aim for triggering mouse events](https://github.com/gabrielbull/react-aim) * [react-touch - React photo viewer for mobile](https://github.com/petehunt/react-touch) * [griddle - A simple grid component for use with React](http://dynamictyped.github.io/Griddle/) * [react-grid - Data grid for React](https://github.com/prometheusresearch/react-grid) * [React-iCheck - iCheck components built with React. Highly customizable checkboxes and radio buttons](https://github.com/luqin/react-icheck) * [react-absolute-grid - An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React](https://github.com/jrowny/react-absolute-grid) * [react-async - Async rendering for React components](https://github.com/andreypopp/react-async) * [react-async-input - Inputs that behave properly with async set{State,Props} calls](https://github.com/grncdr/react-async-input) * [react-countup - A React component wrapper around CountUp.js](https://github.com/glennreyes/react-countup) * [react-mediaswitch - Choose your DOM based on media queries](https://github.com/matthewwithanm/react-mediaswitch) * [react-frame-component - Render your React app to an iFrame](https://github.com/ryanseddon/react-frame-component) * [react-gravatar - React component for rendering a gravatar profile image](https://github.com/KyleAMathews/react-gravatar) * [markdown-react - React Render for Standard Markdown](https://github.com/vjeux/markdown-react) * [react-component-gallery — React component for creating an evenly spaced components]( https://github.com/KyleAMathews/react-component-gallery) * [react-markdown-textarea - Component to create textareas for entering Markdown](https://github.com/KyleAMathews/react-markdown-textarea) * [react-markdown-area - Github flavored markdown editor with live preview](https://github.com/MattMcFarland/react-markdown-area) * [react-textarea-autosize - Textarea component for React which grows with content](https://github.com/andreypopp/react-textarea-autosize) * [react-spinner - Zero configuration loading spinner](https://github.com/chenglou/react-spinner) * [react-treeview - Easy, light, flexible tree view made with React](https://github.com/chenglou/react-treeview) * [react-tree-menu - A stateless tree menu component built with the Flux architecture in mind](https://github.com/MandarinConLaBarba/react-tree-menu) * [react-tween-state - React animation tween state](https://github.com/chenglou/react-tween-state) * [react-stripe-checkout - Easily load Stripe Checkout as a React component](https://github.com/azmenak/react-stripe-checkout) * [react-swipe - Brad Birdsall's swipe.js, as a React component](https://github.com/jed/react-swipe) * [react-smart-time-ago - Show relative "time ago" dates](https://github.com/KyleAMathews/react-smart-time-ago) * [react-autoupdate-time - Renders a