This repo contains the code and instructions related to our Frontend ProDev sprint for exploring topics around decoupled React and Drupal. Each week will focus on a particular problem or use case around using Drupal and React together. The goals for each week will be to explore and research a given problem and to implement a working solution.
Each week will have its own set of instructions along with a detailed description of the problems we are attempting to solve. There will be links to blog posts and external documentation that may be helpful to explore. There will also be a working solution published to a branch of this repository along with documentation.
There are multiple ways to approach this course. For people already familiar with Drupal and React or those who would rather dive head first into a challenge, feel free to ignore the existing solution and use whatever resources you have available. The links in this project README's may be helpful, but also feel free to use any other resources you may find.
For those who are newer to React and/or Drupal and for those who would rather take a more direct approach, there is a working solution available in the project repo in addition to a video walkthrough of the code. Feel free to watch the video first to get an understanding of the solution or work through the problem on your own and come back to solution at the end to compare.
This course is intended to be as flexible as possible and to be approachable to a wide variety of skill sets. Feel free to approach the material how ever you feel best suits your goals and needs.
- Part 1: Create a Custom React Block or Route
- Part 2: Integrate React with a Custom Drupal Theme
- Part 3: Data Fetching in Decoupled React + Drupal
To set up this site locally and work through the content, you will need to setup ddev and NodeJs on your local machine and have access to a code editor.
Follow the instructions on the DDEV getting started page that match your operating system.
If you have an older version of DDEV installed, then you may need to update before you can run the solutions. DDEV version v1.21.6+ is recommended for this project.
You will need to download and install NodeJs if it's not already installed on you system.
Node version 16.15.0+ is recommended for this project.
You may use any code editor for this course, but PhpStorm and VScode are both good options.