--- id: 67487e141bb6a7140a352e12 title: Revisão dos conceitos básicos de React challengeType: 31 dashedName: review-react-basics --- # --description--

Bibliotecas e frameworks JavaScript

• Bibliotecas e frameworks JavaScript oferecem soluções rápidas para problemas comuns e aceleram o desenvolvimento ao fornecer código pré-construído.
• Bibliotecas geralmente são mais focadas em fornecer soluções para tarefas específicas, como manipular o DOM, lidar com eventos ou gerenciar requisições AJAX.
• Alguns exemplos de bibliotecas JavaScript são jQuery e React.
• Frameworks, por outro lado, fornecem uma estrutura mais definida para construir aplicações. Eles frequentemente vêm com um conjunto de regras e convenções que os desenvolvedores precisam seguir.
• Exemplos de frameworks incluem Angular e Next.js, um meta framework para React.
• Aplicações de página única (SPAs) são aplicações web que carregam uma única página HTML e atualizam essa página dinamicamente conforme o usuário interage com a aplicação sem recarregar a página inteira.
• SPAs usam JavaScript para gerenciar o estado da aplicação e renderizar o conteúdo. Isso é frequentemente feito usando frameworks que fornecem ótimas ferramentas para construir interfaces de usuário complexas.
• Algumas questões relacionadas a SPAs incluem:
• Leitores de tela têm dificuldade com conteúdo atualizado dinamicamente.
• A URL não muda quando o usuário navega dentro da aplicação, o que pode dificultar marcar, voltar ou compartilhar páginas específicas.
• O tempo de carregamento inicial pode ser lento se a aplicação for grande, pois todos os assets precisam ser carregados antecipadamente.

React

• React é uma biblioteca popular de JavaScript para construir interfaces de usuário e aplicações web.
• Um conceito central do React é a criação de componentes de UI reutilizáveis que podem atualizar e renderizar independentemente conforme os dados mudam.
• React permite que os desenvolvedores descrevam como a UI deve parecer com base no estado da aplicação. O React então atualiza e renderiza os componentes corretos quando os dados ou o estado mudam.

Componentes React

• Componentes são os blocos de construção das aplicações React que permitem aos desenvolvedores dividir interfaces de usuário complexas em partes menores e gerenciáveis.
• A interface do usuário é descrita usando JSX, uma extensão da sintaxe do JavaScript, que permite aos desenvolvedores escrever código semelhante a HTML dentro do JavaScript.
• Componentes são basicamente funções ou classes JS que retornam uma parte da interface do usuário.

Aqui está um exemplo de um componente React simples que renderiza uma mensagem de saudação:

function Greeting() {
  const name = 'Anna';
  return <h1>Welcome, {name}!</h1>;
}

Para usar o componente, você pode simplesmente chamar:

<Greeting />

Importando e exportando componentes React

• Uma exportação torna um componente disponível para outros arquivos. Uma importação permite que um arquivo use um componente que foi exportado em outro lugar.
• Existem dois tipos de exportações em React: exportações padrão e exportações nomeadas.

Exportações padrão

• Um arquivo pode ter apenas uma exportação padrão. Isso é ideal para um arquivo que contém principalmente um único componente.
• Você pode exportar um componente como exportação padrão assim:

// City.js
function City() {
  return <p>New York</p>;
}

export default City;

• Você também pode exportar na mesma linha da definição do componente:

export default function City() {
  return <p>New York</p>;
}

• Para importar uma exportação padrão, use a palavra-chave import sem chaves:

// App.js
import City from './City';

function App() {
  return (
    <div>
      <h1>My favorite city is:</h1>
      <City />
    </div>
  );
}

Exportações nomeadas

• Exportações nomeadas permitem que um arquivo compartilhe múltiplos componentes. Diferente das exportações padrão, elas devem ser importadas usando exatamente o nome com que foram exportadas.
• Você pode exportar múltiplos componentes do mesmo arquivo assim:

// Animals.jsx
export function Cat() {
  return <h2>Mr. Whiskers</h2>;
}

export function Dog() {
  return <h2>Fido</h2>;
}

• Para importar exportações nomeadas, use chaves com os nomes exatos exportados:

import { Cat, Dog } from './Animals';

• Você pode renomear uma exportação nomeada durante a importação usando a palavra-chave as:

import { Cat as Kitty } from './Animals';

Exportações padrão e nomeadas misturadas

• Um arquivo pode ter uma exportação padrão e múltiplas exportações nomeadas ao mesmo tempo:

// Animals.jsx
export default function Cat() {
  return <h2>Mr. Whiskers</h2>;
}

export function Dog() {
  return <h2>Fido</h2>;
}

• Ao importar exportações mistas, a exportação padrão vem primeiro (sem chaves), seguida pelas exportações nomeadas (dentro de chaves):

import Cat, { Dog } from './Animals';

Configurando um projeto React usando Vite

• Ferramentas de configuração de projetos e CLIs oferecem uma maneira rápida e fácil de iniciar novos projetos, permitindo que os desenvolvedores se concentrem em escrever código em vez de lidar com configuração.
• Vite é uma ferramenta popular para configuração de projetos e pode ser usada com React.
• Para criar um novo projeto com Vite, você pode usar o seguinte comando no seu terminal:

