Skip to content
Resources + Code examples for the 4K Waterwheel training
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs chore(readme): Update README with Issues to Watch, Stretch Lessons, a… May 11, 2017
lesson-1
lesson-2-answer feat(lesson-2): Add completion steps for lesson 2. May 11, 2017
lesson-2
lesson-3-answer
lesson-3
redux
.emdaer.yml
.gitignore
.nvmrc
README.md
package.json
yarn.lock

README.md

waterwheel-training

Four Kitchens

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

Contributors

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

Prerequisites

Usage

  • Install nvm or another Node.js Version Manager: https://github.com/creationix/nvm#installation
  • nvm install 6 Download Node 6
  • git clone git@github.com:fourkitchens/waterwheel-training.git && cd waterwheel-training - Clone this repo and change directory into it
  • If that doesn’t work try cloning with git clone https://github.com/fourkitchens/waterwheel-training.git
  • 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/README.md. 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.

NOTE:

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

Authentication

React

API

You can’t perform that action at this time.