Awesome React | Awesome React Native Resources | Learning & Much Much More | Massive List 💯

A curated list of free resources to master React Development

Table Of Contents

Motivation

This project aims to collect the best free resources for those that want to learn how to build applications with React and also understand the concepts that come with its adoption like Functional Programming, Composition, Unidirectional Data Flow and many others.

Essential Path

Why React?

  1. JS Apps at Facebook
  2. Why did we build React?
  3. React: Rethinking best practices

React

  1. React Docs - Quick Start section basic
  2. The Road to learn React basic

ES2015+

  1. Learn ES6 (ECMAScript 2015) basic
  2. Exploring ES6 advanced
  3. Exploring ES2016 and ES2017 advanced

Routing

  1. React Router Docs basic

State Management

Redux

  1. Getting Started with Redux basic
  2. Building React Applications with Idiomatic Redux advanced

Bundlers

Webpack

  1. Get Started with Webpack

Build Stuff

  1. Several project ideas
  2. React - TodoMVC
  3. Bootstrapping a React project
  4. Build a Weather app
  5. The SoundCloud Client in React + Redux
  6. A Primer on the React Ecosystem: 1, 2 and 3.
  7. Building a React/Redux App with JSON Web Token (JWT) Authentication

Optional Path

Static Type Checkers

Flow

Typescript

  1. Gitbook Typescript deep dive
  2. React - Redux - Typescript - TodoMVC
  3. React Typescript samples

Immutable Data Structures

Immutable.js

  1. Immutable.js: An Introduction with examples written for humans

How To Use This Guide

Use a linear approach to complete this guide. That means you should start with the first resource in the Essential Path and pass to the next one after you finish the previous and after make a practical project to internalize what you have learned.

The React’s ecosystem is overwhelming for beginners. Ensure to learn each new tool isolatedly .

In the sections about React, Webpack, and ES2015+, the initial resources are more superficial and the last ones are going deeper in the respective topic. You can opt to learn the basics first and return to them later, but don’t skip them without have a basic knowledge of the matter.

After you complete the Essential Path , you can choose one (or more) topics in the Optional Path . You do not need to go through this section in the same linear approach, you should choose new topics to learn based on your necessity and/or desire.

How To Collaborate

To suggest new sections or new resources, open one issue for each resource/section explaining why we should add/remove such item. After at least 5 people approve (:+1:) your indication, you will be invited to create the pull request.

The reason to keep this way of collaboration is to ensure that our list of resources will be really concise, bringing only the best resources for those that want to master the topics listed here.

Team

Inspiration And Additional Resources

Inspiration

  1. You’re Missing the Point of React
  2. react-makes-you-sad
  3. react-howto
  4. Your Timeline for Learning React
  5. 5 Steps for Learning React Application Development
  6. Path to Learning React

Additional Resources

  1. React/Redux Links
  2. Redux Ecosystem Links
  3. Community Resources

Awesome React Awesome

A collection of awesome things regarding the React ecosystem.

React

JavaScript Library for building User Interfaces

React General Resources

React Community

React Online Playgrounds

React Tutorials

React General Tutorials
React Hooks
React and TypeScript
React Performance
React Internals
React Interview Questions

React Tools

React Development Tools
React Frameworks
  • 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
  • remix - Finally, a killer React framework from the creators of React Router
React Styling
  • 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 Routing
  • 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
React Component Libraries
  • 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
  • Fluent UI - A set of React components for building Microsoft web experiences
  • react-bootstrap - Bootstrap components built with React
  • reactstrap - Simple React Bootstrap 4 components
  • 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
  • reakit - Accessible, Composable and Customizable components 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.
  • react-bulma-components - React components for Bulma framework
  • react-bulma - React.js components for Modern CSS framework based on Flexbox
  • rbx - The Comprehensive Bulma UI Framework for React
  • trunx - Super Saiyan React components, son of awesome Bulma, implemented in TypeScript
  • tailwind-react-ui - Super Saiyan React components, son of awesome Bulma, implemented in TypeScript
  • tails-ui - Clean UI based on tailwindcss
  • zeit-ui/react - Modern and minimalist React UI library
React Awesome Components
React for Command Line
  • ink - React for interactive command-line apps
  • react-blessed - A React renderer for blessed terminal interface library
React Testing
React Libraries
React Integration
React State Management
React AR and VR
  • React 360 - Create exciting 360 and VR experiences using React
  • Viro React - Platform for rapidly building AR/VR applications using React Native
Forms
Autocomplete
Graphics
Data Managing
Maps
Charts

React Native

Framework for building native apps using React

React Native General Resources

React Native Tutorials

React Native Development Tools

React Native Sample Apps

React Native Boilerplates

React Native Awesome Components

React Native Libraries

Redux

Predictable State Container for JavaScript Apps

Redux General Resources

Redux Tools

Redux Tutorials

MobX

Simple, scalable state management for JavaScript Apps

MobX General Resources

MobX Tools

MobX Tutorials

GraphQL

Query Language

GraphQL Spec

GraphQL Tools

GraphQL Tutorials

GraphQL Implementations

Server Integration

Database Integration

Relay

Data-Driven React Applications

Relay General Resources

Relay Tutorials

Relay Tools

Apollo

Data stack based on GraphQL

Apollo General Resources

Apollo Tools

Videos

reactjsvideos.com

Important Talks

React.js Conf 2015 Playlist

ReactEurope Conf 2015 Day 1 Playlist

ReactEurope Conf 2015 Day 2 Playlist

ReactRally Conf 2015 Playlist

React.js Conf 2016 Playlist

React Amsterdam 2016 Playlist

ReactEurope Conf 2016 Day 1 Playlist

ReactEurope Conf 2016 Day 2 Playlist

ReactRally Conf 2016 Playlist

React.js Amsterdam 2018 Playlist

Video Tutorials

Demo React Apps

Real React Apps

  • 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

Contribution

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. (✿◠‿◠)

Awesome React - More Resources:

A collection of awesome React libraries, resources and shiny things.

Absolutely Awesome React Components & Libraries

React Resource

Awesome React Hooks

image

Awesome React Native is an awesome style list that curates the best React Native libraries, tools, tutorials, articles and more. PRs are welcome!

ENJOY & HAPPY LEARNING! :+1:

34 Likes

Thanks @sam. Great work. Really appreciate,

1 Like

Thank’s @SaM , bookmarked :slight_smile:

1 Like

Thou I don’t know what is this about, I bookmarked it. For future use as an aspiring web dev. :grin:

1 Like

thanks…man

1 Like

The other day I was talking that I’m sure @SaM is compiling resourses for React and not even a day later SAM proves it true. HA :rofl: How Lucky !

1 Like

thanks Chief, you are the best!

1 Like

Once again @SaM thank you for sharing the pro-resources. I really appreciate your help.

1 Like

You are my mentor @SAM

Thanks so much for your help, I am into Reactjs and I am using ur reference, and it's helping 🎓
1 Like

Thank you very much @SaM

1 Like

@SaM Dude Thanks for these Resources I was trying to learn REACT from the ladt couple of months , because I wasn’t sure from where should I get started, But know thanks to you I have a COMPLETE PATH from BEGINNING to END. THANKS ALOT.

1 Like