Dots are separated backend driven React components.
What does it mean? It means you can add multiple single react components on your front-end and send them initial props right from your backend.
react-dot is intended for projects where you can't leverage inertiajs' SPA approach, or for existing server-side rendered projects where you just need to easily add some react interactivity without resorting to rebuilding the whole thing in react.
While react-dot only needs html to work, you can use a backend adapter to help you generate the markup it needs to initialize.
https://github.com/patlamontagne/react-dot-php
npm i @patlamontagne/react-dotInitialize the components (example with React 18's createRoot)
import { createDots } from "@patlamontagne/react-dot";
import { createRoot } from "react-dom/client";
createDots({
resolve: (name) => require(`./components/${name}.jsx`),
setup: ({ el, Dot, props }) => {
createRoot(el).render(<Dot {...props} />);
},
});<body>
<div data-dot="MyComponent"
data-prop-title="Welcome"
data-prop-mode="dark"
data-prop-list="['foo', 'bar']"
>
<div>Children content</div>
</div>
</body>// components/MyComponent.jsx
export default function MyComponent({ title, mode, list, children }) {
// ....
}Add @babel/plugin-syntax-dynamic-import to your project:
npm i @babel/plugin-syntax-dynamic-importAdd a .babelrc file at the project root:
{
"plugins": [
"@babel/plugin-syntax-dynamic-import"
]
}Use import instead of require :
createDots({
resolve: (name) => import(`./components/${name}.jsx`),
/*...*/
});