Upgrade Your Drupal Skills
We trained 1,000+ Drupal Developers over the last decade.
See Advanced Courses NAH, I know EnoughStep-by-Step Guide to Create Progressively Decoupled App with React in Drupal 8
Now we'll add the render() method to render DOM nodes.
index.html
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/[email protected]/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.
About Drupal Sun
Drupal Sun is an Evolving Web project. It allows you to:
- Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
- Facet based on tags, author, or feed
- Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
- View the entire article text inline, or in the context of the site where it was created
See the blog post at Evolving Web