![](/sites/default/files/styles/max_800w/public/tutorial_icons/reactanddrupal_12.png?itok=xxl5oB3g)
To perform POST, PUT, and DELETE operations to Drupal's JSON:API via a decoupled React application we need to use an OAuth access token. This requires first fetching the access token from Drupal, and then including it in the HTTP Authorization
header of all future requests. We'll also need to handle the situation where our access token has expired, and we need to get a new one using refresh token.
To update our example application we need to first write some JavaScript code to manage the OAuth tokens. Then we'll update our existing React components to use that new code.
In this tutorial we'll:
- Write code to exchange a username and password for an OAuth access token using the password grant flow
- Create a wrapper for the JavaScript
fetch()
that handles inserting the appropriate HTTPAuthorization
headers - Update existing code that calls the Drupal JSON:API to use the new code
By the end of this tutorial you'll be able to use OAuth access tokens to make authenticated requests in a React application using fetch
.
React Fast Refresh (formerly Hot Module Replacement) is a technique for using Webpack to update the code that your browser renders without requiring a page refresh. With fast refresh configured it's possible to edit your JavaScript (and CSS) files in your IDE and have the browser update the page without requiring a refresh, allowing you to effectively see the results of your changes in near real time. If you're editing JavaScript or CSS it's amazing. And, it's one of the reasons people love the developer experience of working with React so much.
If you're writing React code as part of a Drupal theme it's possible configure fast refresh to work with Drupal. Doing so will allow live reloading of any JavaScript and CSS processed by Webpack.
In this tutorial we'll:
- Walk through configuring Webpack and fast refresh for a Drupal theme
- Add an
npm run start:hmr
command that will start the webpack-dev-server in hot mode - Configure the webpack-dev-server to proxy requests to Drupal so we can view our normal Drupal pages
By the end of this tutorial you should know how to configure Webpack to allow the use of React's fast refresh feature to your Drupal theme and preview changes to your React code in real time.
Every theme can contain an optional THEMENAME.theme file. This file contains additional business logic written in PHP and is primarily used for manipulation of the variables available for a template file, and suggesting alternative candidate template file names. Themes can also use this file to implement some, but not all, of the hooks invoked by Drupal modules.
In this tutorial we'll learn:
- The use case for THEMENAME.theme files, and where to find them
- The different types of functions and hooks you can implement in a THEMENAME.theme file
By the end of this tutorial you should be able to know how to start adding PHP logic to your custom theme.
Themes and modules can alter the list of theme hook suggestions in order to add new ones, remove existing ones, or reorder the list. This powerful feature allows for the definition of custom logic in your application that can tell Drupal to use different templates based on your own unique needs. You might for example; use a different page template for authenticated users, or a custom block template for someone's birthday.
In this tutorial we'll cover:
- Adding new theme hook suggestions from a theme using
hook_theme_suggestions_HOOK_alter()
- Altering the list of theme hook suggestions
- Removing theme hook suggestions
- Reordering the list of theme hook suggestions
Just like PHP or JavaScript, Twig has functions that can be used once we’re inside either a Twig delimiter. To see the built-in functions, check out the bottom of the Twig documentation page. In your application, especially if you’re using Twig inside something like Symfony or Drupal, you may have even more functions available to you. Fortunately, the syntax to use a function is always the same: just check out your project’s documentation to see what other goodies you have. In this tutorial, you will start using Twig functions and filters to get the length of a collection in our demo site. We'll also play around with the dump
function to see how we can go about debugging Twig.
Additional resources
Until now, we’ve been working with simple values like pageTitle or products, which is an array that contains simple values where we loop over and print each out. In this tutorial, you will work with more complicated arrays, using keys, and figure out how to get at object data as well.
If we view the HTML source of our project so far, we’ll see just the HTML tags and printed variables from our homepage.twig file
. So far, there’s no HTML layout, head or body tags, but since our project has been ugly long enough, in this tutorial we'll add these. Instead of just putting these in our homepage file, we're going to make this more flexible by using template inheritance, so we can reuse these pieces in other template files as we grow our site. We'll be diving into the world of Twig extends and blocks, and talking about how to avoid common mistakes.
Additional resources
Using a base layout is very common, and we’ve implemented that in the previous tutorial. Sometimes you also need to include some other templates on only select pages. In this tutorial you are going to add a sales banner to the pages using the include
function, and working with the variables we can pass there.
Additional resources
Be sure to check the documentation for the version of Twig in your codebase for the correct syntax and usage.
In our last tutorial we have things set up to include a new template, but we are currently getting an error, due to not passing the correct variable. In this tutorial we'll see how to fix this problem by adding a "defined" test to our code, which will check to see if the variable is defined in the _banner.twig template
, and default to "lightblue" if it is not.
Additional resources
Our products are printing out a bit weird right now because they’re floating, but not breaking correctly. To fix this, we need to wrap every three products in their very own row. In this tutorial, you will use a "divisibleby" test to see if the item number we’re on is divisible by three, and then loop through them. We'll also clean up our if
statement for our background color, by implementing an inline if
syntax.
In this tutorial we're going to purposely make some common Twig mistakes, debug them, and figure out how to fix them. We'll also look at a way to make parts of your Twig code easily reusable, using macros.
Twig: The Basics
FreeTwig is a templating language for PHP, which is a boring way of saying that it’s a tool used to output variables inside HTML. In this series we'll show you how to use Twig from the ground up, clearly pointing out its syntax, and then graduating to some really neat and advanced tricks. We'll start with a look at Twig syntaxes, functions and filters. Then we'll get into the world of debugging with the dump()
function. With the basics under control, we'll move to handling arrays and objects. template inheritance, tests, looping tricks, and macros (Twig functions).
To make this interesting, we're going to build something useful with Twig, like a penguin clothing store! We're starting out with a small website set up under your web server’s document root and a test page called test.php, which you can find in the series demo site download. In this lesson, you will create your first Twig template, render a variable, and learn the basic Twig syntax you'll need to know.
Additional resources
Twig Templating
CourseUnderscore.js is a very small library which provides several utility functions and helpers to make working with JavaScript a little bit easier. In this tutorial we'll take a look at a part of the library, learn where the full library is documented, and see how we can make use of Underscore.js in a custom block on our Drupal site.
Make your theme a subtheme of a base theme, allowing it to inherit all the base theme's templates and other properties. When creating Drupal themes it is common to use the Classy theme provided with Drupal core as a base theme to jumpstart your development.
In this tutorial we'll learn how to:
- Use the
base theme
key in our theme's THEMENAME.info.yml file - Make our Ice Cream theme inherit from the Classy theme, or any other theme
By the end of this tutorial you should be able to tell Drupal that your theme is a child of another theme and should inherit all of the parent theme's features.
In Drupal, whenever we output markup it's best practice to use a Twig template or a theme function. But whenever you need to output DOM elements within JavaScript the best practice is to use the Drupal.theme
function. This function ensures that the output can be overridden just like the HTML output by Twig. This tutorial covers how to use the Drupal.theme
function in your JavaScript when inserting DOM elements, as well as how to replace the markup output by other JavaScript code that is using the Drupal.theme
function.
ESLint is the linting tool of choice for JavaScript in Drupal. In this tutorial we’ll show how to install the ESLint application and then use it to verify that your JavaScript files are meeting the Drupal coding standards.
Drupal (as of version 8.4) has adopted the Airbnb JavaScript coding standards. In this tutorial, we'll walk through how to install the necessary package dependencies to run eslint on JavaScript files within your Drupal site.
An asset library is a bundle of CSS and/or JavaScript files that work together to provide a style and functionality for a specific component. They are frequently used to isolate the functionality and styling of a specific component, like the tabs displayed at the top of each node, into a reusable library. If you want to include CSS and/or JavaScript in your Drupal theme or module you'll need to declare an asset library that tells Drupal about the existence, and location, of those files. And then attach that library to a page, or specific element, so that it gets loaded when needed.
In this tutorial we’ll:
- Define what an asset library is.
- Explain why asset libraries are used to include JavaScript and CSS files.
- Look at some example asset library definitions.
By the end of this tutorial you should be able to define what asset libraries are, and when you'll need to create one.
Preprocess functions allow Drupal themes to manipulate the variables that are used in Twig template files by using PHP functions to preprocess data before it is exposed to each template. All of the dynamic content available to theme developers within a Twig template file is exposed through a preprocess function. Understanding how preprocess functions work, and the role they play, is important for both module developers and theme developers.
In this tutorial we'll learn:
- What preprocess functions are and how they work
- The use case for preprocess functions
- The order of execution for preprocess functions
By the end of this tutorial you should be able to explain what preprocess functions are and the role they play in a Drupal theme.
Template files are responsible for the HTML markup of every page generated by Drupal. Any file ending with the .html.twig extension is a template file. These files are composed of standard HTML markup as well as tokens used by the Twig template engine to represent dynamic content that will be substituted into the HTML markup when the template is used. As a theme developer, you'll work with this a lot.
In this tutorial we’re going to learn about:
- What template files are, and how they fit into the big picture of creating a theme
- How template files are used in order to allow theme developers to modify the HTML markup output by Drupal
- Naming conventions for, and specificity of, template files