Curso base de React Native 2025: #54 - Criando componente de MatchListItem

Precisa de ajuda? Solicite uma ajuda particular: https://forms.gle/Pu1aT2LsbU1nuTTDA

Nesta aula, Dev, a gente vai mergulhar de cabeça na construção do componente de listagem de histórico de partidas para o nosso app em React Native. Vamos organizar a estrutura do componente, criar as props necessárias, trabalhar com diferentes status de partida, rounds e modos de jogo, e garantir que tudo fique bem modularizado dentro da página home. Você vai ver na prática como planejar e estruturar componentes reutilizáveis, usando TypeScript para garantir segurança de tipos e clareza no código, enquanto preparamos o terreno para montar as telas do app de forma consistente.
A gente também vai cuidar da estilização e da interação do componente. Você vai aprender a usar layouts horizontais e verticais, aplicar espaçamentos, cores dinâmicas e ícones que mudam conforme o status da partida. Além disso, vamos configurar eventos de clique com Pressable, permitindo que cada item da lista tenha comportamento interativo, exatamente como no protótipo. Durante a aula, você vai perceber como pequenas decisões de design de código fazem toda a diferença para que a interface fique responsiva e funcional.
Por fim, vamos preparar o componente para uso prático na aplicação, pensando em escalabilidade e reutilização. Você vai ver como lidar com listas dinâmicas, exibir informações de rounds e status corretamente, e configurar divisores visuais entre itens para deixar a interface limpa e intuitiva. Ao final desta aula, você terá um componente robusto e pronto para integrar nas telas do app, além de dominar técnicas essenciais para desenvolver interfaces complexas de forma organizada e eficiente.

Links mencionados no vídeo:
🗨️ Discord -   / discord  
🎬 CodarSe - https://codarse.com
🖥️ Protótipo no Figma: https://www.figma.com/community/file/...
📖 Repositório: https://github.com/lvsouza/youtube-re...
🎮 App na Google Play: https://play.google.com/store/apps/de...

Outros cursos no canal:
🎩 Figma para DEVs -    • Figma para DEVs: #00 - Apresentação do curso  
☪️ Curso de estilização no React -    • Estilização no React: Aula 00 - Curso de f...  
💎 Curso base de React -    • Curso base de React 2025: #00 - Apresentaç...  
👑 React, Material UI 5 e Typescript -    • React, Material UI 5 e Typescript: #00 - I...  
🏆 Curso de API Rest, Node e Typescript -    • API Rest, Node e Typescript: #00 - Apresen...  

Livros recomendados:
📘 Código limpo - https://amzn.to/43Xiick
📘 Arquitetura limpa - https://amzn.to/3ZMCStr
📘 Migrando sistemas monolíticos - https://amzn.to/45ByPDZ
📘 The Micro SaaS Handbook - https://amzn.to/4jCan93

Meu setup:
📺 Monitor 24: https://amzn.to/4msD7TY
🤖 Processador: https://amzn.to/4oJLZpN
🎧 Fone bluetooth: https://amzn.to/4lESd7r
⌨️ Teclado e mouse: https://amzn.to/4oPdgHu
💪 Suporte articulado: https://amzn.to/41hIrRE

Conteúdo:
0:00 | Introdução da aula
0:21 | Avisos importantes
0:48 | Entendendo o que será feito
2:00 | Criando componente para MatchListItem
25:30 | Finalização e agradecimentos

CODARSE - Componentização com React Native

#ReactNative #CursoReactNative #ReactNativeDoZero #CriarApp #DesenvolvimentoMobile #ReactNativeGratis #AppEmMinutos #JavaScript #ReactNativeTutorial #Expo #ProgramacaoMobile #ReactNativeBrasil #PrimeiroApp #MobileDeveloper #ReactNativeBeginner