- Composer must be installed on your local machine.
For this tutorial, we are going to do the following:
- Install Acquia CMS Community using the Acquia Drupal Recommended Project
- Add the Component and Component examples modules
- Add a React Calculator component to our site as a block
Note: If you have an existing Drupal application, you can skip to step 3. The Component module works with Drupal 8 and above. You do not have to start with Acquia CMS.
Create a Drupal application with Acquia Drupal Recommended Project
Create a new project using Composer:
composer create-project --no-interaction acquia/drupal-recommended-project
You can learn more about Creating a new Drupal application with Composer from Matthew Grasmick's tutorial.
Install Acquia CMS Community
Now that we have created our project; we can install the Acquia CMS Community starter kit.
This will ask you several questions about the starter kit you want to start from and any “add-ons” you want to add:
Please choose bundle from one of the above use case [acquia_cms_community]: > acquia_cms_community
Add the Component module
To add components to our Acquia CMS Community application, we need to add the Component module.
composer require 'drupal/component'
Now that the module has been added to our project, we can enable Component and Component example.
drush en component component_example -y
Display the React Calculator
The Component example module includes four components available as blocks, Example blank, Example Config, Example React Calculator, and Example Tabs.
Below you can see the Example React Calculator placed in the Olivero sidebar.
If you want inspiration for your custom component, consider browsing Codepen. One of my favorites in the Impossible Checkbox. Using the calculator example as a guide, see if you can add the Impossible Checkbox to your Drupal application.