{"id":20838450,"url":"https://github.com/reload/react-drupal-example","last_synced_at":"2025-09-04T15:45:58.371Z","repository":{"id":55383304,"uuid":"315967511","full_name":"reload/react-drupal-example","owner":"reload","description":"Make use of React without webpack and other additional tooling in Drupal 9.","archived":false,"fork":false,"pushed_at":"2021-01-04T10:02:16.000Z","size":21878,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-31T14:10:10.155Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reload.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-25T14:42:47.000Z","updated_at":"2021-01-04T10:02:11.000Z","dependencies_parsed_at":"2022-08-14T23:01:08.450Z","dependency_job_id":null,"html_url":"https://github.com/reload/react-drupal-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/reload/react-drupal-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reload%2Freact-drupal-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reload%2Freact-drupal-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reload%2Freact-drupal-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reload%2Freact-drupal-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reload","download_url":"https://codeload.github.com/reload/react-drupal-example/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reload%2Freact-drupal-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273633029,"owners_count":25140772,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-04T02:00:08.968Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-18T01:10:18.907Z","updated_at":"2025-09-04T15:45:58.344Z","avatar_url":"https://github.com/reload.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React in Drupal 9\n\nThis is small example of a simple approach when wanting to utilize React in Drupal.\nThis might not be suited for production but it might spark you imagination and your\ninterest into the rediscovered world of tools light development.\n\n![React in Drupal example](https://raw.githubusercontent.com/reload/react-drupal-example/main/example_assets/react_in_drupal.gif)\n\n```javascript\n\nlet html, useState;\nconst BLOCK_CLASS = \"react-example\";\n\n(function (Drupal, drupalSettings) {\n  Drupal.behaviors.reactExample = {\n    attach: function (_context, _settings) {\n      html = htm.bind(React.createElement);\n      useState = React.useState;\n      document.querySelectorAll(`.${BLOCK_CLASS}`).forEach((node) =\u003e {\n        ReactDOM.render(html`\u003c${App} ...${node.dataset} /\u003e`, node);\n      });\n    },\n  };\n})(Drupal, drupalSettings);\n\nfunction App({ blockId, initialName }) {\n  const [name, setName] = useState(initialName);\n\n  return html`\n    \u003cdiv\u003e\n      \u003c${Title} name=${name} id=${blockId} /\u003e\n      \u003cbutton onClick=${() =\u003e setName(\"React\")}\u003e\n        Press me to draw!\n      \u003c/button\u003e\n      ${name === \"React\" \u0026\u0026\n      html`\n        \u003cdiv style=${{ border: \"1px solid black\" }}\u003e\n          \u003c${SketchField}\n            width=\"100%\"\n            height=\"500px\"\n            tool=${Tools.Pencil}\n            lineColor=\"gold\"\n            lineWidth=\"3\"\n          /\u003e\n        \u003c/div\u003e\n      `}\n    \u003c/div\u003e\n  `;\n}\n\nfunction Title({ name, id }) {\n  return html`\u003ch1\u003eThis is block: ${id} with the name of ${name}!\u003c/h1\u003e `;\n}\n\n```\n\n## Take a look at\n\n- [modules/react_example/src/Form/SettingsForm.php](web/modules/react_example/src/Form/SettingsForm.php)\n- [modules/react_example/src/Plugin/Block/ReactExampleBlock.php](web/modules/react_example/src/Plugin/Block/ReactExampleBlock.php)\n- [modules/react_example/react_example.module](web/modules/react_example/react_example.module)\n- [modules/react_example/templates/react-example.html.twig](web/modules/react_example/templates/react-example.html.twig)\n- [modules/react_example/react_example.libraries.yml](web/modules/react_example/react_example.libraries.yml)\n- [modules/react_example/js/react-example.js](web/modules/react_example/js/react-example.js)\n\nWriting modern web applications comes with a lot of assumptions.\nThere should be scoped styling (CSS modules, CSS-in-JS) included,\nautomatic browser target configuration, intelligent, tree-shake-able module\nbundling and so on.\n\nThis example is not trying to address any of that. Those are quality of life\nfeatures that most web application developers have gotten used to and expect.\n\nBut sometimes you do not need or want to bring out the big guns but you need\na little more control than what is easily accessible in the browser provided\nlibraries. Previously one would grab for jQuery, which is still a great tool,\nbut the expectations of your web applications have changed and a library such as\nReact (or Vue, Preact etc.) is better suited to some of our highly interactive\nweb applications.\n\nThis is all well and good if you are good with generating your HTML markup on\nthe client. What if it's crucial that your markup is generated on the server?\nOne could go down the rabbit hole of getting React server side rendered but then\nthis example would loose it's simplicity.\nAn alternative is to let Drupal and the Twig template language do what it's\ngood at and utilize a project such as [Stimulus](https://stimulusjs.org/) that\ntakes existing HTML and injects it with a bit of state management power.\n\n## Getting up and running\n\n### Install Drupal\nGet the Drupal site up and running. This can be done using [Lando](https://lando.dev).\n\n```\nlando start\nlando composer install\nlando drush si --db-url=mysql://drupal9:drupal9@database/drupal9 -y\nlando drush en react_example -y\n```\n\n### Place the block\n\nLog into the site, go to the block configuration and place the React example block into the content section.\n\n### See React in action\n\nGo to the frontpage and the see the block being rendered.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freload%2Freact-drupal-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freload%2Freact-drupal-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freload%2Freact-drupal-example/lists"}