Osio Labs, Inc
Use React and Drupal to create amazing decoupled applications.

React Drupal

React and Drupal can be used together to create amazing digital experiences. Knowing where to start and how to leverage the strengths of both can be challenging though. This page is a collection of the best articles, videos, and presentations we've found on the topic.

Sign up for the latest newsGet started using React and Drupal

API-first, or “decoupled”, architecture is quickly becoming the most popular way to create world class digital experiences. The pattern gives developers the flexibility to rapidly innovate, while ensuring future-proof builds that don’t require re-creating the entire CMS for new features. API-first architectures started to become mainstream with the publication of NPR’s Create Once, Publish Everywhere (COPE) series of articles. Many other organizations including Netflix have seen great benefits from a decoupled approach.

Sound good? React, a library for creating beautiful user experiences, and Drupal, an API-first content management system, make a great match. Experiences that users love, created using declarative, component based, and flexible JavaScript that front-end developers love to write. And a powerful, API-first CMS with endless flexibility to define robust content workflows and create joyful editorial experiences that allows your back-end developers to focus on improving your business and not reinventing the wheel.

We come across a lot of great articles on creating breakthrough experiences with React and Drupal. This page is a continuously updated list of our favorite articles that help explain how to get started with both, and then how to combine their powers to create something truly amazing. Have fun!

Learn everything you need to know to get started using React on the front-end and Drupal on the backend with this collection of 15 hands-on tutorials.

Learn React & Drupal

Gatsby is a blazing fast React application generator that integrates well with Drupal. It's a great way to learn React & GraphQL while working with real world data.

Learn Gatsby & Drupal

React

React is a JavaScript library for building user interfaces.

Started in 2013, React has quickly grown in popularity due to its declarative style and lack of assumptions about your technology stack. In the last few years, a large ecosystem has grown around React. This includes high quality libraries, conferences, and increased demand for developers with React skills.

Start here: An Introduction to React for Drupal Developers

  1. Yes, React is taking over front-end development. The question is why.
  2. Removing User Interface Complexity, or Why React is Awesome
  3. A Study Plan To Cure JavaScript Fatigue
  4. JavaScript to Know for React
  5. How to Learn React
  6. Tutorial: Intro To React
  7. JavaScript Stuff
  8. All the React Fundamentals in One Place
  9. courseReact Fundamentals
  10. React State Museum
  11. React Libraries in 2020
  12. React Developer Tools
  13. AJAX Requests in React: How and Where to Fetch Data

Drupal

Drupal is an open-source content management system with a robust suite of tools for modeling data, implementing editorial workflows, and coding custom application logic. There is also excellent support for JSON API or GraphQL web services, making it a good choice as the backend for your React application.

Start here: An Introduction to Drupal for React Developers

  1. courseIntroduction to Drupal
  2. Drupal 8 User Guide
  3. videoDrupal 8 Basics Tutorials
  4. Decoupling Explained
  5. Decoupled Drupal in Practice, Book by Preston So.
  6. How to decouple Drupal in 2019
  7. API First Drupal and the Future of the CMS
  8. Drupal JavaScript Initiative: The Road to a Modern Administration UI
  9. Headless CMS: REST vs JSON:API vs GraphQL
  10. Contenta Makes Your Content Happy
  11. courseWeb Services in Drupal 8
  12. GraphQL with Drupal: Getting Started

React + Drupal

Whether you’re enhancing a few of the elements on an existing page, or creating a fully decoupled single-page app (SPA), React and Drupal work great together.

  1. Should You Decouple?, and Decoupled Drupal - What You Need to Consider
  2. How to integrate React into an existing app?
  3. Getting Started with React, Drupal 8, and JSON API
  4. React and Drupal 8 JSON API
  5. courseDecoupled Drupal
  6. Decoupled Drupal Hard Problems
  7. Contenta: Contenta is an API-First Drupal distribution
  8. Drupal and GraphQL with React and Apollo
  9. videoA look into a possible Future for all of us: React, GraphQL and Drupal
  10. videoHeadless Drupal: Building blazing-fast websites with React/GatsbyJS + Drupal
  11. podcastReact in Drupal Core?
  12. Drupal 8 and React Native
  13. codeReact & GraphQL Decoupled Kit
  14. Decoupled Drupal + Gatsby: Getting Started
We know some great content is probably missing from this site. If you’ve got suggestions about things you think we should include let us know. info@reactfordrupal.com
Sign up for regular updates and learn about new content we add.