1

estoy empezando con react js y como ejrcicio quería generar componentes de react y presentarlos en pantalla pero el tema es que me genera un error que al chico de youtube no.

Este es el codigo html

 <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="react.css">
    <title>Learning React</title>
</head>
<body>
    <h1>The IT personal</h1>
    <div id="img-box">
        <img src="https://randomuser.me/api/portraits/women/57.jpg" alt="">
        <strong>Lorena</strong>
        <img src="https://randomuser.me/api/portraits/women/55.jpg" alt="">
        <strong>Ana</strong>
    </div>
    <div id="app"></div>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="react.js"></script>
</body>
</html>

y este el React(en teoría)

const $app=document.getElementById("app")
const avatar = props =>{
    const src= "https://randomuser.me/api/portraits/women/${props.id}.jpg" 
    return(
        <picture>
            <img src={src}></img>
            <strong>{props.name}</strong>
        </picture>
    )
}
ReactDOM.render(
    <div>
        <avatar id={5} name="Pilar" />
    </div>
)

Y por ultimo me salta este error en la consola de firefox Uncaught SyntaxError: expected expression, got '<' introducir la descripción de la imagen aquí

La idea es que se agregue otro componente(otra imagen, otro nombre) pero por algun motivo me da ese error. Agradecería mucho su ayuda

1
  • Una pregunta, <img src={src}></img> es un componente que has creado y esta en un archivo aparte o, es la etiqueta img de toda la vida? Porque de ser la segunda, tienes tags de mas, debería ser así <img src={src} />
    – Edgar Gc
    Commented el 23 jun. 2021 a las 5:14

1 respuesta 1

2

Sugiero que revises la sintaxis del código original, pues el código que compartes tiene algunos detalles.

Template literals

La siguiente línea no tiene bien definido el template literals:

const src= "https://randomuser.me/api/portraits/women/${props.id}.jpg"

Debería estar así:

const src= `https://randomuser.me/api/portraits/women/${props.id}.jpg`

Nombres de componentes en Mayuscula

Los nombres de los componentes React siempre van con Mayúscula:

const avatar = props =>{
   //codigo...
}

Debería ir así:

const Avatar = props =>{
   //codigo...
}

Target DOM node

Finalmente, no hay definido un target en el método ReactDOM.render:

ReactDOM.render(
    <div>
        <avatar id={5} name="Pilar" />
    </div>,
    //aqui no hay target
)

Debería estar configurado así:

ReactDOM.render(<div>
        <Avatar id={5} name="Pilar" /></div>,
        document.getElementById('app')
)

Demo:

const Avatar = props =>{
    const src= `https://randomuser.me/api/portraits/women/${props.id}.jpg` 
    return(
        <picture>
            <img src={src}></img>
            <strong>{props.name}</strong>
        </picture>
    )
}
ReactDOM.render(<div>
        <Avatar id={5} name="Pilar" /></div>,
        document.getElementById('app')
)
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="app"></div>

Actualización: Transpiler Babel

Además de tener los siguientes CDN envueltos entre la etiqueta head en el archivo index.html:

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

Asegurate de tener el de Babel:

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Luego, hay que indicar el tipo de script que se va a cargar en index.html, que es el archivo donde se tiene el código de reactJS (en este ejemplo supongo que lo tienes en una carpeta llamada js->index.js):

<script
        type="text/babel"
        src="./js/index.js">
    </script>

Si aún no te funciona, pues busca un mejor tutorial, lo recomendable es empezar con el template create-react-app.

Espero que esta respuesta sea de ayuda

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.