Quer aprender React com apenas um post? Vamos criar seu primeiro projeto!

Neste tutorial prático, você vai aprender React ao configurar e desenvolver uma aplicação de lista de mercado.

Se você ainda não está familiarizado com JavaScript, recomendamos que confira nosso conteúdo que aborda tudo o que você precisa saber sobre JavaScript antes de aprender React.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Do zero ao primeiro projeto com React

Nesta primeira parte da aula, nós vamos aprender a inicializar e configurar nosso projeto, além de criar diversos elementos essenciais para a configuração da nossa aplicação.

Configurando o projeto com Vite

Com o VSCode aberto (se precisar, consulte o nosso guia de VS Code), navegue até a pasta do projeto utilizando o terminal:

cd aula

O que é Vite?

Aqui, utilizaremos o Vite, uma ferramenta de desenvolvimento que oferece um ambiente rápido e otimizado para aplicações web modernas. Ela atua como um servidor de desenvolvimento local, monitorando os arquivos enquanto são editados.

Ao salvar as alterações, o Vite recarrega automaticamente o código específico por meio de um processo chamado Hot Module Replacement (HMR), proporcionando um desenvolvimento mais ágil e eficiente.

Iniciando um novo projeto

Para iniciar um novo projeto com o Vite, execute o seguinte comando no terminal:

npm create vite@latest

Durante a configuração interativa, selecione "React" como o framework e "JavaScript" como a linguagem.

Após a configuração, instale as dependências do projeto executando:

npm install

Este comando lê o arquivo package.json, que contém as informações e dependências do projeto, e instala todas as bibliotecas necessárias na pasta node_modules.

O package.json é um arquivo de configuração que lista as dependências e scripts do projeto, permitindo que o npm gerencie e instale as bibliotecas corretamente.

Para iniciar o servidor de desenvolvimento local e visualizar o projeto, execute:

npm run dev

Removendo códigos e arquivos desnecessários

O Vite gera uma estrutura de projeto que inclui alguns arquivos e códigos que podem não vão ser necessários pro projeto que vamos fazer aqui.

Para simplificar, podemos remover ou ajustar os seguintes itens:

• Na pasta public, delete o arquivo vite.svg.
• Na pasta src, remova os arquivos react.svg e App.css. Além disso, exclua as referências correspondentes no arquivo App.jsx.

• No arquivo App.jsx, remova a linha const [count, setCount] = useState(0); e todo o conteúdo dentro do return ( ... ) que está entre as tags <> e </>.

• No arquivo index.css, limpe todo o conteúdo, pois utilizaremos o Tailwind para estilização posteriormente.
• Exclua o arquivo .gitignore se não estiver utilizando controle de versão com Git.
• No arquivo index.html, ajuste o título da página na linha 7 para "Lista de Mercado" e remova a referência à logo do Vite.

• O arquivo README.md gerado automaticamente pode ser removido ou atualizado conforme necessário.

Após essas alterações, salve todos os arquivos.

Embora o Vite forneça uma estrutura completa e rica em recursos, é importante personalizar o projeto conforme nossas necessidades específicas, removendo componentes desnecessários nesta etapa inicial.

Entendendo a estrutura do projeto

Vamos explorar os principais arquivos e sua estrutura:

• index.html: Este é o arquivo principal da aplicação. Dentro da tag <body>, há uma <div> com o atributo id="root", que serve como ponto de montagem para nossa aplicação React. Além disso, há um <script> que carrega o módulo main.jsx.

• main.jsx: Este arquivo importa o React e o componente principal App, e renderiza o componente App dentro do elemento com id="root" no index.html.

• App.jsx: Este é o componente principal da aplicação, definido como uma função que retorna um fragmento vazio (<> </>). Um componente em React é uma função ou classe que opcionalmente aceita entradas (props) e retorna um elemento React que descreve como uma seção da interface deve aparecer. Este conceito de componentes é fundamental para quem está aprendendo React, pois permite a construção de interfaces de usuário de forma modular e reutilizável.

Entendendo componentes

