Estaba intentando usar SystemJS para cargar React, pero no se cargó, sino que arrojó un mensaje de error en Consola> 'React no está definido'
He leído su documentación también buscando preguntas similares pero no satisface mi necesidad, ¿me perdí algo?
Esto es lo que me intentaron
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>React 18 with SystemJS</title> <script src="dependencies/systemjs-6.12.1.min.js"></script> <script type="systemjs-importmap"> { "imports": { "react" : "/react.production-18.min.js" , "reactDOM" : "/react-dom.production-18.min.js" } } </script> </head><body> <div id="root"> <script type="systemjs-module"> System.import('react'); System.import('reactDOM'); class Hello extends React.Component { render() { return React.createElement('div', null, `Hello ${this.props.toWhat}`); } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(React.createElement(Hello, {toWhat: 'World'}, null)); </script> </div></body></html>Edit1: estoy usando SystemJS versión 6.12.1
Necesitas un poco más de configuración para que funcione. También se recomienda mantener el código de react en archivos separados.
Ejemplo de trabajo completo aquí .
Configuración de SystemJS para reaccionar:
System.config({ baseURL: '//npm.jspm.io/', // CDN resolves paths: { 'npm:*': '//npm.jspm.io/*', 'unpkg:*': '//unpkg.com/*', 'jsdelivr:*': '//cdn.jsdelivr.net/g/*', 'jsdelivr-npm:*': '//cdn.jsdelivr.net/npm/*' }, meta: { '*.scss': { loader: "sass" } }, map: { // The Application path 'index': INDEX + '?' + Date.now(), // SystemJS plugins 'plugin-babel': 'unpkg:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'unpkg:systemjs-plugin-babel@0/systemjs-babel-browser.js', // 'scss': 'npm:scss', // Application modules 'react': 'jsdelivr:react@15/react.js', 'react-dom': 'jsdelivr:react@15/react-dom.js' }, packages: { 'https://npm.jspm.io/' : { defaultExtension: 'js' }, 'https://cdn.rawgit.com/*' : { defaultExtension: false }, 'https://unpkg.com/' : { defaultExtension: false }, './index.scss' : { defaultExtension: false }, }, transpiler: 'plugin-babel', babelOptions: { sourceMaps: false, stage0: true, react: true } });