The individual items that make up the content of a page impact the cacheability of that page. In order for Drupal's cache and external caches to better understand how the content varies on a page, module developers use the #cache render element property. The #cache property defines cacheability metadata for individual elements in a render array.

Additionally, these Render API elements can become fairly complex. The calculation of what the final HTML output should look like often involves looking up content in the database, checking multiple conditions, maybe querying an external API, and various other tasks. This can cause turning a render array into HTML to become quite expensive. In order to speed up this process, the Render API will cache the generated HTML for each element and reuse it on future requests whenever possible -- but only if you tell it to do so.

In this tutorial, we'll look at:

• How render caching impacts the performance of a page
• Defining the cacheability of an item with cache tags, cache contexts, and cache max-age
• Examples of using the #cache property in a render array

By the end of this tutorial you should know how, and when, to use the #cache property when defining render arrays.

One of the central components of Drupal's Render API is render elements. You can think of them as prepackaged render arrays or shortcuts you can use to describe common things, like tables, links, and form elements, in a consistent way. In this tutorial we'll take a more in-depth look at the use of the #type property in render arrays in order to answer questions like:

• What are render elements, and what is their use case?
• Where can I find more information about available element types?

By the end of this tutorial you should be able to identify individual render element types within a larger render array, find the relevant documentation for specific types of render elements, and explain the use case for render elements.

This tutorial looks at the steps that Drupal goes through to obtain a render array for an incoming HTTP request, transform the render array into HTML, and then return it to your browser. We provide an outline of the process and links to resources for more in-depth information. We also take a more thorough look at the HtmlRenderer which converts a render array into HTML. Knowing how the render arrays you write in your code are ultimately used can help you optimize Drupal's Render API to describe your module's content.

The #table render element type is a powerful way to output an array of rows and columns as an HTML table. It supports all the features of a standard HTML <table> element like headers, captions, and column groups. Data to be displayed in the table can be an array of simple string values, or an array of render arrays where each sub element is a row with columns as child elements. In addition, when used in the context of a form, tables can be made into a multiple select widget, or have drag-and-drop reordering of rows enabled. Whether you just want to display a set of tabular data, or you provide your users with a complex form element for reordering and nesting items inside a menu tree, it can all be done with the #table element.

In this tutorial we'll:

• Look at outputting simple strings as a table
• Provide definitions for all the various properties that can be used to define a table element
• Demonstrate how to use the #tableselect and #tabledrag options to create complex form widgets

By the end of this tutorial you should be able to create HTML tables in all their various permutations as part of a render array.

In this tutorial we'll look at how you can use the #theme property of a render array to define custom HTML. With this information, module developers can use render arrays to define content, and theme developers can understand how elements in a render array are converted to HTML and which templates they can override to change the output for a specific element.

Learn how to:

• Use hook_theme() to define a new theme hook and define default values for variables
• Create a corresponding Twig template file that outputs the variables and any custom HTML markup
• Use a preprocess function to add additional variables for the Twig template file you created
• Use the new theme hook in conjunction with a #theme property in a render array to link your Twig template file to actual content

By the end of this tutorial you should know how to define new templates to output content as HTML. You should also have a better understanding of how Twig template files are linked to elements in a render array.

There are a bunch of existing render elements, most commonly Form API elements. You need to know how to discover and make use of existing elements. In this tutorial, we'll learn how to:

• Locate a list of elements provided by Drupal core
• Figure out what properties apply to each element
• Use any render element type when defining content or forms in our code

By the end of this tutorial you should know what render element types are available for you to use, and how to find the details you'll need in order to implement them in your own render arrays.

It's best practice to access any of the services provided by Drupal via the service container to ensure the decoupled nature of these systems is respected. In order to do so, you need to know what services exists, and then, where possible, use dependency injection to use them in your code.

This tutorial walks through the process of:

• Discovering existing services and learn their machine name
• Using the machine name of service to request a copy from the service container

Want to know if the person that's viewing your custom block is authenticated? Need to change the elements visible on the page based on a user's permissions or roles? Want to display a welcome message for users returning to your site?

