React Tinkerer Manual

🚀 Newbie React Tinkerer's manual 📗 of the awesomeness of React and its community 👱. Let's learn React!

About React

WIP

Core Concepts

• React Components and JSX
• State and Props
• Component Lifecycle
• Styling Components
• Higher Order Components
• Virtual DOM
• Reconciliation/Diffing Algorithm
• Server Side Rendering
• React Performances

Related Concepts

• Webpack's Code Splitting and Tree Shaking to avoid monolithic bundle files

Learning Resources

WIP

Starting Out

• Pete Hunt's React How to

Server-side Rendering

• Renders React App using Fetch as Google for SEO test
• Should I use React Server Side Rendering?
• SSR with CRA
• Prerender.io, React SEO Service

Miscellaneous Super Useful Bits

• React Bits, A compilation of React Patterns, techniques, tips and tricks
• React + RxJS 💓, Reactive React
• Awesome Redux, curated Redux resources
• React Redux Offline First
• React Progressive Web Apps
• JS Stack from Scratch
• Become a Full Stack Web Developer
• Clean Code in JavaScript
• Clean Code in JavaScript

Community Third Parties

Catalogs

• 🔗 https://js.coach/

Functionality and Data

Frameworks and Boilerplates

• 🎇 React Boilerplate, A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices
• 🔧 NextJS, minimalistic framework for server-rendered React applications

Third Party Components

• 🎇 React Modal, simple accessibly modal for React
• 🌐 React Router, components for single-page-app routing
• 📰 Draft.js, A React framework for building text editors
• 🌐 Recompose, utility belt for function components and higher-order components

State Management

• 📈 Redux, predictable state container for JS apps
  • Redux Reselect, selector library for Redux
  • Redux Saga, An alternative side effect model for Redux apps
  • Redux Epic, Better async and server side rendering in React with Observables
  • Redux Form, enable an html form in React to use Redux to store all of its state
  • Redux Immutable, Redux combineReducers with Immutable.js
  • Redux Define, Define action constants for Redux
• 🔅 MobX, simple and scalable state management
• 〽️ Relay, JavaScript framework for building data-driven React apps

SEO and Semantics

• 👒 React Helmet, HTML document head manager for React

Very Useful but not React-Specific Libraries

• ⚓ Flow, static typing library for JavaScript
• 🎡 ImmutableJS, Immutable persistent data collections for Javascript
• ✴️ Normalizr, Normalizes nested JSON according to a schema
• 📈 GraphQL, Query language for API
• 📐 Falcor, JavaScript library for efficient data fetching
• 📥 Facebook's Prepack, A tool for making JavaScript code run faster.
• 〽️ Cerebral, A state controller with its own debugger

Design

Components

• 🎠 Material UI, React Components that Implement Google's Material Design
• 🐜 Ant Design, An enterprise-class UI design language and React-based implementation
• 🔧 React Bootstrap, Bootstrap 3 components built with React
• 💻 React Semantic UI, Semantic UI components built with React
• 📑 React Foundation, Foundation components built with React

Styling and Animations

• 💄 Glamour, React component styling
• 💅 Styled Components, component styling library
• ✨ Glamor, Inline CSS library
• 💍 aphrodite, Inline CSS library
• 🔧 Radium, A toolchain for React component styling
• ✨ TypeStyle, TypeScript for Styling
• ✨ React Anime, A super easy animation library for React!
• 🔧 React Motion, A spring that solves your animation problems in React
• 🐜 React Animation, Animation for React
• ✴️ Fabric, React Components from Microsoft Office

React Native Styling and Themes

• ✨ Shoutem UI, Customizable set of components for React Native applications

Texts and Fonts

• 👓 Font Face Observer, Web font loading library

Data Visualization

• 🔧 D3, Data Visualization Library
• ✨ Victory, A collection of composable React components for building interactive data visualizations. Build on top of D3
• ✨ Victory Native, Victory for React Native

Utilities

UI Builders

• 👷 Structor, react UI builder with marketplace
• 📚 StoryBook, UI Component Dev Environment for React

Module Bundlers

• 🌟 Browserify, node dependency bundler
• 📥 Webpack, node module bundler
• 🐾 Rollup, Next-generation ES6 module bundler

Miscellaneous

• 🌐 React Router, Declarative routing for React
• 🌟 React Router Redux, Ruthlessly simple bindings to keep react-router and redux in sync
• ✴️ Webpack Bundle Analyzer
• 👓 Spectacle, React Presentation Library
• 💻 Subdivide, Split pane layout system for React
• 🌐 i18n, internalization for React
• 🌐 Internalization in React