Curso base de React Native 2025: #73 - Refatorando tela de hstórico de partidas

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

Nessa aula, Dev, a gente vai colocar a mão na massa para transformar a tela inicial da nossa aplicação em algo realmente funcional. Vamos começar limpando os dados estáticos e configurando uma lista dinâmica de partidas, para que você possa ver como mapear informações reais e mostrar na tela de forma organizada. Vou te guiar passo a passo no uso do useEffect para carregar dados externos e do useState tipado com TypeScript, garantindo que você entenda como manter seu componente organizado e tipado corretamente. É a chance de ver de perto como dados do armazenamento local podem ser consultados e exibidos na prática.
Além disso, vamos explorar técnicas de otimização de componentes usando o useMemo. Com ele, você vai aprender a separar partidas em andamento e partidas finalizadas de forma eficiente, evitando renderizações desnecessárias e deixando sua aplicação mais performática. Vou te mostrar como criar filtros dinâmicos e renderizar listas condicionais de forma limpa, garantindo que cada parte do componente só seja recalculada quando realmente houver alterações nos dados. Tudo isso de maneira prática, acompanhando cada passo comigo no código.
Por fim, vamos trabalhar na parte visual e na experiência do usuário, exibindo mensagens e placeholders para casos em que não existam partidas registradas. Você vai ver como estruturar o layout da tela, aplicar classes e ajustes visuais para deixar a interface clara e agradável. Ao final da aula, você terá uma tela inicial funcional, otimizada e pronta para receber dados reais, e ainda vai entender conceitos importantes do React Native e TypeScript que poderão ser aplicados em qualquer projeto. Se você quer realmente evoluir como desenvolvedor, essa aula é essencial para consolidar essas habilidades.

Links mencionados no vídeo:
🗨️ Discord - https://discord.gg/ZC7JrPZn7P
🎬 CodarSe - https://codarse.com
🖥️ Protótipo no Figma: https://www.figma.com/community/file/1543675168225105299
📖 Repositório: https://github.com/lvsouza/youtube-react-native-forca-play/tree/ebeeb11a494393a8447a0bb1d114edc8481a6f31
🎮 App na Google Play: https://play.google.com/store/apps/details?id=com.lvsouzadev.forcaplay

Outros cursos no canal:
🎩 Figma para DEVs - https://youtu.be/4rSPV1NbM10
☪️ Curso de estilização no React - https://youtu.be/oUbPkR799fc
💎 Curso base de React - https://youtu.be/ggtWTKbhN_U
👑 React, Material UI 5 e Typescript - https://youtu.be/wLH1Vv86I44
🏆 Curso de API Rest, Node e Typescript - https://youtu.be/SVepTuBK4V0

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:13 | Avisos importantes
1:20 | Carregando a lista de partidas salvas no storage
4:50 | Renderizando de forma dinâmica na listagem
7:40 | Separando as partidas finalizadas das partidas em andamento
13:35 | Finalização e agradecimentos

CODARSE - Async Storage e services

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

Видео Curso base de React Native 2025: #73 - Refatorando tela de hstórico de partidas канала Lucas Souza Dev