A collection of awesome things regarding the React ecosystem.
- React
- Redux
- MobX
- GraphQL
- Relay
- Apollo
- Videos
- Demo React Apps
- Real React Apps
- Contribution
JavaScript Library for building User Interfaces
- React Official Tutorial
- Using React in Visual Studio Code
- Scrimba - Learn React for free interactively
- FreeCodeCamp React Challenges
- React Cheatsheet
- React Patterns
- Setup Flow with React
- Develop a Live Project with React with Payment Integration & BarCode Scanner
- React Hooks
- Replacing Redux with React Hooks and Context
- React Hooks cheat sheet: Unlock solutions to common problems
- How to fetch data with React Hooks?
- Easy to understand React Hook recipes
- Awesome React Hooks
- Build a React chat app with Hooks, a pragmatic example
- TypeScript, React and Webpack
- JSX in TypeScript
- Cheatsheets for experienced React developers getting started with TypeScript
- React Optimizing Performance
- Introducing the React Profiler
- Optimizing React: Virtual DOM explained
- A Definitive Guide to Optimize Major Performance issues in React
- Twitter Lite and High Performance React Progressive Web Apps at Scale
- Using the React DevTools Profiler to Diagnose React App Performance Issues
- Top 5 Practices to Boost React Performance
- React is Slow, React is Fast: Optimizing react Apps in Practice
- Rendering large lists with react-window
- Reconciliation
- React Fiber Architecture
- Build your own React
- Inside Fiber: In-depth overview of the new reconciliation algorithm in React
- Entire React code base explanation by visual block schemes
- ✅ create-react-app - Set up a modern Web app by running one command
- react-starter-kit - Isomorphic Web app boilerplate
- react-devtools - Inspection of React component hierarchy in the Chrome and Firefox Developer Tools
- react-hot-loader - Tweak React components in real time
- react-loadable - A higher order component for loading components with promises
- loadable-components - React code splitting made easy
- reactotron - A desktop app for inspecting your React and React Native projects
- ✅ storybook - UI component dev & test
- docz - Zero Config, live-reloading documentation with Markdown + JSX
- react-styleguidist - Isolated React component development environment with a living style guide
- react-cosmos - Dev tool for creating reusable React components
- ✅ eslint-plugin-react - React specific linting rules for ESLint
- ✅ eslint-plugin-jsx-a11y - Static AST checker for a11y rules on JSX elements
- react-axe - Accessibility auditing for React applications
- codesandbox - An online IDE for rapid React development with integrated React DevTools.
- DataFormsJS JSX Loader - Small JavaScript Compiler for quickly converting JSX to JS directly on a web page
- ✅ Why Did You Render - Monkey patches React to notify you about avoidable re-renders.
- next.js - The React Framework
- gatsby.js - Free and open source framework based on React
- react-admin - Frontend Framework for building B2B applications on top of REST/GraphQL APIs
- ✅ styled-components - Visual primitives for the component age
- emotion - Library designed for writing CSS styles with JavaScript
- radium - A toolchain for React component styling
- jss - Authoring tool for CSS
- aphrodite - Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation
- ✅ react-router - Declarative routing for React
- navi - Declarative, asynchronous routing for React
- curi - JavaScript router for single-page applications
- reach - Next Generation Routing for React
- universal-router - A simple middleware-style router for isomorphic JavaScript web apps
- material-ui - React components for faster and easier web development
- ant-design - A design system with values of Nature and Determinacy
- blueprint - A React-based UI toolkit for the webs
- semantic-ui-react - The official Semantic-UI-React integration
- evergreen - Evergreen React UI Framework by Segment
- grommet - a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package
- chakra-ui - Simple, Modular & Accessible UI Components for your React Applications
- rebass - React primitive UI components built with styled-system
- react-fontawesome - Font Awesome 5 component library for React
- rsuite - A suite of React components
- atlaskit - Atlassian's official UI library, built according to the Atlassian Design Guidelines.
- baseweb - Base Web is a foundation for initiating, evolving, and unifying web products.
- primereact - A complete UI Framework for React with 50+ components featuring material, bootstrap and custom themes.
- elastic ui framework - The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic.
- react-select - The Select Component for React
- react-beautiful-dnd - Beautiful and accessible drag and drop for lists with React
- react-dnd - Drag and Drop for React
- react-grid-layout - A draggable and resizable grid layout with responsive breakpoints
- react-draggable - React draggable component
- react-table - A lightweight, fast and extendable datagrid for React
- react-query - Performant and powerful data synchronization for React
- react-resizable-and-movable - A resizable and draggable component for React
- react-resizable - A simple React component that is resizable with a handle
- react-resizable-box - A resizable component for React
- react-dates - An easily internationalizable, mobile-friendly datepicker library for the web
- react-datepicker - ReactJS Datepicker
- react-list - A versatile infinite scroll React component
- react-intl - Internationalize React apps
- react-i18next - Internationalization for React done right
- react-hotkeys - Declarative hotkey and focus area management for React
- react-keydown - Lightweight keydown wrapper for React components
- react-joyride - Create guided tours for your apps
- react-virtualized - React components for efficiently rendering large lists and tabular data
- react-window - React components for efficiently rendering large lists and tabular data
- react-text-mask - Input mask for React
- react-loading-skeleton - Create skeleton screens that automatically adapt to your app
- react-spinkit - A collection of loading indicators animated with CSS for React
- qrcode.react - QR component for use with React
- react-archer - Draw arrows between React elements
- react-parallax-tilt - Easily apply tilt hover effect on React components
- react-spring - Spring-physics based animation library for React applications.
- framer-motion - A React library to power production-ready animations.
- ink - React for interactive command-line apps
- jest - Delightful JavaScript Testing Framework
- enzyme - JavaScript Testing utilities for React
- react-testing-library - Simple and complete React DOM testing utilities
- react-hooks-testing-library - React hooks testing utilities that encourage good testing practices
- majestic - Zero config GUI for Jest
- react-responsive - Media queries in react for responsive design
- Elemental - A UI Toolkit for React.js Websites and Apps
- Preact: Fast 3kb React alternative with the same ES6 API.
- react-icons - svg react icons of popular icon packs
- AtlasKit - Atlassian's React UI library
- Slate - A completely customizable framework for building rich text editors.
- react-helmet - A document head manager for React
- Draft.js - A React framework for building text editors
- Reapop - A React & Redux notifications system
- react-instantsearch - Lightning-fast search for React and React Native applications, by Algolia
- uppy - The next open source file uploader for web browsers
- react-motion - A spring that solves your animation problems
- hookstate - Modern, very fast and extendable state management for React that is based on hooks
- ngReact - React Components in Angular
- react-events - Declarative managed event bindings for react components
- reactdown - Write React components using markdown syntax
- jreact - React on server-side Java (with Rhino or Nashorn)
- React.hiccup - A complete replacement for JSX written in sweet.js
- reactfire - ReactJS mixin for easy Firebase integration
- firedux - Firebase + Redux for ReactJS
- react-dropzone - Simple HTML5 drag-drop zone with React.js.
- React 360 - Create exciting 360 and VR experiences using React
- Viro React - Platform for rapidly building AR/VR applications using React Native
- React Forms
- react-formal - Better form validation and value management for React, Provides minimal wiring
- react-forms - Forms library for React
- valuelink - full-featured two-way data binding with extended React links
- 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
- plexus-form - A dynamic form component for react using JSON-Schema
- tcomb-form - UI library for developing forms writing less code
- formsy-react - A form input builder and validator for React JS
- Learn Raw React: Ridiculously Simple Forms
- Winterfell - Generate complex, validated and extendable JSON-based forms in React
- Redux-Autoform - Create Redux-Forms dynamically out of metadata
- uniforms - Bunch of React components and helpers to easily generate and validate forms
- formik - Forms in React, without tears
- NeoForm – Modular HOCs for form state management and validation
- react-jsonschema-form – A React component for building Web forms from JSON Schema
- List View Select - A Toggleable select box for React Native with native components
- Final Form 🏁
- formland - A simple, super-flexible, extensible config based form generator
- react-reactive-form - Angular like reactive forms in React
- unform - ReactJS form library to create uncontrolled form structures with nested fields, validations and much more!
- react-hook-form - Performant, flexible and extensible forms with easy to use validation
- react-autocomplete by @rackt - WAI-ARIA compliant React autocomplete
- react-autosuggest by @moroshko - WAI-ARIA compliant React autosuggest component
- react-autocomplete by @eliseumds- Just tasting some ReactJS + RxJS
- react-autocomplete by @prometheusresearch - Autocomplete widget based on React
- instatype by @gragland - Simple react autocomplete component
- downshift - 🏎 Primitives to build simple, flexible, WAI-ARIA compliant enhanced input React components
- React Bootstrap Typeahead - A React-based typeahead that relies on Bootstrap for styling and was originally inspired by Twitter's typeahead.js.
- react-art - React Bridge to the ART Drawing Library
- react-canvas - High performance rendering for React components
- react-famous - Complex 3D animations UI at 60 FPS with Famo.us
- react-kinetic - HTML5 Canvas via KineticJS using React
- react-svg-morph - morph your svg components one into another
- react-hooks-svgdrawing - SVG Drawing with React hooks
- react-svg-pan-zoom - A React component that adds pan and zoom features to SVG.
- 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
- react-resolver - Isomorphic library to recursively lazy-load data for React components
- freezer-js - Lightweight and reactive immutable data structure for React
- MobX - Simple, scalable state management
- baobab - JavaScript persistent and optionally immutable data tree with cursors
- baobab-react - React integration for Baobab
- immstruct - Immutable data structures with history for top-to-bottom properties in component based libraries like React
- seamless-immutable - Immutable data structures for JavaScript which are backwards-compatible with normal JS Arrays and Objects
- tydel - Typed Models and Collections, with React bindings
- extendable-immutable - Extend any Immutable.js data structure
- statty - A tiny and unobtrusive state management library for React and Preact apps
- Hydux - An Elm-Like state manager for React with "batteries included"
- ReSub - A library for writing better React components and data stores
- ProppyJS - A tiny library for functional props composition
- WatermelonDB - 🍉 Next-gen database for powerful React and React Native apps that scales to 10,000s of records and remains fast
- RxDB - A realtime Database for JavaScript Applications
- Effector — Fast and powerful reactive state manager. Lets you write simple, fast and type safe code and manage reactive state with ease.
- reactn - React, but with built-in global state management
- immer - Create the next immutable state by mutating the current one
- react-googlemaps - React interface to Google maps
- react-maps - A map component for React
- react-google-maps - React.js Google Maps integration component
- react-gmaps - A Google Maps component for React.js
- react-map-gl - A React wrapper for MapboxGL-js plus overlay API
- google-map-react - Isomorphic google map React component
- react-mapbox-gl - A mapbox-gl-js wrapper to make the API react friendly
- google-maps-react - A declarative Google Map React component using React, lazy-loading dependencies, current-location finder and a test-driven approach by the Fullstack React team.
- react-leaflet - React components for Leaflet maps
- react-geo - A set of geo-related components using react, antd, and ol
- pigeon-maps - ReactJS maps without external dependencies
- DevExtreme React Chart - High-performance plugin-based React chart for Bootstrap and Material Design
- react-chartjs - Common react charting components using chart.js
- react-stockcharts - Highly customizable stock charts with ReactJS and d3
- Number Picture - Low-level building blocks for constructing animated visualizations with React & D3.
- Victory - A collection of composable React components for building interactive data visualizations
- Recharts - A charting library built on D3 with an awesome declarative API
- React-ApexCharts - React component for ApexCharts (An Interactive SVG Chart Library)
- reaviz - React Data Visualization Library based on D3.js
- react-vis - A React visualization library designed with the following principles in mind: React-friendly, high-level and customizable, expressive, and industry-strong.
- nivo - It provides a rich set of data visualization components, built on top of the D3 and React libraries.
- vx - A collection of reusable low-level visualization components. It combines the power of D3 to generate your visualization with the benefits of React for updating the DOM.
- echarts-for-react - A very simple ECharts wrapper for React.
- Chartify - React plugin for building charts using CSS.
- Semiotic - A data visualization framework combining React and D3.
- [react-muze - React wrapper for muze (free data visualization library for creating exploratory data visualizations in browser, using WebAssembly)](https://github.com/chartshq/react-muze)
Predictable State Container for JavaScript Apps
- react-redux - Official React bindings for Redux
- redux-devtools - DevTools for Redux with hot reloading, action replay, and customizable UI
- redux-toolkit - The official, opinionated, batteries-included toolset for efficient Redux development
- redux-form - A Higher Order Component using react-redux to keep form state
- redux-thunk - Thunk middleware for redux
- redux-logger - Logger middleware for redux
- reselect - Selector library for Redux
- normalizr - Normalizes nested JSON according to a schema
- redux-saga - An alternative side effect model for Redux apps
- redux-data-fx - Declarative Side Effects for Redux
- redux-observable - RxJS middleware for Redux
- redux-analytics - Analytics middleware for Redux
- redux-undo - Higher order reducer to add undo/redo functionality to redux state containers
- redux-search - Redux bindings for client-side search
- redux-mock-store - A mock store for your testing your redux async action creators and middleware
- redux-immutable - Create an equivalent function of Redux combineReducers that works with Immutable.js state
- redux-react-i18n - An i18n solution for redux/react
- R16N - A redux/react I18n solution
- redux-actiontyper - Helper to create less verbose action types for Redux
- redux-state-validator - A simple redux middleware to validate redux state values and object types using JSON Schema
- redux-persist - Persist and rehydrate a redux store
- Building Applications with React and Redux in ES6
- Getting Started with Redux
- Building React Applications with Idiomatic Redux
- Redux Tutorial
- Getting Started with React, Redux and Immutable: a Test-Driven Tutorial: Part 1
- Getting Started with React, Redux and Immutable: a Test-Driven Tutorial: Part 2
- Full-Stack Redux Tutorial
- Server-Side Rendering with Redux and React-Router
- Deep Introduction to Redux
- Unit Testing Redux Apps
- Secure Your React and Redux App with JWT Authentication
- Build an Image Gallery Using React, Redux and redux-saga
- A simplified approach to calling APIs with redux
- React Redux based blood donor demo application
- LearnCode.academy Redux Tutorials Series
- Practical Redux
- A Complete React Redux Tutorial for Beginners
Simple, scalable state management for JavaScript Apps
- Ten minute introduction to MobX and React
- Manage Complex State in React Apps with MobX
- Refactor your application from Redux to MobX
- Redux or MobX: An attempt to dissolve the Confusion
Query Language
- GraphCMS - The GraphQL Headless CMS
- GraphQL CMS
- Mongoose schema To GraphQL
- GraphQL bridge to REST API
- GraphQL Playground - GraphQL IDE for better development workflows
- GraphQL Introduction
- First Thoughts on GraphQL
- Modeling Queries in a GraphQL Like Way
- Thin and Graphy
- GraphQL Overview - Getting Started with GraphQL and Node.js
- Writing a Basic API with GraphQL
- Building a GraphQL Server with Node.js and SQL
- GraphQL Tour: Variables
- How to Graphql - The Fullstack Tutorial for GraphQL
- graphql-js - A reference implementation of GraphQL for JavaScript
- react-transmit - Relay-inspired library based on JavaScript Promises
- graphql-ruby - Ruby implementation of Facebook's GraphQL
- graphql-java - GraphQL Java implementation
- sangria - Scala GraphQL client and server library
- graphql-php - A PHP port of GraphQL reference implementation
- graphene - GraphQL in Python made simple
- graphqllib - GraphQL implementation for Python
- graphql-dotnet - GraphQL for .NET
- graphql-go - GraphQL for Go/Golang
- express-graphql - Create a GraphQL HTTP server with Express
- graphql-yoga - Easiest way to run a GraphQL server
- Hasura - Instant Realtime GraphQL on Postgres
- Prisma - a performant open-source GraphQL ORM-like * layer doing the heavy lifting in your GraphQL server.
- graphql-bookshelf - Some help defining GraphQL schema around BookshelfJS models
- GraphpostgresQL - GraphQL for PostgreSQL
- graffiti - Node.js GraphQL ORM
- sql-to-graphql - Generate a GraphQL API based on your SQL database structure
- graphql-sequelize - GraphQL & Relay for MySQL & Postgres via Sequelize
Data-Driven React Applications
- official Relay Getting Started
- Relay for Visual Learners
- Getting Started with Relay
- Relay and Routing
- graphql-relay-js - A library to help construct a graphql-js server supporting react-relay
- react-router-relay - Relay integration for React Router
- relay-local-schema - Use Relay without a GraphQL server
- relay-codemod - Codemod scripts based for on jsodeshift to update Relay APIs
Data stack based on GraphQL
-
Pete Hunt: React: Rethinking best practices - JSConf EU 2013
-
Pete Hunt: React: Rethinking Best Practices (updated) - JSConf.Asia 2013
-
Tom Occhino and Jordan Walke: JS Apps at Facebook - JSConfUS 2013
-
Pete Hunt: Be Predictable, Not Correct - Mountain West JavaScript 2014
-
Bill Fisher and Jing Chen: React and Flux - NewCircle Training 2014
-
Sebastian Markbage: Minimal API Surface Area - JSConf EU 2014
-
Avik Chaudhuri: JavaScript Testing and Static Type Systems at Scale - Scale 2014
-
React Native & Relay: Bringing Modern Web Techniques to Mobile - f8 2015)
-
Citrusbyte Presents GraphQL: A Horizontal Platform with Nick Schrock
-
Laney Kuenzel: Mutations and Subscriptions in Relay - JSConf 2015
-
React Today and Tomorrow and 90% Cleaner React With Hooks - React Conf 2018
- hackernews-react-graphql - Hacker News clone rewritten with universal JavaScript, using React and GraphQL
- react-reduction - Free Admin Template Built with React and Bootstrap4
- reactjs-tmdb-app - Responsive React The Movie Database App
- react-shopping-cart - Simple ecommerce cart application built with React Redux
- kibana - Your window into the Elastic Stack
- firefox debugger - The Firefox debugger that works anywhere
- spectrum – Simple, powerful online communities
- mattermost - Open source Slack alternative
- overreacted - Personal blog by Dan Abramov
- winamp2-js - Winamp 2 reimplemented for the browser
- dnote - A command line notebook with multi-device sync and web interface
This list started as personal collection of interesting things about React. At the time it started React was in beta, there was special script to transform JSX to JS and even Flux was not yet published. React is mainstream now, lots of things happened. Please, do not try to use this list as advertisement board or place for public push of your experiments. Only fully free resources here, please. Your contributions and suggestions are heartily♡ welcome, though. (✿◠‿◠)
