https://github.com/reload/react-drupal-example
Make use of React without webpack and other additional tooling in Drupal 9.
https://github.com/reload/react-drupal-example
Last synced: 2 months ago
JSON representation
Make use of React without webpack and other additional tooling in Drupal 9.
- Host: GitHub
- URL: https://github.com/reload/react-drupal-example
- Owner: reload
- Created: 2020-11-25T14:42:47.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-01-04T10:02:16.000Z (over 4 years ago)
- Last Synced: 2025-01-18T23:17:29.773Z (4 months ago)
- Language: PHP
- Homepage:
- Size: 20.9 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React in Drupal 9
This is small example of a simple approach when wanting to utilize React in Drupal.
This might not be suited for production but it might spark you imagination and your
interest into the rediscovered world of tools light development.
```javascript
let html, useState;
const BLOCK_CLASS = "react-example";
(function (Drupal, drupalSettings) {
Drupal.behaviors.reactExample = {
attach: function (_context, _settings) {
html = htm.bind(React.createElement);
useState = React.useState;
document.querySelectorAll(`.${BLOCK_CLASS}`).forEach((node) => {
ReactDOM.render(html`<${App} ...${node.dataset} />`, node);
});
},
};
})(Drupal, drupalSettings);
function App({ blockId, initialName }) {
const [name, setName] = useState(initialName);
return html`
<${Title} name=${name} id=${blockId} />
setName("React")}>
Press me to draw!
${name === "React" &&
html`
<${SketchField}
width="100%"
height="500px"
tool=${Tools.Pencil}
lineColor="gold"
lineWidth="3"
/>
`}
`;
}
function Title({ name, id }) {
return html`
This is block: ${id} with the name of ${name}!
`;
}
```
## Take a look at
- [modules/react_example/src/Form/SettingsForm.php](web/modules/react_example/src/Form/SettingsForm.php)
- [modules/react_example/src/Plugin/Block/ReactExampleBlock.php](web/modules/react_example/src/Plugin/Block/ReactExampleBlock.php)
- [modules/react_example/react_example.module](web/modules/react_example/react_example.module)
- [modules/react_example/templates/react-example.html.twig](web/modules/react_example/templates/react-example.html.twig)
- [modules/react_example/react_example.libraries.yml](web/modules/react_example/react_example.libraries.yml)
- [modules/react_example/js/react-example.js](web/modules/react_example/js/react-example.js)
Writing modern web applications comes with a lot of assumptions.
There should be scoped styling (CSS modules, CSS-in-JS) included,
automatic browser target configuration, intelligent, tree-shake-able module
bundling and so on.
This example is not trying to address any of that. Those are quality of life
features that most web application developers have gotten used to and expect.
But sometimes you do not need or want to bring out the big guns but you need
a little more control than what is easily accessible in the browser provided
libraries. Previously one would grab for jQuery, which is still a great tool,
but the expectations of your web applications have changed and a library such as
React (or Vue, Preact etc.) is better suited to some of our highly interactive
web applications.
This is all well and good if you are good with generating your HTML markup on
the client. What if it's crucial that your markup is generated on the server?
One could go down the rabbit hole of getting React server side rendered but then
this example would loose it's simplicity.
An alternative is to let Drupal and the Twig template language do what it's
good at and utilize a project such as [Stimulus](https://stimulusjs.org/) that
takes existing HTML and injects it with a bit of state management power.
## Getting up and running
### Install Drupal
Get the Drupal site up and running. This can be done using [Lando](https://lando.dev).
```
lando start
lando composer install
lando drush si --db-url=mysql://drupal9:drupal9@database/drupal9 -y
lando drush en react_example -y
```
### Place the block
Log into the site, go to the block configuration and place the React example block into the content section.
### See React in action
Go to the frontpage and the see the block being rendered.