Em React, um componente é uma função ou classe que aceita entradas (chamadas de "props", veremos a seguir) e retorna um elemento React que descreve como uma parte da interface deve ser exibida. Componentes são blocos de construção fundamentais em React, permitindo a criação de interfaces de usuário de forma modular e reutilizável.

No exemplo do componente App, temos:

function App() {
  return <></>;
}
export default App;

Neste caso, o componente App contém uma tag vazia, conhecida em React como fragment. Os fragments permitem agrupar uma lista de filhos (linhas abaixo e indentadas) sem adicionar nós extras ao DOM.

No arquivo App.jsx, vamos modificar a função App() para retornar um <h1> com o texto "Lista de Mercado":

function App() {
  return <h1>Lista de Mercado</h1>;
}
export default App;

Ao abrir nosso HTML no navegador, já veremos o título "Lista de Mercado" exibido na página.

O que é JSX?

JSX, ou JavaScript XML, é uma extensão de sintaxe para JavaScript que permite escrever código semelhante ao HTML dentro do JavaScript. Ele facilita a criação de componentes React, tornando o código mais legível e intuitivo. Embora não seja obrigatório, o uso de JSX é amplamente adotado devido à sua sintaxe familiar e capacidade de descrever a estrutura da interface de forma declarativa.

Retornando um único elemento

No React, é necessário que um componente retorne um único elemento no nível superior. Para evitar a inserção desnecessária de elementos no DOM, utilizamos os já mencionados fragments, que permitem agrupar múltiplos elementos sem adicionar nós extras. A sintaxe abreviada de um fragment é representada por <>...</>.

No exemplo da nossa lista de mercado, precisamos de um campo de entrada (input) para inserir as informações da lista. Dentro da função App(), podemos implementar da seguinte forma:

return (
  <>
    <h1>Lista de Mercado</h1>
    <input type="text" />
  </>
);

Agora vamos adicionar um botão para confirmar o que for digitado e também um placeholder dentro do nosso input. O placeholder é um texto exibido dentro do campo de entrada antes do usuário começar a digitar, indicando o tipo de informação esperada.

Ambos serão inseridos dentro do fragmento:

return (
  <>
    <h1>Lista de Mercado</h1>
    <input type="text" placeholder="Digite um item" />
    <button>Adicionar</button>
  </>
);

Com isso, temos um campo para digitar texto e um botão para adicionar itens à lista.

Em seguida, vamos adicionar a lógica para efetivamente adicionar elementos. Para isso, incluímos uma lista não ordenada (<ul>) na nossa função App, já com os botões de remover:

return (
  <>
    <h1>Lista de Mercado</h1>
    <input type="text" placeholder="Digite um item" />
    <button>Adicionar</button>
    <ul>
      <li>
        <p>Produto 1</p>
        <button>Remover</button>
      </li>
      <li>
        <p>Produto 2</p>
        <button>Remover</button>
      </li>
      <li>
        <p>Produto 3</p>
        <button>Remover</button>
      </li>
    </ul>
  </>
);

Para que a aplicação funcione corretamente e seja mais organizada, é recomendável dividir o código em múltiplos componentes.

Organizando o aplicativo em múltiplos componentes

Atualmente, nosso único componente é o App.jsx.

Vamos criar um novo componente chamado ItemLista.jsx. Para agilizar esse processo, utilizaremos a extensão ES7 React snippets do Visual Studio Code. Essa extensão permite que você digite rafce em um arquivo vazio e ele gerará automaticamente a estrutura básica de um componente funcional.

No arquivo App.jsx, dentro da tag <ul>, insira o componente <ItemLista />. Isso adicionará automaticamente a importação necessária no topo do arquivo.

Repita o <ItemLista /> algumas vezes para representar múltiplos itens na lista:

<ul>

  <ItemLista />

  <ItemLista />

  <ItemLista />

  <ItemLista />

</ul>

Dessa forma, nossa página exibirá os itens da lista.

Abaixo da função App(), declare uma variável para a lista de compras:

