simplify the react integration example

Author: lovasoa

examples/using react and other custom scripts and styles/README.md

@@ -1,6 +1,7 @@
 # Custom javascript and CSS
 
 This example shows how to use custom javascript and CSS in your application.
+It is compatible with SQLPage v0.7.3 and above.
 
 It integrates a simple [react](https://reactjs.org/) component and loads it with properties coming from a SQL query.
 

examples/using react and other custom scripts and styles/my_react_component.js

@@ -1,7 +1,7 @@
 // Here we are using React and ReactDOM directly, but this file could be a compiled
 // version of a React component written in JSX.
 
-function RootComponent({ greeting_name }) {
+function MyComponent({ greeting_name }) {
     const [count, setCount] = React.useState(0);
     return React.createElement(
         'button',
@@ -13,5 +13,5 @@ function RootComponent({ greeting_name }) {
 for (const container of document.getElementsByClassName('react_component')) {
     const root = ReactDOM.createRoot(container);
     const props = JSON.parse(container.dataset.props);
-    root.render(React.createElement(RootComponent, props, null));
+    root.render(React.createElement(window[props.react_component_name], props, null));
 }

examples/using react and other custom scripts and styles/react.sql

@@ -9,6 +9,5 @@ SELECT 'shell' AS component,
     'my_react_component.js' AS javascript;
 
 SELECT 'react_component' AS component,
-    JSON_OBJECT(
-        'greeting_name', 'World'
-    ) AS props;
+        'MyComponent' AS react_component_name,
+        'World' AS greeting_name;

examples/using react and other custom scripts and styles/sqlpage/templates/react_component.handlebars

@@ -1,3 +1,3 @@
-<div class="react_component" data-props="{{props}}">
+<div class="react_component" data-props="{{stringify this}}">
   Dynamic component is loading...
 </div>