We’ve already discussed in our blog how decoupling Drupal helps you achieve greater flexibility, to deliver data anywhere and everywhere to the user at a lightning fast speed, ensuring exceptional web experience.
Let’s dig deeper into the technical details of how progressively decoupled apps can be created using React on a Drupal 8 website.
Why Opt For This Approach
With the increasing popularity of ReactJS, JavaScript libraries and frameworks prove to be useful in building complex applications by seamlessly getting embedded on a Drupal site, thus combining the robustness of an API-first CMS with slick and quick React frontend to collectively give way to amazing digital experiences along with future-proof builds.
How To Create Progressively Decoupled App With React on Drupal
Step 1: Create React Environment
In our last blog on React, we learned how to set up Setup React App From Square One Without Using Create-React-App Once the environment is set up, we shall move forward to creating a React app.
Step 2: Create React Application
Before looking into the process of creating a React application, let’s get a hold of the below terms:
- Components - It's the building block of any react app. Basically, there are two types of components: Functional and Class (From 16+ react version, this component is deprecated. Only functional components are used.)
- Props - Arguments passed in react components to send data to components.
- States - Behaves like a data store to components. It’s mostly to update components when user performs some operation like clicking buttons, typing some text etc.
Now, let's write our first code block of React by using ES6 classes to create a React component called App.
class App extends React.Component {
//...
}Now we'll add the render() method to render DOM nodes.
class App extends React.Component {
render() {
return (
//...
);
}
}In return, we’ll insert a simple HTML element.
class App extends React.Component {
render() {
return <h1>Hello world!</h1>
}
}Finally, we're going to use the React DOM render() method to render the App class we created into the root div in our HTML.
ReactDOM.render(<App />, document.getElementById('root'))Here is the full code for our index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
render() {
return <h1>Hello world!</h1>
}
}
ReactDOM.render(<App />, document.getElementById('root'))
</script>
</body>
</html>Now if you view your index.html in the browser, you'll see the H1 tag we created rendered to the DOM.
Hello World screenshot
Step 3: Visualizing the React component in Storybook
Storybook is a user interface development environment and playground for UI components.
The tool allows testing the components independently and interactively in an isolated development environment. Story file code looks like:
After running `npm run storybook` command, storybook will open on localhost server as shown in the attached screenshot.
Step 4: Creating Custom Block API in Drupal 8 and Embedding React application
On running npm run build command on React application, it creates this react minified JS file:
/drupal_root/module/custom/react_block/react_block.libraries.yml
The minified js file searches for the markup in the /drupal_root/module/custom/react_block/src/Plugin/Block/ReactApp.php file
and on finding the div ID, it renders itself at that point.
And this is how the React block renders itself on our Drupal 8 website and makes the website a progressively decoupled app..
For one of our clients, we implemented this solution to create a budget planner and currency calculator for a giant travel retail outlet and helped boost the sales just after 3 months of its deployment.
Srijan can help you leverage the power of React with API-first Drupal to create robust content workflows and hence lead to joyful editorial experiences for your business to evolve. Get in touch with our experts or leave your queries in the comment section below and let’s get the conversation started.