const listaMercado = ["Banana", "Maçã", "Carne"];

Para renderizar os itens dessa lista utilizando o componente ItemLista, podemos usar o método map().

map() é uma função de array do JavaScript que invoca uma função callback para cada elemento do array, retornando um novo array com os resultados.

No contexto do React, é comumente utilizado para renderizar listas de componentes.

Assim, podemos atualizar nosso código para:

<ul>
  {listaMercado.map((itemLista, index) => (
    <ItemLista key={index} nome={itemLista} />
  ))}
</ul>

Neste exemplo, utilizamos o map() para iterar sobre cada item da listaMercado, retornando um componente ItemLista para cada elemento. A propriedade key é necessária para que o React possa identificar de forma eficiente cada item da lista e gerenciar atualizações de forma otimizada.

Além disso, passamos uma propriedade nome para o ItemLista, que pode ser utilizada dentro do componente para exibir o nome do item.

Dessa maneira, o programa criará uma lista com o tamanho e os itens definidos na variável listaMercado.

O que são props no React?

No React, "props" (abreviação de propriedades) são parâmetros que você pode passar para componentes, permitindo que eles sejam reutilizáveis e dinâmicos. As props permitem que componentes recebam dados e comportamentos de seus componentes pais e os utilizem para renderizar conteúdo ou executar funções específicas.

Ao fazermos o passo anterior, podemos ver na nossa página que há um erro.

Each child in a list should have a unique “key” prop.

Esse erro ocorre porque o React precisa de uma maneira eficiente de identificar cada elemento da lista durante atualizações. A prop key ajuda o React a determinar quais itens foram alterados, adicionados ou removidos, otimizando a renderização da interface.

Para resolver o erro, você deve fornecer uma key única para cada item da lista. Embora seja possível usar o índice do array como key, isso não é recomendado em todos os casos, pois pode causar problemas de desempenho ou comportamentos inesperados. O ideal é utilizar um identificador único presente nos dados, como um ID.

{listaDeProdutos.map((produto, index) => (
  <ItemLista key={produto.id} nome={produto.nome} />
))}

Se você não tiver um ID único, pode usar o índice como último recurso:

{listaDeProdutos.map((produto, index) => (
  <ItemLista key={index} nome={produto.nome} />
))}

Isso resolve o erro e garante que o React possa gerenciar a lista de forma eficiente.

Passando Props para Componentes de Lista

Vamos aprofundar um pouco mais no uso de props. Suponha que você tenha uma lista de produtos e queira passar cada item da lista para o componente ItemLista. Para isso, você pode fazer o seguinte:

{listaDeProdutos.map((itemLista, index) => (
  <ItemLista key={index} itemLista={itemLista} />
))}

Aqui, estamos passando o objeto itemLista inteiro como uma prop para o componente ItemLista.

Acessando Props no Componente

Dentro do componente ItemLista, você pode acessar a prop itemLista e exibir o nome do produto:

const ItemLista = ({ itemLista }) => {
  return (
    <li>
      <p>{itemLista.nome}</p>
    </li>
  );
};

Neste exemplo, substituímos o texto fixo "Produto 1" pelo valor dinâmico itemLista.nome, que é passado via props.

Removendo o console.log

Se você estava usando console.log para depurar o código, agora pode removê-lo, pois o componente já está renderizando o nome do produto corretamente.

O que são Hooks no React?

Hooks são funções especiais no React que permitem adicionar estado e efeitos colaterais a componentes funcionais. Antes dos Hooks, só era possível usar estado e ciclo de vida em componentes de classe. Com os Hooks, você pode aproveitar esses recursos em componentes funcionais, tornando o código mais simples e modular.

Neste exemplo, vamos focar em um dos Hooks mais utilizados: o useState. Ele nos permite criar e gerenciar estados dentro de componentes funcionais.

Até agora, nossa lista de mercado é estática. Os itens são definidos diretamente no código e não podem ser atualizados através da interface. Para tornar a lista dinâmica, precisamos usar o useState e configurar o botão "Adicionar" para atualizar a lista sempre que um novo item for inserido.