All of these things require knowing who the user is that's currently accessing a page. This can be accomplished by using the current_user service to load an object that contains information about the current user as well as methods for checking permissions, and retrieving additional information.

In this tutorial we'll:

• Define what "current user" means
• Use the current_user service to retrieve an implementation of \Drupal\Core\Session\AccountInterface
• Retrieve information about, and check the permissions of, the current user

By the end of this tutorial you should be able to retrieve and make use of information about the applications current user in order to perform logic in your code that customizes the response for different users.

React is a JavaScript library that makes it easy to create interactive user interfaces. Drupal is a content management system with a powerful web services API. React and Drupal can work together in a couple of different ways. This series of tutorials explores some of those options, and the related concepts and terminology.

Our goal is to provide you with some baseline information you can use to get started integrating React and Drupal together. After you've completed these tutorials you should be able to better envision how to use these two technologies to solve some of your own issues. We hope you'll come away from this with enough knowledge to start exploring further on your own. We link to external resources liberally, and encourage you to explore beyond the examples we provide, read the linked resource, and dig in. There's no substitute for exploration and experimenting with real code when it comes to learning these things.

In this series we'll:

• Introduce the technical side of React, terminology, and information about where to find more resources
• Learn about using Drupal, and the JSON:API module, to turn Drupal into a powerful web services API provider
• Learn about the use cases for adding React to a Drupal site
• Walk through increasingly complex code examples that start with a "Hello World!" application, and end with a fully decoupled application that can list, create, update, and delete content in Drupal
• Learn about how to authenticate a Drupal user via an API using React
• Contrast, through example code and use cases, the differences between integrating React into an existing Drupal theme or module and creating a stand-alone React application
• And more!

Before we start writing any React code, let's go over some basic concepts and terminology. Throughout this series we'll assume you're familiar with these things. They'll come up again and again as you work on projects that involve React, so it's worth taking the time to learn them.

In this tutorial we'll cover the following at a high level, and provide links to resources:

• Why choose React?
• What are React components?
• What are hooks, state, and JSX?
• The role of build tools when developing React applications

By the end of this tutorial you should have a firm grasp of the fundamental concepts and terminology necessary to start creating React applications.

React and Drupal can be used together in two different ways: fully decoupled, also known as headless; or progressively decoupled.

In this tutorial we'll talk about the differences between these two approaches, including:

• Defining what each method refers to
• Considerations regarding hosting, performance, and access

Then we'll link to lots of additional reading materials so you can gain a deeper understanding of the subject.

By the end of this tutorial you should be able to define what decoupled and progressively decoupled mean, and how they differ from one another.

Writing a React application requires including the React JavaScript library in the page, writing some React-specific JavaScript, and then binding it to a specific DOM element on the page. You may also want to include existing packages from the npm ecosystem, and use modern JavaScript (ES6+) features, which necessitates setting up a build toolchain for your JavaScript using a tool like Webpack or Parcel.

There are a lot of different ways you could go about setting this all up. Do you add React via a theme or a module? Do you need a build tool? Should you use Webpack, or Babel, or Parcel, or something else? While we can't possibly cover all the different approaches, we can help you figure out what is required, and you can adapt our suggestions to meet your needs.

In this tutorial we'll:

• Create a new custom theme with the required build tools to develop React applications
• Add a DOM element for our React application to bind to
• Create a "Hello, World" React component to verify everything is working

By the end of this tutorial you'll know how to configure everything necessary to start writing React within a Drupal theme.

Components are the fundamental building blocks of any React application. React uses components to represent different elements in the UI. To show this, we'll build a React widget that can query the Drupal.org REST API to retrieve usage statistics for a project and then display them. We'll create buttons that allow us to toggle between two different projects. In doing so we'll learn about creating components and using props and state in React.

In this tutorial we'll:

• Define two new React components
• Learn about using props to pass data to a component
• Learn about using state, and the useState() hook, to create interactivity

By the end of this tutorial you should have a basic understanding of how to write a React component that uses props and state to display data from a third party API.

