diff --git a/.gitignore b/.gitignore index 362ad4f1..a9a5aecf 100644 --- a/.gitignore +++ b/.gitignore @@ -1,26 +1 @@ -# Logs -logs -*.log - -# Runtime data -pids -*.pid -*.seed - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage - -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# Compiled binary addons (http://nodejs.org/api/addons.html) -build/Release - -# Dependency directory -node_modules - -# Users Environment Variables -.lock-wscript \ No newline at end of file +tmp diff --git a/README.md b/README.md index cef0e153..f9b211c3 100644 --- a/README.md +++ b/README.md @@ -1,691 +1,251 @@ -## Awesome React - -A collection of awesome React tools, resources, videos and shiny things. - -- [Resources](#resources) - - [General Resources](#general-resources) - - [React Online Playground](#react-online-playground) - - [React Community](#react-community) - - [Tutorials](#tutorials) - - [General Tutorials](#general-tutorials) - - [Writing React Components](#writing-react-components) - - [Writing Isomorphic Apps](#writing-isomorphic-apps) - - [JSX](#jsx) - - [Flux Tutorials](#flux-tutorials) - - [Building Robust Web Apps with React](#building-robust-web-apps-with-reingact) - - [Scotch.io React tutorials series](#scotchio-react-tutorials-series) - - [React styling](#react-styling) - - [React and Backbone](#react-and-backbone) - - [React and Angular](#react-and-angular) - - [React and Bootstrap](#react-and-bootstrap) - - [React and ClojureScript](#react-and-clojurescript) - - [Server-Client with React](#server-client-with-react) - - [Server Side Rendering](#server-side-rendering) - - [Compiling React Tutorials](#compiling-react-tutorials) - - [Testing React Tutorials](#testing-react-tutorials) - - [Data Models for React](#data-models-for-react) - - [Debugging React](#debugging-react) - - [Approach Explanation](#approach-explanation) - - [React Internals](#react-internals) -- [Tools](#tools) - - [Flux](#flux) - - [Boilerplates](#boilerplates) - - [Components](#components) - - [Libraries](#libraries) - - [Integration](#integration) - - [Routing](#routing) - - [Unit Testing](#unit-testing) - - [Graphics](#graphics) - - [Model Libraries](#model-libraries) - - [Data Managing](#data-managing) - - [Development Environment](#development-environment) - - [Generating](#generating) - - [Compiling](#compiling) -- [Videos](#videos) - - [Video from Confs](#video-from-confs) - - [Video Tutorials](#video-tutorials) -- [Books](#books) -- [Demos](#demos) -- [Examples](#examples) -- [Other Awesome Lists](#other-awesome-lists) +# Awesome React [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) + +A collection of awesome things regarding the React ecosystem. + +- [React](#react) + - [React General Resources](#react-general-resources) + - [React Tutorials](#react-tutorials) + - [React Frameworks](#react-frameworks) + - [React Component Libraries](#react-component-libraries) + - [React State Management and Data Fetching](#react-state-management-and-data-fetching) + - [React Styling](#react-styling) + - [React Routing](#react-routing) + - [React Development Tools](#react-development-tools) + - [React Libraries](#react-libraries) + - [React Testing](#react-testing) + - [React Awesome Components](#react-awesome-components) + - [React Components Sandboxes](#react-components-sandboxes) + - [React Forms](#react-forms) + - [React Tables and Grids](#react-tables-and-grids) + - [React Maps](#react-maps) + - [React Charts](#react-charts) + - [React Renderers](#react-renderers) + - [React Internationalization](#react-internationalization) + - [React Graphics and Animations](#react-graphics-and-animations) + - [React Integration](#react-integration) + - [React Real Apps](#react-real-apps) +- [React Native](#react-native) + - [React Native General Resources](#react-native-general-resources) + - [React Native Navigation](#react-native-navigation) + - [React Native Awesome Components](#react-native-awesome-components) + - [React Native Libraries](#react-native-libraries) - [Contribution](#contribution) +### React + +#### React General Resources + +- [React Official Website](https://react.dev/) +- [React GitHub](https://github.com/facebook/react) +- [Reactiflux Discord Channel](http://www.reactiflux.com/) +- [React Community](https://react.dev/community) +- [React Conferences](https://react.dev/community/conferences) +- [React CodeSandbox Playground](https://codesandbox.io/s/new) + +#### React Tutorials + +- [React Official Tutorial](https://react.dev/learn) +- [Using React in Visual Studio Code](https://code.visualstudio.com/docs/nodejs/reactjs-tutorial) +- [React Interview Questions & Answers](https://github.com/sudheerj/reactjs-interview-questions) +- [Design patterns and Component patterns for building powerful Web Apps](https://www.patterns.dev/) +- [A simple, scalable, and powerful architecture for building production ready React applications](https://github.com/alan2207/bulletproof-react) +- [Cheatsheets for experienced React developers getting started with TypeScript](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet) + +#### React Frameworks + +- [next](https://github.com/vercel/next.js) - The React Framework +- [gatsby](https://github.com/gatsbyjs/gatsby) - Build modern websites with React +- [remix](https://github.com/remix-run/remix) - Full stack web Framework that lets you focus on the user interface +- [react-admin](https://github.com/marmelab/react-admin) - A frontend Framework for building B2B applications +- [refine](https://github.com/refinedev/refine) - Build your React-based CRUD applications, without constraints +- [vike](https://github.com/vikejs/vike) - The Modular Framework - Next.js & Nuxt alternative + +#### React Component Libraries + +- [shadcn-ui](https://github.com/shadcn-ui/ui) - Beautifully designed components built using Radix UI and Tailwind CSS +- [ant-design](https://github.com/ant-design/ant-design) - An enterprise-class UI design language and React UI library +- [material-ui](https://github.com/mui/material-ui) - Ready-to-use foundational React components +- [chakra-ui](https://github.com/chakra-ui/chakra-ui) - Component system for building SaaS products with speed +- [react-bits](https://github.com/DavidHDev/react-bits) - A collection of animated, interactive & fully customizable React components +- [mantine](https://github.com/mantinedev/mantine) - Fully featured React components library +- [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) - Bootstrap components built with React +- [fluentui](https://github.com/microsoft/fluentui) - Microsoft's Fluent UI +- [framework7](https://github.com/framework7io/framework7) - Full featured HTML framework for building iOS & Android apps +- [ariakit](https://github.com/ariakit/ariakit) - Toolkit for building accessible web apps with React +- [react-email](https://github.com/resend/react-email) - Unstyled components for creating beautiful emails +- [8bitcn-ui](https://github.com/TheOrcDev/8bitcn-ui) - A retro 8-bit themed React component library built on top of shadcn +- [headlessui](https://github.com/tailwindlabs/headlessui) - Completely unstyled, accessible UI components for React +- [ruixen-ui](https://github.com/ruixenui/ruixen.com) - Modern, lightweight React component library with elegant design + +#### React State Management and Data Fetching + +- [redux](https://github.com/reduxjs/redux) - Predictable State Container for JavaScript Apps +- [mobx](https://github.com/mobxjs/mobx) - Simple, scalable state management +- [zustand](https://github.com/pmndrs/zustand) - Bear necessities for state management in React +- [tanstack-query](https://github.com/TanStack/query) - Powerful asynchronous state management +- [swr](https://github.com/vercel/swr) - React Hooks for Data Fetching +- [apollo-client](https://github.com/apollographql/apollo-client) - A fully-featured, production ready caching GraphQL client +- [relay](https://github.com/facebook/relay) - A framework for building data-driven React applications +- [jotai](https://github.com/pmndrs/jotai) - Primitive and flexible state management for React +- [xstate](https://github.com/statelyai/xstate) - State machines and statecharts for the modern web +- [effector](https://github.com/zerobias/effector) - Business logic with ease +- [immer](https://github.com/immerjs/immer) - Create the next immutable state by mutating the current one +- [immutable-js](https://github.com/immutable-js/immutable-js) - Immutable persistent data collections for Javascript +- [rxdb](https://github.com/pubkey/rxdb) - A fast, offline-first, reactive database for JavaScript Applications + +#### React Styling + +- [styled-components](https://github.com/styled-components/styled-components) - Visual primitives for the component age +- [emotion](https://github.com/emotion-js/emotion) - CSS-in-JS library designed for high performance style composition +- [vanilla-extract](https://github.com/seek-oss/vanilla-extract) - Zero-runtime Stylesheets-in-TypeScript + +#### React Routing + +- [react-router](https://github.com/remix-run/react-router) - Declarative routing for React +- [tanstack-router](https://github.com/TanStack/router) - Type-safe router with built-in caching & URL state management + +#### React Development Tools + +- [vite](https://github.com/vitejs/vite) - Next Generation Frontend Tooling +- [parcel](https://github.com/parcel-bundler/parcel) - The zero configuration build tool for the web +- [reactotron](https://github.com/skellock/reactotron) - A desktop app for inspecting your React and React Native projects +- [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) - React specific linting rules for ESLint +- [why-did-you-render](https://github.com/welldone-software/why-did-you-render) - Monkey patches React to notify you about avoidable re-renders + +#### React Libraries + +- [preact](https://github.com/preactjs/preact) - Fast React alternative with the same modern API +- [floating-ui](https://github.com/floating-ui/floating-ui) - Toolkit to create floating elements +- [loadable-components](https://github.com/gregberge/loadable-components) - The recommended Code Splitting library for React +- [react-uploady](https://github.com/rpldy/react-uploady) - Modern file-upload components & hooks for React +- [downshift](https://github.com/downshift-js/downshift) - React autocomplete, combobox or select dropdown components +- [react-error-boundary](https://github.com/bvaughn/react-error-boundary) - A React error boundary component that lets you catch errors + +#### React Testing + +- [jest](https://github.com/facebook/jest) - Delightful JavaScript Testing +- [react-testing-library](https://github.com/testing-library/react-testing-library) - Simple and complete React DOM testing utilities +- [cypress](https://github.com/cypress-io/cypress) - Fast, easy and reliable testing for anything that runs in a browser +- [playwright](https://github.com/microsoft/playwright) - A framework for Web Testing and Automation + +#### React Awesome Components + +- [Awesome React Components](https://github.com/brillout/awesome-react-components) +- [react-select](https://github.com/JedWatson/react-select) - The Select Component for React +- [react-big-calendar](https://github.com/jquense/react-big-calendar) - Calendar component +- [react-datepicker](https://github.com/Hacker0x01/react-datepicker/) - A simple and reusable datepicker component for React +- [react-qrcode](https://github.com/zpao/qrcode.react) - QR component for use with React +- [react-archer](https://github.com/pierpo/react-archer) - Draw arrows between React elements +- [react-complex-tree](https://github.com/lukasbach/react-complex-tree) - Unopinionated Accessible Tree +- [react-insta-stories](https://github.com/mohitk05/react-insta-stories) - A React component for Instagram like stories +- [react-hot-toast](https://github.com/timolins/react-hot-toast) - Lightweight and customizable toast notifications for React +- [swiper](https://github.com/nolimits4web/swiper) - Most modern mobile touch slider +- [keen-slider](https://github.com/rcbyr/keen-slider) - The Touch slider carousel +- [heart-switch](https://github.com/anatoliygatt/heart-switch) - A heart-shaped toggle switch component for React +- [kbar](https://github.com/timc1/kbar) - Fast, portable, and extensible cmd+k interface for your site +- [tagify](https://github.com/yairEO/tagify) - Lightweight, efficient Tags input component +- [puck](https://github.com/measuredco/puck) - The visual editor for React +- [json-edit-react](https://github.com/CarlosNZ/json-edit-react) - Highly configurable JSON/Object tree editor/viewer + +#### React Components Sandboxes + +- [storybook](https://github.com/storybookjs/storybook) - Storybook is a frontend workshop for building UI components and pages in isolation +- [react-cosmos](https://github.com/react-cosmos/react-cosmos) - Dev tool for creating reusable React components +- [bit](https://github.com/teambit/bit) - A build system for development of composable software + +#### React Forms + +- [react-hook-form](https://github.com/react-hook-form/react-hook-form) - React Hooks for form state management and validation +- [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form) - A React component for building Web forms from JSON Schema +- [formily](https://github.com/alibaba/formily) - Alibaba Group Unified Form Solution +- [tanstack-form](https://github.com/TanStack/form) - Headless, performant, and type-safe form state management -### Resources - -#### General Resources -* [React Official Site](http://facebook.github.io/react/) -* [React GitHub](https://github.com/facebook/react) -* [React Wiki](https://github.com/facebook/react/wiki) -* [React npm module](https://www.npmjs.org/package/react) -* [React Tools npm module](https://www.npmjs.org/package/react-tools) -* [React TodoMVC](http://todomvc.com/examples/react/) - -#### React Online Playground -* [React JSFiddle Integration with JSX](http://jsfiddle.net/vjeux/kb3gN/) -* [React JSFiddle Integration without JSX](http://jsfiddle.net/vjeux/VkebS/) -* [React CodePen Integration with JSX](http://codepen.io/enaqx/pen/cuIxm) -* [React CodePen Integration without JSX](http://codepen.io/enaqx/pen/aAcdk) - -#### React Community -* [React StackOverflow](http://stackoverflow.com/questions/tagged/reactjs) -* [React GoogleGroup](https://groups.google.com/forum/#!forum/reactjs) -* [React Twitter](https://twitter.com/reactjs) -* [React #reactjs Twitter](https://twitter.com/search?q=%23reactjs) -* [React SubReddit](http://www.reddit.com/r/reactjs/) -* IRC network in `#reactjs` channel on freenode - -#### Tutorials - -##### General Tutorials -* [React Tutorial](http://facebook.github.io/react/docs/tutorial.html) -* [React One Hour](https://github.com/petehunt/react-one-hour-email/commits/master) -* [Pro Javascript React Tutorial](http://webdesignporto.com/react-js-an-interactive-tutorial-to-get-started/) -* [Medium React Tutorials](https://medium.com/react-tutorials) -* [Intro to the React Framework](http://code.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660) -* [React beginner tutorial: implementing the board game Go](http://cjlarose.com/2014/01/09/react-board-game-tutorial.html) -* [Trying Out ReactJS With the Marvel API](http://ryanlanciaux.github.io/blog/2014/05/26/trying-out-reactjs-with-the-marvel-api/) -* [Yo in React](http://davidandsuzi.com/yo-in-react/) -* [Creating Chrome Extensions with React](http://brandontilley.com/2014/02/24/creating-chrome-extensions-with-react.html) -* [Using ReactJS and KendoUI Together](http://ifandelse.com/using-reactjs-and-kendoui-together/) -* [Building dynamic forms with Facebook React](http://www.dustingetz.com/2014/02/18/react-dynamic-forms.html) -* [Intro to React livecoding workshop](http://www.dustingetz.com/2014/03/16/react-into-workshop-notes.html) -* [Tooltip mixin for React](https://caurea.org/2014/06/12/tooltip-mixin-for-react.html) -* [React Tutorial: Two way data binding](http://voidcanvas.com/react-tutorial-two-way-data-binding/) -* [React PhoneCat: Rewriting the AngularJS Tutorial App in React](http://jgebhardt.github.io/blog/react-phonecat/) -* [A React.js case study](http://blog.krawaller.se/posts/a-react-js-case-study/) -* [Simplifying Code with React](http://www.kevindangoor.com/2014/05/simplifying-code-with-react/) -* [The New React-based Brackets Project Tree](http://www.kevindangoor.com/2014/09/intro-to-the-new-brackets-project-tree/) -* [A React.js case study follow-up](http://blog.krawaller.se/posts/a-react-js-case-study-follow-up/) -* [Scroll Position with React](http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html) -* [React Style](https://andreypopp.com/posts/2014-08-06-react-style.html) -* [Component Interop With React And Custom Elements](http://addyosmani.com/blog/component-interop-with-react-and-custom-elements/) -* [Getting Started with React.js: Creating Material Design Components](http://www.syncano.com/getting-started-reactjs-tutorial/) -* [Building a board game with React.js](http://jjt.io/2014/07/30/building-a-board-game-with-react-js/) -* [ReactJS and Socket.IO Chat Application](http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/) -* [Using Firebase with ReactJS](https://www.firebase.com/blog/2014-05-01-using-firebase-with-react.html) -* [5 Practical Examples For Learning The React Framework](http://tutorialzine.com/2014/07/5-practical-examples-for-learning-facebooks-react-framework/) -* [Working with jQuery UI Dialog and ReactJS components](http://sterling.ghost.io/working-with-jqueryui-and-reactjs-components/) - -##### Writing React Components -* [Reliable web components with React.js and ReactiveElements](http://pixelscommander.com/en/interactive-revolution/web-components-and-react-js-with-reactiveelements/) -* [A Sortable List Component in React utilizing the HTML5 Drag & Drop API](http://webcloud.se/sortable-list-component-react-js/) -* [A Truly Reactive Sortable Component](http://webcloud.se/truly-reactive-sortable-component/) -* [Dealing with asynchronous code in React components](https://caurea.org/2014/02/04/dealing-with-asynchronous-code-in-react-components.html) -* [Component-based Web Apps with React](http://www.sitepoint.com/component-based-web-apps-react/) -* [Reactive Table](http://www.phpied.com/reactive-table/) -* [ReActiveTable bookmarklet](http://www.phpied.com/reactivetable-bookmarklet/) -* [Set State in Callbacks in React](http://jaketrent.com/post/set-state-in-callbacks-in-react/) -* [Send Props to Children in React](http://jaketrent.com/post/send-props-to-children-react/) -* [Creating Modular View Components with React and Grunt](http://modernweb.com/2014/03/17/creating-modular-view-components-with-react-and-grunt/) -* [React Components for Cat Videos](http://davidandsuzi.com/react-components-for-cat-videos/) - -##### Writing Isomorphic Apps -* [Isomorphic JavaScript: The Future of Web Apps](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/) -* [Isomorphic apps with Backbone.js and React](http://dev.alexishevia.com/2014/08/isomorphic-apps-with-backbonejs-and.html) -* [From AngularJS to React: The Isomorphic Way](http://blog.risingstack.com/from-angularjs-to-react-the-isomorphic-way/) -* [Going Isomorphic with React](http://bensmithett.github.io/going-isomorphic-with-react/#/) -* [newforms - Isomorphic form-handling for React](https://github.com/insin/newforms) -* [newforms-examples - Examples repository for newforms](https://github.com/insin/newforms-examples) -* [isomorphic-blog-react - Proof of concept and experiment rendering blog isomorphically using React](https://github.com/jonykrause/isomorphic-blog-react) -* [Swarm.js+React — real-time, offline-ready Holy Grail web apps](http://swarmjs.github.io/articles/todomvc/) -* [Creating Isomorphic apps with React and Node.js](http://www.htmlxprs.com/post/20/creating-isomorphic-apps-with-react-and-nodejs) - -##### JSX -* [JSX Specification](http://facebook.github.io/jsx/) -* [JSX in Depth](http://facebook.github.io/react/docs/jsx-in-depth.html) -* [JSX extensions to Mozilla AST Format](https://github.com/facebook/jsx/blob/master/AST.md) -* [Compiling JSX with Sweet.js using Readtables](http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables) -* [JSX for the real DOM](http://blog.vjeux.com/2013/javascript/jsx-for-the-real-dom.html) -* [JSX: E4X The Good Parts](http://blog.vjeux.com/2013/javascript/jsx-e4x-the-good-parts.html) -* [Testing Flux Applications](http://facebook.github.io/react/blog/2014/09/24/testing-flux-applications.html) -* [JSX support in eslint](https://github.com/eslint/eslint/issues/1291) - -##### Flux Tutorials -* [Flux Application Architecture](http://facebook.github.io/flux/docs/overview.html) -* [Isomorphic Flux examples using Dispatchr and Fetchr from Yahoo](https://github.com/yahoo/flux-examples) -* [Async requests with React.js and Flux](http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/) -* [Implementing Flux in CoffeeScript](http://jamesfriend.com.au/implementing-flux-coffeescript) -* [React: Flux Architecture](https://egghead.io/series/react-flux-architecture) -* [Understanding Flux](https://medium.com/@garychambers108/understanding-flux-f93e9f650af7) -* [A sample app showcasing Flux with React Router](https://github.com/gaearon/flux-react-router-example) -* [Yo in Flux](http://davidandsuzi.com/yo-in-flux/) -* [React.js architecture - Flux VS Reflux](http://blog.krawaller.se/posts/react-js-architecture-flux-vs-reflux/) -* [Avoiding Event Chains in Single Page Applications](http://www.code-experience.com/avoiding-event-chains-in-single-page-applications/) -* [ReactJS and FLUX](http://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html) -* [Deconstructing ReactJS's Flux](http://spoike.ghost.io/deconstructing-reactjss-flux/) -* [Flux Step By Step](http://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/) -* [Flux in practice](https://medium.com/@garychambers108/flux-in-practice-ec08daa9041a) - -##### Building robust web apps with React -* [Building robust web apps with React: Part 1](http://maketea.co.uk/2014/03/05/building-robust-web-apps-with-react-part-1.html) -* [Building robust web apps with React: Part 2](http://maketea.co.uk/2014/04/07/building-robust-web-apps-with-react-part-2.html) -* [Building robust web apps with React: Part 3](http://maketea.co.uk/2014/05/22/building-robust-web-apps-with-react-part-3.html) -* [Building robust web apps with React: Part 4](http://maketea.co.uk/2014/06/30/building-robust-web-apps-with-react-part-4.html) - -##### Scotch.io React tutorials series -* [Learning React.js: Getting Started and Concepts](http://scotch.io/tutorials/javascript/learning-react-getting-started-and-concepts) -* [Build A Real-Time Twitter Stream with Node and React.js](http://scotch.io/tutorials/javascript/build-a-real-time-twitter-stream-with-node-and-react-js) -* [Getting To Know Flux, the React.js Architecture](http://scotch.io/tutorials/javascript/getting-to-know-flux-the-react-js-architecture) -* [Creating A Simple Shopping Cart with React.js and Flux](http://scotch.io/tutorials/javascript/creating-a-simple-shopping-cart-with-react-js-and-flux) - -##### React styling -* [React: CSS in JS](https://speakerdeck.com/vjeux/react-css-in-js) - -##### React and Backbone -* [Using React components as Backbone Views](http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html) -* [Chicago Backbone Meetup: React + Backbone slides](https://speakerdeck.com/larsonjj/chicago-backbone-meetup-react-plus-backbone) -* [Pimp my Backbone.View ](https://blog.mayflower.de/3937-Backbone-React.html) - -##### 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/) - -##### 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 Case for React.js and ClojureScript](http://murilopereira.com/the-case-for-reactjs-and-clojurescript/) - -##### React and D3js -* [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/) -* [Choropleth mapping with React and d3](http://pleasetrythisathome.github.io/react%20d3%20visualization%20choropleth/2014/03/20/react-choropleth.html) - -##### 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 -* [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/) - -##### Compiling React Tutorials -* [Webpack Howto by Pete Hunt](https://github.com/petehunt/webpack-howto) -* [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) - -##### Testing React Tutorials -* [Testing React Components](http://www.asbjornenge.com/wwc/testing_react_components.html) -* [Testing React components with Huxley](https://caurea.org/2014/02/23/testing-react-components-with-huxley.html) -* [Testing React.js](http://engineering.venmo.com/blog/2014/05/15/testing-react/) -* [Unit Testing React.js With Jasmine and Karma](http://myshareoftech.com/2013/12/unit-testing-react-dot-js-with-jasmine-and-karma.html) - -##### Data Models for React -* [Valuable — A Data Model for React](https://medium.com/@josephsavona/valuable-a-data-model-for-react-1b8868493bf6) - -##### Debugging React -* [Trace Logging with React](http://www.garysieling.com/blog/trace-logging-react) - - -#### Approach Explanation -* [React: Convincing the Boss](http://www.quora.com/Pete-Hunt/Posts/React-Convincing-the-Boss) -* [Why did we build React?](http://facebook.github.io/react/blog/2013/06/05/why-react.html) -* [Remarkable React](http://www.phpied.com/remarkable-react/) -* [Play Framework and Facebook's React library](http://matthiasnehlsen.com/blog/2014/01/05/play-framework-and-facebooks-react-library/) -* [The Future of JavaScript MVC Frameworks](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/) -* [Om sweet Om](http://blog.getprismatic.com/om-sweet-om-high-functional-frontend-engineering-with-clojurescript-and-react/) -* [BirdWatch: AngularJS vs. ReactJS](http://matthiasnehlsen.com/blog/2014/03/31/birdwatch-with-reactjs/) -* [Scala.js and ReactJS](http://matthiasnehlsen.com/blog/2014/01/24/scala-dot-js-and-reactjs/) -* [Pros and Cons of Facebook's React vs. Web Components](http://programmers.stackexchange.com/questions/225400/pros-and-cons-of-facebooks-react-vs-web-components-polymer) -* [React.js plays nicely with other tools and other thoughts](http://jeremydmiller.com/2014/08/06/react-js-plays-nicely-with-other-tools-and-other-thoughts/) -* [First Reactions](http://joelburget.com/react/) -* [Backbone to React](http://joelburget.com/backbone-to-react/) -* [Moving Atom to React](http://blog.atom.io/2014/07/02/moving-atom-to-react.html) -* [Why we use React.js in our Rails projects](http://blog.arkency.com/2014/07/why-we-use-react-js-in-our-rails-projects/) -* [ReactJS-Rethinking-Web-UI](https://github.com/ifandelse/ReactJS-Rethinking-Web-UI) -* [Removing User Interface Complexity, or Why React is Awesome](http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome) -* [Facebook React vs. Ember](http://instructure.github.io/blog/2013/12/17/facebook-react-vs-ember/) -* [Moving From Backbone To React](https://usepropeller.com/blog/posts/from-backbone-to-react/) -* [Pimp my Backbone.View (by replacing it with React)](http://blog.mayflower.de/3937-Backbone-React.html) -* [From Backbone Views To React](http://leoasis.github.io/posts/2014/03/22/from_backbone_views_to_react/) -* [React.js vs traditional MVC](http://www.code-experience.com/react-js-vs-traditional-mvc-backbone-ember-angular/) -* [Why you might not need MVC with React.js](http://www.code-experience.com/why-you-might-not-need-mvc-with-reactjs/) -* [React: Finally, a great server/client web stack](http://eflorenzano.com/blog/2014/01/23/react-finally-server-client/) -* [Custom Components: React & x-tags](http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html) -* [React & CoffeeScript](http://blog.vjeux.com/2013/javascript/react-coffeescript.html) -* [React: Referencing Dynamic Children](http://www.mattzabriskie.com/blog/react-referencing-dynamic-children) -* [React.js and How Does It Fit In With Everything Else?](http://www.funnyant.com/reactjs-what-is-it/) -* [JavaScript’s History and How it Led To ReactJS](http://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/) -* [Saving Time and Staying Sane? Pros and Cons of React.js](http://kentwilliam.com/articles/saving-time-staying-sane-pros-cons-of-react-js) -* [Opinionated Rundown of JS Frameworks](http://blog.andyet.com/2014/08/13/opinionated-rundown-of-js-frameworks) -* [Facebook's React vs AngularJS: A Closer Look](http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look) -* [Why We May Ditch AngularJS For React](http://wiredcraft.com/posts/2014/08/20/why-we-may-ditch-angularjs-for-react.html) -* [AngularJS vs React](http://noelwelsh.com/programming/2014/08/17/angularjs-vs-react/) -* [Why is React's js size so big given its small API?](http://stackoverflow.com/questions/19807946/why-is-reacts-js-size-so-big-given-its-small-api/) -* [React Demystified](http://blog.reverberate.org/2014/02/react-demystified.html) -* [Two-Way Data Binding](http://n12v.com/2-way-data-binding/?hn) -* [React vs. Ember](https://docs.google.com/presentation/d/1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/preview?sle=true) -* [Using React to speed up the Khan Academy question editor](http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html) -* [How I Learned to Stop Worrying and Love React](http://www.nixtu.info/2014/07/how-i-learned-to-stop-worrying-and-love.html) -* [10 reasons to use React in your next project](http://www.htmlxprs.com/post/17/10-reasons-to-use-react-in-your-next-project) -* [AngularJS vs ReactJS for large web applications](http://blog.liip.ch/archive/2014/09/16/angularjs-vs-reactjs-for-large-web-applications.html) -* [Easier UI Reasoning with Unidirectional Dataflow and Immutable Data - Using React.js and Omniscient.js](http://open.bekk.no/easier-reasoning-with-unidirectional-dataflow-and-immutable-data) -* [What You Need to Know About React](http://revelry.co/2014/11/01/what-you-need-to-know-about-react/) - - -#### React Internals -* [React’s diff algorithm](http://calendar.perfplanet.com/2013/diff/) -* [An Optimal Decomposition Algorithm for Tree Edit Distance](http://www.cs.haifa.ac.il/~oren/Publications/TEDinTALG.pdf) - - -### Tools - -#### Flux -* [Flux official site](http://facebook.github.io/flux/) -* [Flux Project](https://github.com/facebook/flux) -* [fluxxor - A set of tools to facilitate building JavaScript data layers using the Flux](http://fluxxor.com/) -* [refluxjs - A simple library for uni-directional dataflow application architecture inspired by Flux](https://github.com/spoike/refluxjs) -* [fluxy - An implementation of Facebook's Flux architecture](https://github.com/jmreidy/fluxy) -* [dispatchr - A Flux dispatcher for applications that run on the server and the client](https://github.com/yahoo/dispatchr) -* [fetchr - Augments Flux applications by allowing the same syntax on server/client](https://github.com/yahoo/fetchr) -* [flux-router-component - Router React mixin for applications built with Flux](https://github.com/yahoo/flux-router-component) -* [capacitor - Lightweight implementation of the Flux architecture for client-side applications](https://github.com/josephsavona/capacitor) -* [normalizr — Normalizes nested JSON according to schema for Flux Stores](https://github.com/gaearon/normalizr) -* [barracks - Event dispatcher for the React Flux architecture](https://github.com/yoshuawuyts/barracks) -* [McFly - A lightweight flux library with factories for Actions & Stores](https://github.com/kenwheeler/mcfly) -* [DeLorean - A completely agnostic JavaScript framework to apply Flux concepts into your interfaces easily](http://deloreanjs.com/) - -#### Boilerplates -* [react-starter-kit - a skeleton for an isomorphic web application](https://github.com/kriasoft/react-starter-kit) -* [React Quickstart](https://github.com/andreypopp/react-quickstart) -* [React Hack](https://github.com/petehunt/ReactHack) -* [react-component-boilerplate - Boilerplate for creating React components](https://github.com/mzabriskie/react-component-boilerplate) -* [React on Rails Starter Kit](https://github.com/elierotenberg/react-rails-starterkit) -* [react-browserify-template - Quick template for building with Browserify + React](https://github.com/petehunt/react-browserify-template) -* [React Boileplate](https://github.com/rackt/react-boilerplate) -* [Coffee React Quickstart](https://github.com/KyleAMathews/coffee-react-quickstart) -* [react-starter-template - React (reactjs), Gulp, Webpack, Bootstrap, LiveReload](https://github.com/johnthethird/react-starter-template) -* [react-starter - Starter template for React with webpack](https://github.com/webpack/react-starter) -* [react-webpack - React + Webpack project template](https://github.com/ThomasDeutsch/react-webpack) -* [react-server-rendering-example - Super-basic example of how server rendering works](https://github.com/petehunt/react-server-rendering-example) -* [React Webpack Server Side Example](https://github.com/webpack/react-webpack-server-side-example) -* [genesis-skeleton - Modern, opinionated, full-stack starter kit](https://github.com/ericclemmons/genesis-skeleton) -* [react-seed by @fizerkhan - Seed project for react apps](https://github.com/fizerkhan/react-seed) -* [react-seed by @kriasoft - A single-page application (SPA) project template based on React](https://github.com/kriasoft/React-Seed) -* [gulp-browserify-react-phonegap-starter - A starter kit for Phonegap, using Gulp, Browserify and React](https://github.com/stample/gulp-browserify-react-phonegap-starter) -* [react-bb-broccoli - A starter kit for React and Backbone build with Broccoli](https://github.com/mlunoe/react-bb-broccoli) -* [react-isomorphic - An experimental playground to try and find unobtrusive patterns using React](https://github.com/redbadger/react-isomorphic) -* [react-isomorphic-test - Testing an isomorphic React application](https://github.com/BinaryMuse/react-isomorphic-test) -* [este - Robust and comfortable dev stack for mobile/offline/frontend first isomorphic web apps](https://github.com/steida/este) -* [leveldb-baconjs-react-example - LevelDB React example](https://github.com/holonomy/leveldb-baconjs-react-example) -* [reactor-core - A small library for creating isomorphic apps in React](https://github.com/natew/reactor-core) -* [react-hot-boilerplate - Live-editing boilerplate for your next ReactJS project](https://github.com/gaearon/react-hot-boilerplate) -* [react-webpack-stylus-starter - Project stub for React project](https://github.com/Aetet/react-webpack-stylus-starter) -* [Full example using Koa, React, Passport, Mongoose, Gulp, Mocha](https://github.com/dozoisch/koa-react-full-example) -* [Basic skeleton for a Rendr app](https://github.com/petehunt/rendr-react-template) -* [react-component-boilerplate - A React component boilerplate](https://github.com/TYRONEMICHAEL/react-component-boilerplate) - -#### Components -* [React Components](http://react-components.com/) -* [React Component List](http://dvemac.github.io/react-component-list/) -* [Khan Academy React Components](http://khan.github.io/react-components/) -* [VistarMedia Components](http://cmpnt.vistarmedia.com/) -* [Reactjsx Components List](http://www.reactjsx.com/) -* [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 that Implement Google's Material Design.](https://github.com/callemall/material-ui) -* [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-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-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 gallery of child 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-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-tween-state - React animation tween state](https://github.com/chenglou/react-tween-state) -* [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