Entendendo o useState

Vamos começar criando uma lista de mercado inicial:

const listaMercado = ["Banana", "Maçã", "Carne"];

No entanto, listaMercado é uma variável de referência, ou seja, ela armazena apenas os endereços dos itens na memória. Para que a lista seja atualizada dinamicamente na interface, precisamos transformá-la em uma variável de estado usando o useState.

Pra isso, primeiro importamos o useState do React:

import React, { useState } from 'react';

Depois, criamos o estado para a lista de mercado:

const [listaMercado, setListaMercado] = useState(["Banana", "Maçã", "Carne"]);

Aqui, listaMercado é a variável que armazena o estado atual da lista, e setListaMercado é a função que usamos para atualizar esse estado.

Adicionando Itens à Lista

Para adicionar um novo item à lista, criamos uma função que atualiza o estado:

const adicionarElementoNaLista = () => {
  const novaLista = [...listaMercado]; // Copia a lista atual
  novaLista.push("Novo item"); // Adiciona um novo item
  setListaMercado(novaLista); // Atualiza o estado
  console.log(listaMercado); // Exibe a lista atualizada no console
};

Neste exemplo, estamos copiando a lista atual com o operador spread (...), adicionando um novo item e, em seguida, atualizando o estado com setListaMercado.

Configurando o Botão

Agora, precisamos conectar a função adicionarElementoNaLista ao botão "Adicionar". Para isso, usamos o evento onClick:

<button onClick={() => adicionarElementoNaLista()}>Adicionar</button>

Quando o botão for clicado, a função será executada, e o estado da lista será atualizado.

Por que a lista não atualiza?

Se você seguiu os passos acima e a lista ainda não está atualizando na interface, isso ocorre porque o React não reconhece a mudança na variável listaMercado como uma atualização de estado.

Ao usar useState, o React monitora apenas as mudanças feitas através da função setListaMercado. Se você modificar a variável listaMercado diretamente (por exemplo, listaMercado.push("Novo item")), o React não detectará a mudança e a interface não será atualizada.

Por isso, é essencial sempre usar a função de atualização de estado (setListaMercado, no nosso caso) para modificar o estado.

Variáveis de Estado no React

No React, os componentes só são renderizados novamente quando certas regras são atendidas. Uma dessas regras é a alteração de uma variável de estado. No exemplo abaixo, a variável listaMercado é uma variável normal:

function App() {
  const listaMercado = ["Banana", "Maçã", "Carne"];
}

Quando modificamos essa variável, o React não detecta a mudança e, portanto, não rerenderiza o componente. Para resolver isso, transformamos listaMercado em uma variável de estado usando o Hook useState:

const [listaMercado, setListaMercado] = useState(["Banana", "Maçã", "Carne"]);

Agora, listaMercado retorna um array com dois elementos: a variável que armazena o estado atual e a função setListaMercado, que usamos para atualizar esse estado. Para alterar o valor de listaMercado, sempre usamos a função setListaMercado.

Além disso, precisamos importar o useState no início do arquivo:

import { useState } from "react";

Criando a Lista de Mercado com useState

Vamos modificar a função adicionarElementoNaLista para usar o estado corretamente:

const adicionarElementoNaLista = () => {
  const novaLista = [...listaMercado]; // Copia a lista atual
  novaLista.push("Novo item"); // Adiciona um novo item
  console.log(novaLista); // Exibe a lista atualizada no console
  setListaMercado(novaLista); // Atualiza o estado
};

Agora, ao clicar no botão "Adicionar", a lista é atualizada na interface porque estamos usando o useState corretamente.

Usando o Operador Ternário para Mostrar que a Lista Está Vazia

Podemos usar condicionais para exibir uma mensagem quando a lista estiver vazia:

{listaMercado.length > 0 ? (
  <ul>
    {listaMercado.map((itemLista, index) => (
      <ItemLista key={index} itemLista={itemLista} />
    ))}
  </ul>
) : (
  <p>Você não tem nenhum item na sua lista</p>
)}

