7.MapExercicios.md

Exercício sobre o Método map no React 🗺️🖥️

Instruções 📝

1. Crie um novo projeto React 🚀 utilizando o comando npm create vite@latest para iniciar um novo projeto. Siga os passos apresentados no terminal para configurar seu ambiente React.

2. Prática com o Método map no App.js 🌐:

   • Dentro do componente App, crie um array comum chamado itensDeLista, contendo strings simples como ['Item 1', 'Item 2', 'Item 3'].
   • Utilize o método map para transformar itensDeLista em uma lista de elementos <li>, exibindo o texto de cada item diretamente.

3. Crie uma Lista de Nomes com map 👥:

   • Defina um array chamado nomes com alguns nomes de sua escolha, por exemplo, ['Ana', 'Bruno', 'Carlos'].
   • Use o método map para renderizar cada nome em uma lista, incluindo o índice do nome no array como parte do texto exibido, tal como "1. Ana".

4. Pratique a Estilização com Styled-Components 💅:

   • Instale o pacote styled-components em seu projeto com o comando npm install styled-components.
   • Crie componentes estilizados para sua lista e parágrafos usando styled-components. Por exemplo, crie um UlBox para a lista e Li para os nomes na lista.
   • Aplique estilos criativos para tornar sua lista visualmente atraente, experimentando com cores, fontes, efeitos de hover e mais.

Lembre-se, a prática leva à perfeição, especialmente ao aprender novas funcionalidades do React como o método map e Styled-Components! 💪

Quer correção? Envie o seu exercício resolvido na área de comentários da matéria da aula no Classroom. 🏫