Exibir dados dinâmicos

5 minutos

Os componentes permitem dividir um aplicativo em partes lógicas. Nesta unidade, exploraremos essa funcionalidade criando um componente para o título de uma receita. Vamos criar componentes e importá-los para App. Também exploraremos como exibir dados de forma dinâmica.

Exibir dados dinâmicos

Para exibir dados dinâmicos dentro de um componente, use a sintaxe { }, às vezes chamada de handlebars. Esse estilo de sintaxe é relativamente comum em ferramentas de modelagem de HTML. Use esses handlebars para mudar efetivamente para o modo JavaScript e executar quase qualquer JavaScript válido.

Por exemplo, para exibir a hora atual, você pode usar o seguinte código:

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

Criar um componente RecipeTitle

Em nosso exemplo, criaremos um componente para o título de uma receita. Vamos usar uma variável JavaScript para o título para mostrar como o React pode exibir dados dinâmicos. As futuras unidades mostrarão como trabalhar com dados mais complexos.

Crie um arquivo dentro da pasta src. Nomeie-o como RecipeTitle.jsx.

Adicione o seguinte código a RecipeTitle.jsx:

import React from 'react';

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

Explore o código

Observe que criamos uma constante chamada title. Em seguida, usamos a sintaxe handlebar { } para informar ao React que queremos exibir o valor de title dentro do elemento <h2>. Esse recurso do JSX nos permite combinar JavaScript e HTML.

Usar o componente RecipeTitle

Vamos exibir RecipeTitle em nosso aplicativo adicionando-o a App.

Abra src/App.jsx.
Abaixo da linha que exibe import React from 'react'; (deve ser a linha 2), adicione o seguinte código:
```
import RecipeTitle from './RecipeTitle'
```
Use RecipeTitle como um elemento HTML adicionando o seguinte código abaixo da sintaxe que mostra <h1>Recipe Manager</h1> :
```
<RecipeTitle />
```

Explore o código

Aqui está o conteúdo completo do arquivo src/App.jsx agora:

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

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

export default App;

Praticamente da mesma forma que usamos <App /> como um elemento HTML, podemos usar RecipeTitle. Esse exemplo mostra a essência da criação de aplicativos do React: você cria e usa componentes para compilar seu aplicativo.

Confira os resultados

Salve todos os arquivos. O navegador deve ser atualizado automaticamente e exibir a página atualizada. O título Purê de batata é exibido na parte superior da página.

Screenshot of a webpage that displays a recipe title.

Exibir dados dinâmicos