Esse código verifica se a lista tem itens. Se tiver, renderiza a lista; caso contrário, exibe uma mensagem informando que a lista está vazia.

Criando a Função para Remover Itens da Lista

Para remover itens da lista, criamos uma função no módulo ItemLista.jsx. Primeiro, passamos a lista e a função de atualização como props:

<ItemLista key={index} itemLista={itemLista} listaMercado={listaMercado} setListaMercado={setListaMercado} />

No arquivo ItemLista.jsx, acessamos essas props e criamos a função removerItemDaLista:

<Iconst ItemLista = ({ itemLista, listaMercado, setListaMercado }) => {
  const removerItemDaLista = () => {
    const novaListaFiltrada = listaMercado.filter(
      (itemAtual) => itemAtual !== itemLista
    );
    setListaMercado(novaListaFiltrada); // Atualiza o estado
  };
  return (
    <li>
      <p>{itemLista}</p>
      <button onClick={removerItemDaLista}>Remover</button>
    </li>
  );
};

Essa função cria uma nova lista sem o item que queremos remover e atualiza o estado com setListaMercado.

Ajustando a Função para Adicionar Elementos à Lista

Vamos limpar a lista inicial e configurar o input para adicionar itens dinamicamente. Primeiro, importamos o Hook useRef:

import { useState, useRef } from "react";

Depois, criamos a variável inputAdicionar e vinculamos ao input:

const inputAdicionar = useRef();
console.log(inputAdicionar.current);
<input ref={inputAdicionar} type="text" placeholder="Digite um item" />

Agora, modificamos a função adicionarElementoNaLista para usar o valor do input:

const adicionarElementoNaLista = () => {
  const novaLista = [...listaMercado];
  const valorInput = inputAdicionar.current.value;
  if (valorInput) { // Verifica se o input não está vazio
    novaLista.push(valorInput);
    setListaMercado(novaLista);
    inputAdicionar.current.value = ""; // Limpa o input
  }
};

Essa função adiciona o valor do input à lista e limpa o campo após a inserção.

Tratando Inputs Vazios e Prevenindo Erros

Para evitar a adição de valores vazios, usamos uma estrutura condicional que verifica se o input tem conteúdo:

if (valorInput) {

  novaLista.push(valorInput);

  setListaMercado(novaLista);

  inputAdicionar.current.value = "";

}

Isso garante que apenas valores válidos sejam adicionados à lista.

JavaScript Impressionador

Como usar JavaScript em qualquer empresa e qualquer área, com exemplos totalmente aplicados à realidade do Mercado de Trabalho, seja para se tornar um Desenvolvedor Front End, Backend, Full Stack ou Mobile.

Começar agora

Adicionando o Tailwind CSS ao seu projeto

Nesta segunda parte, vamos aprender como integrar o Tailwind CSS ao nosso projeto de lista de mercado em React, utilizando também o Vite como ferramenta de construção.

Com o Tailwind, nós vamos estilizar o projeto, criando uma lista de mercado não apenas funcional mas também visualmente atraente!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

O que é o Tailwind CSS?

O Tailwind é um framework CSS utilitário que permite criar designs responsivos e modernos com menos código. Com ele, ao final da aula, você terá um projeto funcional e bem estilizado.

Criando uma pasta para o projeto

Para organizar melhor o projeto, copie e cole nossa pasta Aula e depois delete a pasta node_modules de dentro da cópia. Renomeie a pasta como aula-tailwind.

Em seguida, instale as dependências novamente dentro da nova pasta:

cd aula-tailwind

npm install

Acessando o Tailwind CSS

Acesse a documentação oficial do Tailwind CSS para entender como ele funciona. O Tailwind é um framework utilitário, ou seja, ele oferece classes prontas para estilização, como text-center, bg-blue-500, etc.

Nós também temos um post aqui no blog explicando todos os detalhes do Tailwind para iniciantes!

Instalando o Tailwind CSS com Vite

Para integrar o Tailwind ao projeto, primeiro precisamos instalar ele juntamento com suas dependências na pasta que acabamos de criar:

