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.
What is React? Why use it with Drupal? And some baseline information you can use to get started integrating React and Drupal together.
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.
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.
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 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.
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.
Look at how JavaScript can be used to make HTTP requests and retrieve data from a Drupal powered web services API.
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.
Lay the groundwork for an application that can not only list, but also create, update, and delete nodes via Drupal's API.
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.
Start work on creating a fully decoupled React application.
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.
Configure the Simple OAuth Drupal module and use a password grant flow to create authenticated API 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.
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.