diff --git a/modules/pdb_react/components/react_example_1/react-example-1.js b/modules/pdb_react/components/react_example_1/react-example-1.js
index 9f54265..47b10fc 100644
--- a/modules/pdb_react/components/react_example_1/react-example-1.js
+++ b/modules/pdb_react/components/react_example_1/react-example-1.js
@@ -1,5 +1,11 @@
-ReactDOM.render(React.createElement(
- 'h1',
- null,
- 'Hello, world!'
-), document.getElementById('react-example-1'));
+// The code was taken from https://reactjs.org/docs/components-and-props.html
+function Welcome(props) {
+ return
Hello, {props.name}
;
+}
+
+const element = ;
+
+ReactDOM.render(
+ element,
+ document.getElementById('root')
+);
\ No newline at end of file
diff --git a/modules/pdb_react/components/react_example_1/react_example_1.info.yml b/modules/pdb_react/components/react_example_1/react_example_1.info.yml
index 52b8aee..b69b627 100644
--- a/modules/pdb_react/components/react_example_1/react_example_1.info.yml
+++ b/modules/pdb_react/components/react_example_1/react_example_1.info.yml
@@ -9,4 +9,5 @@ module_status: active
presentation: react
add_js:
footer:
- 'react-example-1.js': {}
+ 'react-example-1.js': { preprocess: 0, attributes: { type: text/babel } }
+
diff --git a/modules/pdb_react/pdb_react.libraries.yml b/modules/pdb_react/pdb_react.libraries.yml
index 7704be8..5fdf837 100644
--- a/modules/pdb_react/pdb_react.libraries.yml
+++ b/modules/pdb_react/pdb_react.libraries.yml
@@ -1,8 +1,9 @@
react:
version: VERSION
js:
- //cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js: {type: external, minified: true}
- //cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js: {type: external, minified: true}
+ //unpkg.com/react@16/umd/react.production.min.js: {type: external, minified: true}
+ //unpkg.com/react-dom@16/umd/react-dom.production.min.js: {type: external, minified: true}
+ //unpkg.com/@babel/standalone/babel.min.js: {type: external, minified: true}
dependencies:
- core/drupal
- core/drupalSettings