Escrevendo Marcação com JSX

Introdução

Bem-vindo à documentação do React! Este laboratório (lab) fornecerá uma introdução à escrita de marcação com JSX.

Escrevendo Marcação com JSX

O projeto React já foi fornecido na VM. Em geral, você só precisa adicionar código ao App.js.

Por favor, use o seguinte comando para instalar as dependências:

npm i

A sintaxe de marcação que você viu acima é chamada JSX. É opcional, mas a maioria dos projetos React usa JSX por sua conveniência.

JSX é mais rigoroso que HTML. Você precisa fechar tags como <br />. Seu componente também não pode retornar múltiplas tags JSX. Você precisa envolvê-las em um pai compartilhado, como um <h1>...</h1> ou um wrapper vazio <>...</>:

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

Se você tiver muito HTML para converter para JSX, pode usar um conversor online.

Para executar o projeto, use o seguinte comando. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

npm start

Exibindo Dados

JSX permite que você coloque marcação em JavaScript. Chaves permitem que você "escape" de volta para JavaScript para que você possa embutir alguma variável do seu código e exibi-la ao usuário. Por exemplo, isso exibirá user.name:

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

Você também pode "escapar para JavaScript" de atributos JSX, mas você precisa usar chaves em vez de aspas. Por exemplo, className="avatar" passa a string "avatar" como a classe CSS, mas src={user.imageUrl} lê o valor da variável JavaScript user.imageUrl e, em seguida, passa esse valor como o 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} />
    </>
  );
}

Adicionando Estilos

No React, você especifica uma classe CSS com className. Funciona da mesma forma que o atributo HTML class:

<img className="avatar" />

Então você escreve as regras CSS para ela em um arquivo CSS separado:

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

O React não prescreve como você adiciona arquivos CSS. No caso mais simples, você adicionará uma tag <link> ao seu HTML. Se você usar uma ferramenta de build ou um framework, consulte sua documentação para aprender como adicionar um arquivo CSS ao seu projeto.

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

Você pode colocar expressões mais complexas dentro das chaves JSX também, por exemplo, concatenação de strings:

// 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
        }}
      />
    </>
  );
}

No exemplo acima, style={{}} não é uma sintaxe especial, mas um objeto {} regular dentro das chaves JSX style={ }. Você pode usar o atributo style quando seus estilos dependem de variáveis JavaScript.

Resumo

Parabéns! Você concluiu o laboratório Escrevendo Marcação com JSX. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.