React excels at displaying lists of data. But that data needs to come from somewhere. In most cases this happens by making a network request to retrieve data from one or more APIs, processing the response, and then displaying the data. In the context of working with a Drupal site there are two possible options: Drupal core's JSON API module, or the drupalSettings JavaScript API.

In this tutorial we'll focus on the high-level overview and:

• Explain the difference between content and configuration data
• Introduce the JavaScript Fetch API, and where to find information about using it
• Get an overview of the ES6 array functions we'll use to parse the complex data structures returned from an API

In the remaining tutorials in this series we'll provide examples of real world use cases.

By the end of this tutorial you should have a firm understanding of how to get started making API requests using React.

In order for our React code to list content from Drupal we'll need to enable the Drupal core JSON:API module, and then use fetch() in our React component to retrieve the desired data. This technique works for both React code embedded in a Drupal theme or module, and React code that is part of a fully decoupled application. We'll discuss the differences between those styles as well.

In this tutorial we'll:

• Use fetch() to bring data from Drupal into React
• Parse the data using ES6 array functions to find just the bits of data we need
• Combine multiple React components together to render a list of articles retrieved from Drupal

By the end of this tutorial, you should have a better understanding of how data from a Drupal API gets incorporated into a React application.

To perform create, update, and delete (CRUD) operations with Drupal core's JSON:API via React there are a few things you'll need to understand. First, how to format the POST, PATCH, and DELETE requests necessary to add, edit, and delete Drupal entities. Next, how to handle authentication, and cross-site request forgery (CSRF) tokens. Over the next few tutorials we will create a simple but powerful React application that can add, edit, and delete Drupal node content.

This tutorial contains:

• An overview of the application we're building
• Information about making secure authenticated requests to Drupal's JSON:API
• An overview of the API requests we'll use to create, update, and delete nodes

By the end of this tutorial, you should have a picture of the application we're going to build, and know how to make the API requests we'll use in our application.

Using React we can do more than just list content. By using the POST, PATCH, and PUT methods of Drupal core's JSON:API web service we can also add, update, and delete, content entities. To demonstrate how this works we'll create a small React application with a form that lets you add, edit, and delete article nodes.

In this tutorial we'll:

• Learn how to handle user authentication and CSRF tokens in a React application
• Create a single React component that outputs a form to add or edit content
• Create a wrapper around the JavaScript fetch API to assist in dealing with requests to Drupal's JSON:API

By the end of this tutorial you should know how to create, edit, and delete content in a Drupal site using a React application.

Now that we know how to build a working application in React and embed the application in Drupal, let's make a stand-alone version of our application which can be used outside of the context of a Drupal module or theme. In the next few tutorials we'll look at how to create a fully decoupled React application whose only interactions with Drupal happen via API requests.

In this tutorial we'll:

• Introduce differences we need to account for in a fully decoupled application
• Provide an example of what the final project will look like

By the end of this tutorial you should have a better understanding of what we're trying to create in the rest of this series.

Using create-react-app we can scaffold a stand-alone React application with boilerplate configuration and organization already in place. It's a great way to get started using React, as well as the ecosystem of associated tools like Webpack, Jest, and Babel. After creating the scaffolding, we'll port the code we wrote in previous tutorials to the new structure.

In this tutorial we'll:

• Use create-react-app to scaffold a new React project
• Refactor existing code into the organizational structure used by create-react-app
• Confirm that our code runs

By the end of this tutorial, you should know what create-react-app is and how to get started using it.

When you create a fully decoupled application, the code in your application can't rely on things like the fetch() function's same-origin policy and the browser's use of cookies to authenticate requests. Instead, you need to use alternative methods like OAuth or JSON Web Tokens (JWTs).

We'll focus on setting up and using Drupal as an OAuth provider, and allowing a decoupled application to authenticate users via OAuth. This same technique applies just as well if you want to use JWTs.

In this tutorial we'll:

• Install the Simple OAuth Drupal module, and configure it to work with a password grant flow to allow our code to exchange a username and password for an access token
• Demonstrate how to retrieve and use an OAuth access token to make authenticated requests

By the end of this tutorial you should know how to install and configure the Simple OAuth module and make authenticated API requests using an OAuth password grant flow.