npm install tailwindcss @tailwindcss/vite

Configurando o Tailwind no projeto

No arquivo vite.config.js, importe o Tailwind:

import tailwindcss from '@tailwindcss/vite'

E depois adicione ele à lista de plugins:

export default defineConfig({

plugins: [react(), tailwindcss()],

});

Em seguida, importe o Tailwind no arquivo index.css:

@import “taildwindcss”;

Estilizando o título da aplicação com Tailwind

No componente App.jsx, adicione classes ao título para estilizá-lo:

<h1 className="text-3xl font-bold">Lista de Mercado</h1>

Utilizamos as classes text-3xl, para dar tamanho grande para o texto, e font-bold, para deixar o texto em negrito.

Ajustando espaçamento e alinhamento da <div>

Uma das únicas coisas que precisaremos mudar no nosso index.html nesta parte vai ser a div de id “root”, dentro de <body>, vamos atribuir uma classe a ela:

<div id="root" class="h-screen"></div>

Agora essa div se aplica a toda o corpo da página.

Para centralizar o conteúdo na tela, utilize Flexbox:

<div id="root" class="flex min-h-screen items-center justify-center"></div>

Entendendo as classes que utilizamos:

• flex: Transforma a div em um container flex (Flexbox).
• min-h-screen: Define a altura mínima como 100% da viewport.
• items-center: Centraliza horizontalmente.
• justify-center: Centraliza verticalmente.

Organizando o código com Tailwind Prettier

Para manter o código organizado, instale o Prettier com suporte ao Tailwind:

npm install prettier prettier-plugin-tailwindcss --save-dev

Adicione a configuração no package.json:

"prettier": {
  "plugins": ["prettier-plugin-tailwindcss"]
}

Criando um layout responsivo

Defina a largura máxima do conteúdo para garantir que ele seja responsivo:

<div className="flex w-full max-w-96 flex-col items-center">

• max-w-md: Largura máxima de 28rem.
• w-full: Ocupa 100% da largura disponível.

Ajustando a largura dos elementos com Flexbox

Para alinhar o input e o botão “Adicionar” lado a lado, utilize Flexbox:

<div className="flex w-full gap-2">
  <input className="w-full" ref={inputAdicionar} type="text" placeholder= "Digite um item" />

• flex: Transforma a div em um container flex.
• gap-2: Espaçamento entre os elementos.

Adicionando espaçamento entre os outros elementos

Adicione um espaçamento interno ao input:

<input
          className="w-full rounded-md border border-gray-600 px-2"
          ref={inputAdicionar}
          type="text"
          placeholder="Digite um item"
        />

Classe utilizada para o espaçamento:

• px-2: Padding horizontal de 0.5rem.

Estilizando o campo de input

Aplique bordas e arredondamentos ao input:

<input
          className="w-full rounded-md border border-gray-600 px-2"
          ref={inputAdicionar}
          type="text"
          placeholder="Digite um item"
        />

• border: Adiciona uma borda.
• border-gray-600: Define a cor da borda.
• rounded-md: Borda arredondada.

Agora temos uma borda em volta do campo para digitar:

Personalizando o botão "Adicionar"

Estilize o botão para torná-lo mais interativo:

<button
          className="cursor-pointer rounded-md bg-gray-800 px-2 text-white transition hover:bg-gray-600"
          onClick={() => adicionarElementoNaLista()}
        >
          Adicionar
        </button>

• text-white: Texto branco.
• rounded-md: Borda arredondada.
• hover:bg-gray-600: Muda a cor ao passar o mouse.
• transition-all: Adiciona transição suave.

Estilizando os itens da lista

Para os itens da lista, vamos utilizar de novo a Flexbox, para alinhar o texto e o botão de remover:

<ul className="flex w-full flex-col gap-2"> </ul>

• justify-between: Alinha o texto e o botão em extremidades opostas.
• items-center: Centraliza verticalmente.

Personalizando o botão "Remover"

