Anterior

Siguientes

Visualización de datos dinámicos

Completado

Los componentes permiten dividir una aplicación en partes lógicas. En esta unidad, exploraremos esta funcionalidad creando un componente para el título de una receta. Vamos a crear componentes e importarlos en App. También exploraremos cómo mostrar los datos de forma dinámica.

Visualización de datos dinámicos

Para mostrar los datos dinámicos dentro de un componente, use la sintaxis { }, que a veces se denomina handlebars. Este estilo de sintaxis es relativamente común en las herramientas de plantillas HTML. Use estos handlebars para cambiar eficazmente al modo JavaScript y ejecutar casi cualquier código JavaScript válido.

Por ejemplo, para mostrar la hora actual, podría usar el código siguiente:

<div>{ Date.now() }</div>

Creación de un componente RecipeTitle

En nuestro ejemplo, crearemos un componente para el título de una receta. Usaremos una variable de JavaScript para que el título muestre cómo React puede mostrar los datos dinámicos. Las unidades futuras le mostrarán cómo trabajar con datos más complejos.

1. Cree un nuevo archivo en de la carpeta src. Asígnele el nombre RecipeTitle.jsx.

2. Agregue el código siguiente a RecipeTitle.jsx:

   import React from 'react';
   
   function RecipeTitle() {
       const title = 'Mashed potatoes';
       return (
           <h2>{ title }</h2>
       )
   };
   export default RecipeTitle;
   

Exploración del código

Observe que se crea una constante denominada title. Después, usamos la sintaxis de handlebar { } para indicar a React que queremos mostrar el valor de title dentro del elemento <h2>. Esta característica de JSX nos permite mezclar JavaScript y HTML.

Uso del componente RecipeTitle

Vamos a mostrar RecipeTitle en nuestra aplicación agregándola a App.

1. Abra src/App.jsx.

2. Debajo de la línea que pone import React from 'react'; (debe ser la línea 2), agregue el código siguiente:

   import RecipeTitle from './RecipeTitle'
   

3. Use RecipeTitle como elemento HTML agregando el siguiente código debajo de la sintaxis que pone <h1>Recipe Manager</h1>:

   <RecipeTitle />
   

Exploración del código

Este es ahora todo el contenido del archivo src/App.jsx:

import React from 'react';
import RecipeTitle from './RecipeTitle'

function App() {
    return (
        <article>
            <h1>Recipe Manager</h1>
            <RecipeTitle />
        </article>
    )
}

export default App;

De la misma manera que hemos usado <App /> como un elemento HTML, podemos usar RecipeTitle. En este ejemplo se muestra la esencia de la creación de aplicaciones React: se crean y usan componentes para compilar la aplicación.

Ver los resultados

Guarde todos los archivos. El explorador se debe actualizar automáticamente y mostrar la página actualizada. El encabezado Mashed potatoes se muestra en la parte superior de la página.

Continuar