In the era of a realtime, fast, performant web application, one cannot overlook the superpowers of ReactJS and the wonders it can do when used right.
The beauty of ReactJS is that it can be easily integrated with any other framework. Let’s have a look at how to integrate ReactJS with Drupal 8 and Drupal 7.
We rely on ReactJS to handle the heavy UI and leave the rest to Drupal.
These are the steps we will follow. [The steps will be elaborated later in the blog]
DRUPAL 8 SETUP
Add the following in the ‘scripts’ package.json
Your package.json should now look like this:
Voila!!!
After creating this, I enabled the module that I created programmatically. Then in the Block Layout in the Content region, I placed this custom block.
Once all of this is done, visit the respective drupal page. It should have the React application within. Theme the block and React application as you wish. You have now completed the basic setup of Progressively Decoupled Drupal 8 with ReactJS.
DRUPAL 7 SETUP
.avif)
Note: notice
array(‘scope’ => ‘footer’)
It is important to load the JS files at the footer of the block or else it will be added at the beginning of the block. It will look for a div with the respective id and since the HTML is not yet rendered, it won’t find one resulting in `Uncaught Invariant Violation: Minified React error`
notice array(‘scope’ => ‘footer’)
Loads the JS files at the footer, avoiding the above-mentioned error.
.avif)