Aplique classes ao botão de remover (no arquivo ItemLista.jsx) para destacá-lo:

<button
        className="cursor-pointer rounded-md bg-red-800 px-2 text-white transition hover:bg-red-600"
        onClick={() => removerItemDaLista()}
      >
        Remover
      </button>

• bg-red-500: Cor de fundo vermelha.
• hover:bg-red-400: Muda a cor ao passar o mouse.

Fim da segunda parte

Nesta segunda parte, aprendemos a integrar o Tailwind CSS em um projeto React com Vite e estilizamos uma lista de mercado funcional.

Conseguimos trazer o Tailwind para dentro do nosso projeto e vimos a facilidade e praticidade que essa biblioteca traz para a programação do seu front-end.

Conteúdo Extra: Estilizando Componentes com Styled-Components no React

O que é styled-components?

Como styled-components funciona no React?
Styled-components é uma biblioteca que permite escrever CSS diretamente no JavaScript (CSS-in-JS), integrando a estilização aos componentes React. Suas principais vantagens incluem:

• Componentização: Estilos encapsulados em componentes, evitando conflitos de CSS.
• Dinamismo: Uso de variáveis e props para estilização dinâmica.
• Manutenção: Código mais organizado, com estilos próximos à lógica do componente.
• Temas: Suporte a temas globais, como claro e escuro, com alternância fácil.

Essa abordagem é ideal para projetos que exigem estilização modular e reutilizável.

Como integrar styled-components ao projeto?

Como configurar styled-components em um projeto React com Vite?
Para adicionar styled-components ao projeto de lista de mercado criado no post original, siga os passos abaixo:

1. Crie um novo projeto com Vite (caso não use o projeto existente): cd aula-styled-components npm create vite@latest
   • Selecione React como framework e JavaScript como linguagem.
   • Instale as dependências com:npm install
2. Instale styled-components: npm install styled-components
3. Limpe arquivos desnecessários (como no post original):
   • Delete public/vite.svg, src/App.css, e limpe index.css.
   • Ajuste index.html para o título "Lista de Mercado".
   • Remova referências desnecessárias em App.jsx e main.jsx.
4. Adicione a extensão VS Code para styled-components:
   • Instale a extensão vscode-styled-components no Visual Studio Code para suporte à sintaxe CSS com autocompletar.

Como criar um botão estilizado com styled-components?

Como estilizar um botão no React?
No arquivo App.jsx, crie um botão estilizado usando styled-components. Primeiro, importe a biblioteca e defina o componente estilizado:

import styled from 'styled-components';

const Button = styled.button`
  color: white;
  background-color: green;
  font-weight: bold;
  border-radius: 100px;
  padding: 12px 8px;
  border: 2px solid darkgreen;
  cursor: pointer;
`;

function App() {
  return (
    <>
      <h1>Lista de Mercado</h1>
      <Button>Clique Aqui</Button>
    </>
  );
}
export default App;

• Explicação: O styled.button cria um componente React que renderiza um <button> HTML com os estilos definidos dentro das crases (template literals). A sintaxe é idêntica ao CSS tradicional.

Como organizar componentes em pastas?

Como estruturar o projeto para reutilização?
Para manter o código organizado, mova o componente estilizado para uma pasta components:

1. Crie um arquivo components/Button.jsx: import styled from 'styled-components'; const Button = styled.button` color: white; background-color: green; font-weight: bold; border-radius: 100px; padding: 12px 8px; border: 2px solid darkgreen; cursor: pointer; `; export default Button;
2. Importe e use no App.jsx: import Button from './components/Button'; function App() { return ( <> <h1>Lista de Mercado</h1> <Button>Clique Aqui</Button> </> ); } export default App;

Como criar estilos globais com styled-components?

Como aplicar estilos globais à aplicação?
Para definir estilos globais, como reset de margem e padding, crie um arquivo styles/GlobalStyles.js:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    font-family: Montserrat, sans-serif;
    color: #333;
    background-color: #f8f8f8;
  }
