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