Drupal site administrators can create new media entity types, with their own unique configurations and sets of associated fields. Different media types can be configured with different field names, permissions, moderation workflows, and display settings, making it possible to create truly custom content administration experiences. The process is similar to creating a node content type like articles or events with one major distinction: every media type inherits from a specific media source plugin. The source plugin provides domain-specific knowledge about the kind of resource being represented. For example, the Remote video source plugin used with the default Remote video media type knows how to consume and display videos from YouTube and Vimeo given only their URL.

Drupal core comes with a couple of common media source plugins, and contributed modules and custom code can add to this list, increasing the different media providers with which Drupal can integrate.

In this tutorial we'll learn how to:

• Install a contributed module that provides a new media source plugin.
• Create a new media type.

By the end of this tutorial you should be able to explain how source plugins relate to media types, and create a new media type.

The Drupal Media Library and Media ecosystem can be integrated with any third-party media provider by defining new media source plugins. Media types (Media entity bundles) have an important distinction compared to other content entity types like nodes. Every media type inherits from a specific media source plugin. The source plugin provides domain-specific knowledge about the kind of resource being represented. For example, media types dealing with images know how to validate file extensions and render <img> tags. Media types dealing with remotely hosted videos might know how to retrieve thumbnails from a remote API, and display an HTML video player and transcript.

In this tutorial we'll learn how to:

• Define a new source plugin
• Integrate a third-party API via its existing PHP library

By the end of this tutorial you should be able to create a new source plugin that exposes any third-party media resources you want to integrate with Drupal.

If the Media assets you want to use in your library support oEmbed, then you might be able to use them with a minimal custom code. Before you go down the path of creating a custom media source plugin try this approach first.

oEmbed is a standard way of allowing third party sites to embed an asset represented by a URL. The Remote Video source in core uses the oEmbed features of YouTube and Vimeo. When you paste a link into a Slack channel, and it displays a pretty card preview, or an embedded video or Spotify playlist, that's oEmbed in action. Does the Media you want to embed have a canonical URL? If so, paste it into the tool here and see if it displays oEmbed info in the results.

In this tutorial we'll:

• Learn how to enable additional oEmbed providers as Media sources
• Use the contributed oEmbed Providers module for compatible providers
• Demonstrate how to create a custom oEmbed media source plugin to further customize the results

By the end of this tutorial you should be able to embed any oEmbed-compatible content as Media assets in Drupal.

When using the Drupal Media Library to browse for available Media entities to attach to your content, the interface that you see inside the modal window is created using Views. This means you can change it for your specific use-case. This is most useful when you want to expose filters for custom fields to allow users to more easily locate content in your library. As your library of media grows, you can create powerful application-specific ways for content authors to segment the list and find their assets.

In this tutorial we'll:

• Learn how to edit the Views used by the Drupal Media Library browser
• Add a new exposed filter for the custom tags field on some media entities
• Demonstrate how this change affects the user interface for locating and selecting media

By the end of this tutorial you should be able to customize the View used by the Media Library to add new filters and make other use-case specific changes.

Media Source plugins in Drupal have a powerful feature, called field mapping, that allows an administrator to configure a Media entity type to automatically populate the value of custom fields based on metadata retrieved from the source content. For example, you can add a creator field to the Remote Video Media type, which can use YouTube as a source. When a content author adds a new Remote Video entity they can provide a URL for the YouTube video. Then the source plugin can extract the creator's name from the YouTube API and use that data to populate a custom field. This saves the content author from having to do that work themselves.

In this tutorial we'll learn:

• How to discover what source metadata is available
• How to configure a Drupal Media type to automatically populate custom fields

By the end of this tutorial you should be able to add a custom field to a Media type on your Drupal site and automatically populate it with data retrieved from the source content.

One of the most powerful features of Drupal's Media Library is that it enables content authors to re-use media entities. Have a favorite image that you like to use with all blog posts about a specific topic? Or a default icon you want to use for a tutorial unless an alternative is provided? The Media Library can accommodate this without requiring you to keep a copy of the image locally and then attach it to every node where it's needed.

This can lead to a potential issue when an editor deletes an image, thinking they've also deleted all the content that used it. If they missed a post referencing the now deleted image, what happens when there is no image to show?

The contributed Entity Usage module provides a mechanism for tracking relationships between entities. This is essential functionality when working with a library of reusable media entities because it helps ensure that media entities attached to content are not deleted.

In this tutorial we'll:

• Discuss the use case for the Entity Usage module
• Learn how to configure Entity Usage to keep track of relationships between media entities and nodes that reference them
• Prevent media items from being deleted if they are in use somewhere on the site

By the end of this tutorial you should be able to explain what the Entity Usage module does, and how to use it to solve common problems related to deleting items from a large Media library.

A commonly asked question is, "How do you add images to the body of a content item in Drupal?" You can allow users to embed images, videos, or any other media into a field configured with a WYSIWYG editor, such as CKEditor. In this tutorial, we’ll show you how to enable Drupal’s Insert Media button for CKEditor, and configure the corresponding text format so that it can render embedded Media entities.

Content authors can then use the Media Library to select images (or other media) to embed into the page.

In this tutorial we'll:

• Learn how to enable the Insert Media button for CKEditor
• Demonstrate how to insert media into the body of a content item (or any other field configured to use CKEditor)

By the end of this tutorial you should know how to configure Drupal to allow content authors to embed images in content items.

Drupal's media management tools, the Media and Media Library modules, provide content authors with drag-and-drop media and asset handling, full WYSIWYG editor integration, and a library of reusable media assets. There's minimal configuration required to get started, but full control via Drupal's standard Entity and Field systems for those who need it.

In this tutorial we'll:

• Provide an introduction to the media system in Drupal and its use-cases
• Explain the Drupal core features that the Media system is built on
• Link to other tutorials that will go into much more depth on these topics

By the end of this tutorial you should know what role the Media and Media Library core modules fill and know whether or not you'll want to make use of them on your project.

Media entities are standard Drupal fieldable content entities. For the most part, they function, and are managed, in the same way as Nodes. So if you've previously created content in Drupal, much of working with Media entities should be familiar -- with some notable exceptions related to the connections between Media types and the media resources they represent.

In this tutorial we'll:

• Get an overview of Media entities, Media types, and Media fields in Drupal
• Point to other tutorials that go into more depth on individual topics
• Learn some basic terminology and concepts related to the Media system in Drupal

By the end of this tutorial you'll have an overview of the pieces that make up the Media system in Drupal core.

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.