`;

export default GlobalStyle;

No App.jsx, importe e aplique os estilos globais:

import GlobalStyle from './styles/GlobalStyles';
import Button from './components/Button';

function App() {
  return (
    <>
      <GlobalStyle />
      <h1>Lista de Mercado</h1>
      <Button>Clique Aqui</Button>
    </>
  );
}
export default App;

• Explicação: O createGlobalStyle define estilos aplicados globalmente, como um reset CSS ou configurações de body.

Como implementar temas claro e escuro com ThemeProvider?

Como alternar entre temas claro e escuro?
Para adicionar temas claro e escuro à lista de mercado, crie um arquivo styles/themes.js com os objetos de tema:

export const lightTheme = {
  color: '#333',
  backgroundColor: '#f8f8f8',
  buttonColor: 'green',
};

export const darkTheme = {
  color: '#f8f8f8',
  backgroundColor: '#333',
  buttonColor: 'lightgreen',
};

No App.jsx, use o ThemeProvider e o Hook useState para alternar temas dinamicamente:

import { useState } from 'react';
import { ThemeProvider } from 'styled-components';
import GlobalStyle from './styles/GlobalStyles';
import Button from './components/Button';
import { lightTheme, darkTheme } from './styles/themes';

function App() {
  const [tema, setTema] = useState('light');

  const alternarTema = () => {
    setTema(tema === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeProvider theme={tema === 'light' ? lightTheme : darkTheme}>
      <GlobalStyle />
      <div style={{ padding: '40px', display: 'flex', flexDirection: 'column', gap: '20px', alignItems: 'start' }}>
        <h1>Lista de Mercado</h1>
        <Button onClick={alternarTema}>Alternar Tema</Button>
      </div>
    </ThemeProvider>
  );
}
export default App;

Atualize components/Button.jsx para usar as variáveis do tema:

import styled from 'styled-components';

const Button = styled.button`
  color: ${props => props.theme.color};
  background-color: ${props => props.theme.buttonColor};
  font-weight: bold;
  border-radius: 100px;
  padding: 12px 8px;
  border: 2px solid darkgreen;
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease;
`;

export default Button;

• Explicação: O ThemeProvider passa o objeto de tema (lightTheme ou darkTheme) como props para os componentes filhos. A função alternarTema atualiza o estado tema, alternando entre claro e escuro. A propriedade transition garante uma mudança suave nas cores.

Conclusão

A biblioteca styled-components oferece uma abordagem poderosa para estilizar aplicações React, integrando CSS diretamente aos componentes. Com ela, você pode criar botões estilizados, aplicar estilos globais com createGlobalStyle e implementar temas dinâmicos com ThemeProvider. Combinada com o projeto de lista de mercado do post original, essa técnica adiciona flexibilidade e um visual profissional, mantendo o código modular e reutilizável. Experimente styled-components para elevar a estilização do seu projeto React!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

O que aprendemos?

Neste post, aprendemos os conceitos fundamentais para criar seu primeiro projeto em React! Começamos configurando o ambiente com Vite, uma ferramenta moderna e eficiente para desenvolvimento.

Exploramos a estrutura de um projeto React, entendendo como componentes e JSX funcionam para construir interfaces de forma modular e organizada.

Aprendemos a usar Fragment para retornar um único elemento e como organizar o aplicativo em múltiplos componentes, tornando o código mais limpo e reutilizável. Descobrimos o que são props e como elas permitem passar dados entre componentes de forma dinâmica.

Além disso, mergulhamos no conceito de variáveis de estado com o Hook useState, criando uma lista de mercado interativa. Vimos como usar o operador ternário para exibir mensagens condicionais, como uma lista vazia, e como criar funções para adicionar e remover itens da lista.

Por fim, na segunda parte implementamos Tailwind CSS ao nosso projeto, adicionando a parte visual.

Com esses conceitos, você já tem uma base sólida para continuar explorando o React e criar aplicações cada vez mais complexas e dinâmicas, além de visualmente atraentes!

Não deixe de conferir nossos outros conteúdos sobre HTML, CSS e Javascript.