Apresentação de dados

JSX permite a utilização de marcação dentro do JavaScript, o que torna muito fácil a apresentação de dados/valore de variáveis dentro de um componente. Para isso, basta utilziar chaves {} - também conhecido como curly braces - e colocar o código que deseja executar dentro delas.

import React from "react";

const Person = ({ name, age }) => {
  return (
    <div>
      <h1>Olá, {nome}!</h1>
      <p>Você tem {age} anos.</p>
    </div>
  );
};

export default Person;

O mesmo pode ser feito dentro de elementos primitivos (como p, h1, div, etc) e até mesmo dentro de atributos.

function Outdoor({ title }) {
  const url =
    "https://blogs-images.forbes.com/erikkain/files/2017/11/justice-league.jpg";

  return (
    <div>
      <h3>Outdoor</h3>
      <img src={url} alt={title || "Liga da Justiça"} height="150px" />
    </div>
  );
}