Skip to content


Repository files navigation


Four Kitchens

Lessons + Code examples for the 4K Drupal 8 + React + Waterwheel training


Four Kitchens Luke Mike Randy Taylor Patrick
Four Kitchens Luke Mike Randy Taylor Patrick



  • Install nvm or another Node.js Version Manager:
  • nvm install 6 Download Node 6
  • git clone && cd waterwheel-training - Clone this repo and change directory into it
  • If that doesn’t work try cloning with git clone
  • nvm use - Change to supported node version (Node 6) if you have nvm installed
  • npm install -g yarn - Install yarn package manager. You can brew install yarn too, if you want
  • yarn - Install all training dependencies from inside the top level directory of the training repo
  • cd lesson-3 - Change directory into desired lesson (Do not run yarn inside lesson directories)
  • Inside src/config create local.json with the clientSecret in it
  "client_secret": "abc123"
  • cd lesson-3-answer - Change directory into desired lesson
  • Inside src/config create local.json with the clientSecret in it.
  "client_secret": "abc123"
  • cd ../lesson-1 and run yarn start - Start the app
  • Browser window will open and code changes will hot reload
  • In each lesson directory, you'll see a README. ex: lesson-1/ Each README contains the step to complete the respective lesson.

What are we going to build today?

We are going to add a like button to a Multiuser Todo app. The Todo app is based on the React Todo MVC example. First we’ll add the "like" button as a React component and then follow up by connecting it to our Datastore. Since React leverages some new syntax that was introduced to Javascript in ES2016, we’ll give a quick intro there. We’ll put this particular “headless” architecture into context with other options and talk a bit about how to securely authenticate users. We don’t expect that anyone is going to leave an expert in all these new technologies, but hope that everyone will have the tools they need to dive deeper on their own. Drupal is our API and Datastore. React handles rendering the UI, and Waterwheel makes using interacting with and authenticating against Drupal’s API easy.

For an in depth overview of the course check out the preview blog post for DrupalCon Baltimore.


This training was originally written to use Redux for state management. To simplify the training and focus more on Waterwheel (along with other reasons), we’re going to use React’s built in setState to manage state. As you’ll see in some of the lesson code, the skeleton of this lesson still uses Redux, but you can safely ignore it. The Like button feature we’ll be adding won’t use it. There is a redux folder in the training repo if you’d like to explore on your own after the training.

Stretch Lessons

  • 🥉 BRONZE: Add a filter that only show the logged in users likes called “Mine,”
  • 🥈 SILVER: Add a message component that displays errors received from the server.
  • 🥇 GOLD: Complete the lessons in the redux directory to learn about alternative state management techniques.

Future/Issues to watch






Resources + Code examples for the 4K Waterwheel training






No packages published