npm create vite@latest my-react-app -- --template react

Este comando cria um novo projeto React chamado my-react-app usando o template React do Vite. No diretório do projeto, você verá um arquivo package.json com as dependências e comandos do projeto listados nele.

• Para executar o projeto, navegue até o diretório do projeto e execute os seguintes comandos:

cd my-react-app # path to the project directory
npm install # installs the dependencies listed in the package.json file

• Uma vez que as dependências estejam instaladas, você deve notar uma nova pasta no seu projeto chamada node_modules.
• A pasta node_modules é onde todos os pacotes e bibliotecas necessários para o seu projeto são armazenados.
• Para executar seu projeto, use o seguinte comando:

npm run dev

• Depois disso, abra seu navegador e navegue até http://localhost:5173 para ver sua aplicação React em execução.
• Para realmente ver o código do template inicial, você pode entrar no seu projeto dentro da pasta src e deve ver o arquivo App.jsx.

Passando props em componentes React

• No React, props (abreviação de properties) são uma forma de passar dados de um componente pai para um componente filho. Esse mecanismo é necessário para criar elementos de UI reutilizáveis e dinâmicos.
• Props podem ser qualquer valor JavaScript. Para passar props de um componente pai para um componente filho, você adiciona os props como atributos quando usa o componente filho no JSX do pai. Aqui está um exemplo simples:

// Parent component
function Parent() {
  const name = 'Anna';
  return <Child name={name} />;
}

// Child component
function Child(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Você pode passar múltiplas props usando o operador spread (...), depois de convertê-las em um objeto. Aqui está um exemplo:

// Parent component
function Parent() {
  const person = {
    name: 'Anna',
    age: 25,
    city: 'New York'
  };
  return <Child {...person} />;
}

Neste código, o operador spread {...person} converte o objeto person em props individuais que são passados para o componente Child.

Renderização condicional em React

• A renderização condicional em React permite que você crie interfaces de usuário dinâmicas. É usado para mostrar conteúdo diferente com base em certas condições ou estados dentro da sua aplicação.
• Existem várias maneiras de renderizar conteúdo condicionalmente em React. Uma abordagem comum é usar o operador ternário. Aqui está um exemplo:

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in</h1>}
    </div>
  );
}

• Outra forma de renderizar conteúdo condicionalmente é usar o operador lógico AND (&&). Isso é útil quando você quer renderizar conteúdo somente se uma determinada condição for atendida. Aqui está um exemplo:

function Greeting({ user }) {
  return (
    <div>
      {user && <h1>Welcome, {user.name}!</h1>}
    </div>
  );
}

No código acima, o elemento h1 é renderizado apenas se o objeto user for truthy. Você também pode usar uma declaração direta if desta forma:

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign in</h1>;
}

Renderizando listas em React

• Renderizar listas em React é uma tarefa comum ao construir interfaces de usuário.
• Listas podem ser renderizadas usando o método map() do array JS para iterar sobre um array de itens e retornar um novo array de elementos JSX.
• Por exemplo, se você tem um array de nomes que deseja renderizar como uma lista, você pode fazer o seguinte:

function NameList({ names }) {
  return (
    <ul>
      {names.map((name, index) => (
        <li key={${name}-${index}}>{name}</li>
      ))}
    </ul>
  );
}

• Sempre lembre-se de fornecer uma chave única para cada item da lista para ajudar o React a gerenciar as funções de atualização e renderização. Com essas técnicas, você pode criar listas flexíveis, eficientes e dinâmicas em suas aplicações React.

Estilos inline em React

• Estilos inline no React permitem que você aplique estilos CSS diretamente aos elementos JSX usando objetos JavaScript.
• Para aplicar estilos inline no React, você pode usar o atributo style em elementos JSX. O atributo style recebe um objeto onde as chaves são propriedades CSS em camelCase e os valores são os valores correspondentes. Aqui está um exemplo:

function Greeting() {
  return (
    <h1
      style={{ color: 'blue', fontSize: '24px', backgroundColor: 'lightgray' }}
    >
      Hello, world!
    </h1>
  );
}

export default Greeting;

Você também pode extrair os estilos para um objeto separado e referenciá-lo no atributo style desta forma:

function Greeting() {
  const styles = {
    color: 'blue',
    fontSize: '24px',
    backgroundColor: 'lightgray'
  };

  return <h1 style={styles}>Hello, world!</h1>;
}

export default Greeting;

• Estilos inline suportam estilização dinâmica permitindo que você aplique estilos condicionalmente com base em props ou estado. Aqui está um exemplo de como você pode aplicar estilos condicionalmente com base em uma prop:

function Greeting({ isImportant }) {
  const styles = {
    color: isImportant ? 'red' : 'black',
    fontSize: isImportant ? '24px' : '16px'
  };

  return <h1 style={styles}>Hello, world!</h1>;
}

export default Greeting;

• No código acima, os estilos color e fontSize são definidos condicionalmente com base na prop isImportant.

# --assignment-- Revise os tópicos e conceitos básicos de React.