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.
O que você vai ver hoje?
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
.gitignorese 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.
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.
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.
Hashtag Treinamentos
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de JavaScript
- Vue.js: o que é, como funciona, vantagens e como usar
Descubra o que é Vue.js, suas vantagens e como começar a usar esse framework moderno para criar projetos incríveis. Aprenda agora! - O que é arquivo JSON e como usá-lo na prática? [Guia completo] Descubra o que é um arquivo JSON, sua estrutura, vantagens e como usá-lo na prática. Aprenda a criar, abrir e aplicar JSON em seus projetos!
- Como criar gráficos com Chart.js e React – Passo a passo Vamos aprender passo a passo como criar gráficos com Chart.js e React, desde a configuração até a integração com uma API de vendas.
Posts mais recentes da Hashtag Treinamentos
- Funções do Copilot no Excel que vão TRANSFORMAR seu Trabalho
Você sabia que o Copilot no Excel faz muito mais do que tirar dúvidas? Essa IA pode criar fórmulas, formatar dados e até gerar gráficos por você. - Automação Whatsapp Web com com Python: Guia Completo para Enviar Mensagens com PyWhatKit Você já imaginou programar o envio de mensagens com uma automação WhatsApp Web com poucas linhas de código?
- 30 Frases de Small Talk em Inglês: Tenha Conversas Naturais em Inglês Domine o Small Talk em Inglês com 30 frases práticas para conversas rápidas. Aprenda a pronúncia, os usos e dicas para falar com mais naturalidade.
Redator de conteúdo na Hashtag Treinamentos. Produzo textos didáticos sobre tecnologia, buscando informar e engajar o público de forma acessível e descomplicada.