Drupal 8, React, Vue, JSON API and ES6 learning resources

You can start your journey with this website from Lullabot education React ❤ Drupal. Then when you are ready to get your hands dirty, give Contenta or Reservoir a try. Have a look at Dries' post about How to decouple Drupal in 2018.

If you are still hungry, here are some clues.
Updated on 22 August 2018

React and Drupal 8

• Zivtech Getting Started with React, Drupal 8, and JsonAPI
• Dries Buytaert Drupal looking to adopt React
• Four Kitchens : API First Drupal 8, React, and You!
• Isomorphic (universal) JavaScript app using ReactJS + Drupal 8 + Webpack
• Lessons Learned from Drupalcon 2017 Baltimore: Decoupled Headless Drupal
• Amazee Labs Sustainable Drupal & React Maintenance
• Lullabot Decoupled Drupal Hard Problems: Image Styles
• Lullabot Decoupled Drupal Hard Problems: Schemas
• Lullabot Decoupled Drupal Hard Problems: Routing
• Appnovation Using React library on Drupal
• Acquia Lightning New React-based content Scheduler

Progressive decoupling

• Chapter Three Introducing React Comments
• Amazee Labs Progressive Decoupling 1: Modern Javascript
• Amazee Labs Progressive Decoupling 2: A How To Guide

React

• React official documentation
• Getting Started with React – An Overview and Walkthrough
• Wes Bos React For Beginners
• I wish I knew these before diving into React
• Lullabot How to Learn React: A Five-Step Plan
• Why Frameworks matter building a simple app in vanilla JS and React
• Scotch.io Learning React.js: Getting Started and Concepts (2014, but still a a good summary)
• React cheatsheet
• How to better organize your React applications?
• Free Code Camp Handling State in React: Four Immutable Approaches to Consider
• Intro to debugging ReactJS applications
• Hackernoon Configure ESLint, Prettier, and Flow in VS Code for React Development
• Preethi Kasireddy Internationalization in React - FreeCodeCamp
• LogRocket Advanced React Router concepts: recursive path, code splitting, animated transitions, and more
• React Armory How to integrate React into an existing app?
• Hackernoon How To Combine a NodeJS Back End with a ReactJS Front End App
• Hackernoon How to Single Sign-on with React Native and Fabric
• Free Code Camp Which Projects Need React? All Of Them!
• Scotch.io Conditional Routing with React Router v4
• Storybook for React
• Developer Tools for Firefox or Chrome

Learning React - Functional Web Development with React and Redux

React Boilerplates

• React Starter Kit — "isomorphic" web app boilerplate
• The Best React Boilerplate: DIY

React Components

• Free Code Camp 8 Key React Component Decisions
• GitConnected React Component Patterns
• React Primer React component prototyping tool that generates fully connected class component code
• JS Coach React components catalog
• Sindre Sorhus React extras (GitHub)
• React Autosuggest

Redux

• Redux official documentation
• TLTR; Redux
• A Dummy’s Guide to Redux and Thunk in React
• Egghead Getting started with Redux
• Egghead Redux cheatsheet
• Scotch.io 5 Essential React Concepts to Know Before Learning Redux
• Lullabot Eat This, It’s Safe: How to Manage Side Effects with Redux-Saga

Vue

• Drupal & Vue.js: how to work without jQuery
• Blake Newman Vue.js deep dive, looking to the future (Frontend United 2018)
• How Is React Different from Vue?
• Switching From React To Vue.js
• Why we moved from Angular 2 to Vue.js (and why we didn’t choose React)
• Sarah Drasner Replacing jQuery With Vue.js: No Build Step Necessary on Smashing Magazine
• A Killer Vue.js Blog Demo: Launch in 2 Hours Tops
• 3 Code Splitting Patterns For VueJS and Webpack
• 10 things I love about Vue
• Learn Vue.js from Top Articles for the Past Year (v.2018)
• Storybook for Vue

JSON API, REST and Drupal

• Drupal.org : JSON API documentation
• Drupalize.me JSON API: Request a Resource comes with about 20 other tutorials when you have an account on their site.
• DrupalCon Baltimore 2017 : Advanced Web Services with JSON API
• Acquia : Decoupled Drupal with Ember: Introducing Ember and JSON API
• Mateu Aguiló Bosch Contenta json:api on GitHub
• Smashing Magazine : json-api-normalizer: An Easy Way To Integrate The JSON API And Redux
• adci How to send the JSON data from a Drupal 8 site?

ES6

• Wes Bos ES6 for Everyone
• Scotch.io Better Node with ES6, Pt. I
• Luke Hoban ECMAScript 6 features
• David Walsh Six Tiny But Awesome ES6 Features
• David Walsh Six More Tiny But Awesome ES6 Features
• Previous Next Using ES6 in your Drupal Components

GraphQL

• GraphQL official documentation
• Amazee Labs GraphQL for Drupalers - the queries
• Amazee Labs Drupal and GraphQL with React and Apollo
• Amazee Labs Don’t Push it: Using GraphQL in Twig
• Amazee Labs Webinar GraphQL Twig video, slides, GitHub
• Drupal ♥ GraphQL Projects related to integrating Drupal and GraphQL
• Sitepoint REST 2.0 Is Here and Its Name Is GraphQL
• Pusher REST versus GraphQL
• Smashing Magazine A GraphQL Primer: Why We Need A New Kind Of API (Part 1)
• Introducing URQL (beta), a Universal React Query Library

Preact

• Preact Progressive Web App boilerplate, in 30 seconds
• Getting started with PreactJS — A Step By Step Guide
• Addy Osmani A React And Preact Progressive Web App Performance Case Study: Treebo

Fetch, Promise, Async, ...

• Scotch.io How to Use the JavaScript Fetch API to Get Data
• Jake Archibald That's so fetch!
• David Walsh async & await
• Addy Osmani Preload, Prefetch And Priorities in Chrome

Design, animation

• Material UI React components
• Elemental UI toolkit
• Announcing ? styled-components v2: A smaller, faster drop-in upgrade with even more features
• Styling React Components in Sass
• React Native Training React Animations in Depth
• Flight, Ultra Simple Animation Compositions for React
• Animated page transitions with React Router 4, ReactTransitionGroup and Animated
• Design Nation Sketching a Design System with React-SketchApp (playing with Airbnb tool)
• Smashing Magazine Basic Patterns For Mobile Navigation: Pros And Cons

Misc

• Luciano Mammino Universal JavaScript - Frontend United Athens 2017
• Lullabot The Hidden Costs of Decoupling
• AirbnbEng Isomorphic JavaScript: The Future of Web Apps
• Pieter Frenssen Working with Rest APIS - DrupalCamp Wrocław
• Free Code Camp The best front-end hacking cheatsheets — all in one place
• Benjamin De Cock Frontend guidelines