Escribir marcas con JSX

Introducción

Bienvenido a la documentación de React. Esta práctica te dará una introducción a la escritura de marcas con JSX.

Skills Graph

Escribir marcas con JSX

El proyecto de React ya se ha proporcionado en la máquina virtual. En general, solo es necesario agregar código a App.js.

Utilice el siguiente comando para instalar las dependencias:

npm i

La sintaxis de marcas que se vio anteriormente se llama JSX. Es opcional, pero la mayoría de los proyectos de React la utilizan por su conveniencia.

JSX es más estricta que HTML. Debes cerrar las etiquetas como <br />. Tu componente también no puede devolver múltiples etiquetas JSX. Debes envolverlas en un padre compartido, como un <h1>...</h1> o un envoltorio vacío <>...</>:

// App.js
export default function Profile() {
  return (
    <>
      <h1>Hedy Lamarr</h1>
    </>
  );
}

Si tienes mucha HTML que convertir a JSX, puedes usar un conversor en línea.

Para ejecutar el proyecto, use el siguiente comando. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

npm start

Mostrando datos

JSX te permite poner marcas dentro de JavaScript. Las llaves curvas te permiten "escapar hacia atrás" a JavaScript para que puedas incrustar alguna variable de tu código y mostrarla al usuario. Por ejemplo, esto mostrará user.name:

// App.js
const user = {
  name: "Hedy Lamarr"
};
export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
    </>
  );
}

También puedes "escapar hacia JavaScript" desde los atributos de JSX, pero debes usar llaves curvas en lugar de comillas. Por ejemplo, className="avatar" pasa la cadena "avatar" como la clase CSS, pero src={user.imageUrl} lee el valor de la variable JavaScript user.imageUrl, y luego pasa ese valor como el atributo src:

// App.js
const user = {
  name: "Hedy Lamarr",
  imageUrl: "https://i.imgur.com/yXOvdOSs.jpg"
};
export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img className="avatar" src={user.imageUrl} />
    </>
  );
}

Agregando estilos

En React, se especifica una clase CSS con className. Funciona de la misma manera que el atributo HTML class:

<img className="avatar" />

Luego, se escriben las reglas CSS para ello en un archivo CSS separado:

/* App.css */
.avatar {
  border-radius: 50%;
}

React no prescriba cómo agregar archivos CSS. En el caso más simple, agregará una etiqueta <link> a su HTML. Si utiliza una herramienta de compilación o un framework, consulte su documentación para aprender cómo agregar un archivo CSS a su proyecto.

// App.js
import "./App.css";

También se pueden poner expresiones más complejas dentro de las llaves curvas de JSX, por ejemplo, concatenación de cadenas:

// App.js
const user = {
  name: "Hedy Lamarr",
  imageUrl: "https://i.imgur.com/yXOvdOSs.jpg",
  imageSize: 90
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={"Photo of " + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

En el ejemplo anterior, style={{}} no es una sintaxis especial, sino un objeto {} regular dentro de las llaves curvas style={ } de JSX. Puede usar el atributo style cuando sus estilos dependen de variables de JavaScript.

Resumen

¡Felicitaciones! Has completado la práctica de Escribir marcas con JSX. Puedes practicar más prácticas en LabEx para mejorar tus habilidades.