Release Day: Getting Started with React and Drupal

Image

React JS, the JavaScript UI framework, has been a very popular topic among Drupal developers and users of late. Whether discussing decoupled Drupal architectures, updating Drupal core's administrative UI, or creating highly-interactive theme's, React is part of the conversation. But what is React? And perhaps more importantly, how does React relate to Drupal?

About six months ago we set up the site ReactForDrupal.com where we've been collecting our favorite resources as we learn about React and integrating it with Drupal. Through the feedback we gained from that project we learned that there's a lot of interest in the subject, and while there are tons of great "Hello World" resources available, there are not many comprehensive step-by-step guides. So we partnered up with our friend Chacha Sikes to help fill that gap.

This new series Getting Started with React and Drupal provides Drupal developers with an introduction to React and the React ecosystem by walking through building a couple of different React applications that use Drupal as a backend. We demonstrate how to integrate React into an existing Drupal theme or module, as well as how to create a fully decoupled React application, and we talk about the pros and cons of both approaches.

Tutorials:

• Introduction to React and Drupal
• React Basics
• Decoupled vs. Progressively Decoupled
• Connect React to a Drupal Theme
• Create a React Component
• Configure Drupal to Provide Data via JSON API
• Retrieve Data from an API with React
• Use React to List Content from Drupal
• Add, Edit, and Delete Drupal Nodes with React
• Build an Interface to Edit Nodes with React
• Create a Fully Decoupled React Application
• Start with create-react-app
• Make API Requests with OAuth
• Use Fetch and OAuth to Make Authenticated Requests
• Extend React with Google Material UI

Now that we've got the basics out of the way I'm curious to hear what you want to learn more about with regards to React? Let us know in the comments, or send us an email. You can also signup for the newsletter on ReactForDrupal.com for a semi-regular update on all things React and Drupal.

Once you've finished these tutorials make sure you also check out our Web Services in Drupal 8 series and our Decoupled Drupal series, both of which provide tons of complementary information to anyone curious about using React and Drupal together.