Skip to content

Instantly share code, notes, and snippets.

@Klerith
Created May 6, 2020 19:07
Show Gist options
  • Star 56 You must be signed in to star a gist
  • Fork 30 You must be signed in to fork a gist
  • Save Klerith/b0111f52ba16451d095f38d4c995605b to your computer and use it in GitHub Desktop.
Save Klerith/b0111f52ba16451d095f38d4c995605b to your computer and use it in GitHub Desktop.
Introducción a React
<!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>
@Mustafatarakci
Copy link

##

@Tower95
Copy link

Tower95 commented Jun 27, 2022

@AyrielNoriega
Copy link

:)

@sdar270492
Copy link

arrancando el curso!! vamos con todo!!

@Yeraf
Copy link

Yeraf commented Nov 10, 2022

En hora buena ; )

@CristianHernandez06
Copy link

buena :)

@Yeraf
Copy link

Yeraf commented Nov 12, 2022 via email

@ClaudioPanda
Copy link

Nunca pares de aprender!

@andreshserna
Copy link

Gracias por tus cursos, nos abren un mundo de posibilidades!

@BrayanTF
Copy link

BrayanTF commented Dec 1, 2022

Hola a todos

@sebasdu92
Copy link

Éxitos para todos.

@jorgecamposmayta
Copy link

vamos con todo!

@ErikFantomex
Copy link

cx empezando el curso

@MiguelAngeloH
Copy link

Empezando bien el año 2023

@Alterlapsus
Copy link

Empezando!

@AnaDaniela96
Copy link

Retomando el curso! 😄 éxito a todes.

@mlestrella843
Copy link

Hola!

@alxsandovalmx
Copy link

Aqui vamos!!!

@artik3
Copy link

artik3 commented May 25, 2023

Saludos, sigo el curso y he escrito tal cual el ejemplo pero no me reconoce la funcion ReactDom. Pudiera decirme que hice mal?
Sin título-1

@PlushyZeus35
Copy link

Saludos, sigo el curso y he escrito tal cual el ejemplo pero no me reconoce la funcion ReactDom. Pudiera decirme que hice mal? Sin título-1

¡Hola @artik3 !
Estoy siguiendo el curso actualmente y no he tenido problemas. Como recomendación te diría de asegurarte que has puesto el código correcto en el head (los tres scripts que importan las librerías de react y babel).
Un saludo.

@duvangil
Copy link

Saludos, sigo el curso y he escrito tal cual el ejemplo pero no me reconoce la función ReactDom. ¿Podría decirme que hice mal?Sin título-1

Hola@artik3! Estoy siguiendo el curso actualmente y no he tenido problemas. Como recomendación te diría de asegurarte que has puesto el código correcto en el head (los tres scripts que importan las librerías de react y babel). Un saludo.

Trata de verificar que el script que estas usando tenga la propiedad type="text/babel", yo acabo de realizar lo mismo y me funciono correctamente, Saludos!!

@duvangil
Copy link

Saludos, sigo el curso y he escrito tal cual el ejemplo pero no me reconoce la función ReactDom. ¿Podría decirme que hice mal? Sin título-1

trata de verificar que el script que estas usando tenga la propiedad type="text/babel", yo acabo de realizar lo mismo y me funciono correctamente, Saludos!!

@mahesago
Copy link

mahesago commented Sep 17, 2023

En mi caso me salen éstos errores, incluso copiando el código desde acá
image
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.

@kitecin
Copy link

kitecin commented Sep 18, 2023

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/standalone@7.10.3/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/standalone@7.10.3/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.

image

Un saludo!

@MrRedu
Copy link

MrRedu commented Sep 20, 2023

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.

@Mlondonoriv
Copy link

hola , acabo de comenzar y tengo estos errores , inclusive al usar el código propuesto arriba agradezco si tiene la solución
error refused to load script

@Allancxcx
Copy link

hola , acabo de comenzar y tengo estos errores , inclusive al usar el código propuesto arriba agradezco si tiene la solución error refused to load script

Buena tarde estimado yo lo solucione de la siguiente manera :

<!-- REACT LIBRARY -->
<script src="https://unpkg.com/react@15.5.4/dist/react.js"></script>
<!-- REACT DOM LIBRARY -->
<script src="https://unpkg.com/react-dom@15.5.4/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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment