Lullabot Education, 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 news

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!

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. How to Learn React
  5. Tutorial: Intro To React
  6. React Tooling Part I: React and React DOM, Part II: Babel, Part III: Webpack, Part IV: HTMLWebpackPlugin, Part V: Conclusion
  7. All the fundamental ReactJS concepts jammed into this single medium article
  8. courseReact Fundamentals
  9. courseGetting Started with Redux
  10. React Developer Tools
  11. 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. videoDries Buytaert Shares His View on Decouled Drupal: When, Why, and How
  6. API First Drupal and the Future of the CMS
  7. Contenta Makes Your Content Happy
  8. courseWeb Services in Drupal 8

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?
  2. How to integrate React into an existing app?
  3. Getting Started with React, Drupal 8, and JSON API
  4. courseDecoupled Drupal
  5. Contenta: Contenta is an API-First Drupal distribution
  6. React and Drupal 8 JSON API
  7. Drupal and GraphQL with React and Apollo
  8. videoA look into a possible Future for all of us: React, GraphQL and Drupal
  9. Waterwheel.js
  10. videoHeadless Drupal: Building blazing-fast websites with React/GatsbyJS + Drupal
  11. podcastReact in Drupal Core?
  12. Drupal 8 and React Native
  13. Decoupled Drupal Hard Problems: Image Styles
  14. Decoupled Drupal Hard Problems: Routing
  15. Decoupled Drupal Hard Problems: Schemas
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.