-
-
Save Klerith/b0111f52ba16451d095f38d4c995605b to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <!-- Cargat React --> | |
| <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> | |
| <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> | |
| <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> | |
| <title>Curso de React</title> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script> | |
| // ==== Código | |
| </script> | |
| </body> | |
| </html> |
Para los que empiezan el curso y se enfrentan al problema de que no le cargue el Hola Mundo, es un tema de actualizar los scripts, los que ha dejado ahí están obsoletos. @Klerith Creo que deberías actualizar el archivo modificando el código, para ayudar a los nuevos.
En tu curso hay una persona que ha dejado los siguientes y funcionan, ya que en react 18 ya no funciona, con utilizar los de react 17 ya estaría bien.
<!-- This is what supports JSX compilation (and other transformations) -->
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
<!-- These are for React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
OJO revisad el código, es case sensitive, así que importa lo que escribáis en mayúsculas, en este caso es: ReactDOM.render
Quedando el código al final de la parte del Hola Mundo, tal que así.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- This is what supports JSX compilation (and other transformations) -->
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
<!-- These are for React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<title>ReactApp</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel" data-presets="react,stage-3">
const divRoot = document.querySelector('#root');
const h1tag = <h1>Hola Mundo </h1>;
ReactDOM.render (h1tag,divRoot);
</script>
</body>
</html>
Quedaría así, espero que os sirva.
Un saludo!
He visto que en todos los que tienen problema importando el ReactDOM, tienen escrito ReactDom, recuerden copiarlo exactamente igual: ReactDOM con las tres letras de la segunda palabra en mayúsculas. Es case sensitive, así que las mayúsculas afectan en este caso.
hola , acabo de comenzar y tengo estos errores , inclusive al usar el código propuesto arriba agradezco si tiene la solución
hola , acabo de comenzar y tengo estos errores , inclusive al usar el código propuesto arriba agradezco si tiene la solución
Buena tarde estimado yo lo solucione de la siguiente manera :
<!-- REACT LIBRARY -->
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<!-- REACT DOM LIBRARY -->
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<!-- BABEL LIBRARY -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
<title>Curso de React</title>
<div id="root"></div>
<script type="text/babel">
const prueba= document.querySelector('#root');
const nombre = 'Allan';
const h1Tag= <h1>Hola soy, {nombre}</h1>;
ReactDOM.render(h1Tag,prueba)
</script>
La IA nos va a sustituir y hace bien, el mundo y los humanos somos demasiado importantes como para q este todo en nuestras manos infantiles.
Empezando este curso con el gran profe Herrera! Vamos con todo!
Let's keep it up!
Gracias @kitecin !
Gracias !!
gracias, máximo esfuerzo.
En mi caso me salen éstos errores, incluso copiando el código desde acá
Actualizo, tiene que ver con las extensiones que tenemos en Chrome. Me deshice de varias y desaparecieron las notificaciones, el ID de la notificacion coincide con la extension.