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

Learn React & Drupal from Drupalize.Me

Learn to use React and Drupal together with this series of 15+ tutorials from Drupalize.Me.

Get Started Using React and Drupal Together

The goal of this series is to introduce you to the fundamental concepts that you'll need to understand when using React and Drupal together.

This series is for developers who want to get their hands on some code and who learn best by doing. These tutorials assume that you already have a basic understanding of Drupal administration and are comfortable with doing things like creating content and users, installing modules, and configuring your application. This series expects that you're already familiar with JavaScript.

The tutorials

React Basics

Introduces some of the fundamental concepts of React -- including components, state, and ES6 -- and talk about some of the additional things you'll eventually want to learn as you get further into using React.

Decoupled vs. Progressively Decoupled

Explores the difference between fully decoupled and progressively decoupled applications. Explain what they are, and provide links to resources where you can further explore the advantages and disadvantages of both.

freeConnect React to a Drupal Theme

Create a "Hello World" React application and demonstrate how to connect that React JavaScript library, and our custom JavaScript code, to a Drupal theme using asset libraries.

Create a React Component

Create two React components that wrap the existing content of a node in a React application containing a button which can be used to toggle the visibility of the node's content. This is a great example of how you can use React to enhance an existing Drupal theme without having to go fully decoupled.

Configure Drupal to Provide Data via JSON API

Install and configure the JSON API module in order to allow Drupal to provide a web services API that you can interact with via React.

Retrieve Data from an API with React

Look at how JavaScript can be used to make HTTP requests and retrieve data from a Drupal powered web services API.

Use React to List Content from Drupal

Update the React application started earlier to use the JavaScript Fetch API to retrieve a list of nodes from Drupal's API, loop over the items in the list, and display them with React.

Add, Edit, and Delete Drupal Nodes with React

Lay the groundwork for an application that can not only list, but also create, update, and delete nodes via Drupal's API.

Build an Interface to Edit Nodes with React

Combine everything you've learned up to this point in order to create a React application that allows a user to create, read, update, and delete content, embedded in an existing Drupal page.

freeCreate a Fully Decoupled React Application

Start work on creating a fully decoupled React application.

Start with create-react-app

Use create-react-app to scaffold a new fully decoupled React codebase. And optionally learn how to integrate that into a Drupal theme or module.

Make API requests with OAuth

Configure the Simple OAuth Drupal module and use a password grant flow to create authenticated API requests.

Use Fetch and OAuth to Make Authenticated Requests

Add a login form to collect a username and password. Then exchange those for an OAuth access token. And finally update existing fetch() requests to use the OAuth access token.

Extend React with Google Material UI

Use npm or yarn to add third party JavaScript libraries to your project. This example adds the Google Material UI package which contains UX components that can incorporate into our application to give it a more Material UI like feel without having to write much additional code.