React
-
Como Criar um Componente Ouvinte de Atalhos de Teclado Reutilizável em React
Se você é como eu e adora atalhos, sabe como é satisfatório pressionar algumas teclas e ver a mágica acontecer. Seja o familiar Ctrl+C – Ctrl+V que os desenvolvedores usam para “pegar emprestado código” 😉 de LLMs e páginas de código, ou os atalhos personalizados que configuramos em nossas ferramentas favoritas, os atalhos de teclado economizam tempo e nos fazem sentir como um expert em tecnologia. Bem, não tema! Eu decifrei o código para construir componentes que acionam e respondem…
-
Como Criar e Enviar Modelos de Email Usando React Email e Reenviar no Next.js
Aplicações de software modernas frequentemente dependem da comunicação por e-mail para interagir com os usuários. Elas podem enviar códigos de autenticação durante tentativas de login, e-mails de marketing ou boletins informativos, por exemplo. Isso significa que notificações por e-mail são tipicamente o meio mais comum de comunicação com os usuários. Neste tutorial, você aprenderá a projetar modelos de e-mail impressionantes com React Email e enviá-los usando Resend – uma plataforma de API de e-mail simples e poderosa. Pré-requisitos Para aproveitar…
-
Como Construir Aplicativos Multilíngues com i18n em React
Recentemente, trabalhei em um projeto empolgante que envolveu a criação de um site capaz de alternar entre idiomas para atrair um público mais amplo. Isso me fez entender melhor o conceito de “localização”, que geralmente implica adaptar o conteúdo para torná-lo relevante, acessível e relacionável para usuários em diferentes idiomas e regiões. A localização não se resume apenas a traduzir palavras, mas sim a criar uma experiência que faça os usuários se sentirem em casa, independentemente do idioma. Por exemplo,…
-
Aprenda React com Bob Ziroll
Aprender React pode parecer desafiador no início, especialmente quando você não tem certeza de como começar ou se encontra encarando um editor de código vazio. Mas o curso certo pode ajudá-lo a entender os conceitos principais e ajudá-lo a adquirir experiência prática construindo projetos do mundo real. Acabamos de publicar um curso no canal do YouTube freeCodeCamp.org que ensina a você o React moderno da maneira mais envolvente e prática possível. Criado por Bob Ziroll da Scrimba, este curso está…
-
Como Construir um Jogo de Cartas da Memória Usando React
Recentemente, enquanto assistia minha filha 🧒🏻 jogar jogos de memória gratuitos em seu tablet, notei que ela estava tendo dificuldades com uma quantidade avassaladora de anúncios e banners pop-up irritantes. Isso me inspirou a construir um jogo semelhante para ela. Como ela está atualmente interessada em animes, decidi criar o jogo usando imagens fofas no estilo anime. Neste artigo, vou orientá-lo pelo processo de construção do jogo para você ou seus filhos 🎮. Começaremos explorando as características do jogo, e…
-
Construindo e Implantando um App de RH Usando Refine
Introdução Neste tutorial, construiremos um aplicativo de Gestão de Recursos Humanos com o Refine Framework e o implantaremos na Plataforma de Aplicativos DigitalOcean. No final deste tutorial, teremos um aplicativo de gestão de RH que inclui: Página de login: Permite que os usuários façam login como gerentes ou empregados. Os gerentes têm acesso às páginas Férias e Solicitações, enquanto os empregados têm acesso apenas à página Férias. Páginas de Férias: Permite que os empregados solicitem, visualizem e cancelem suas férias.…
-
Como Construir um Aplicativo CRUD usando React e Convex
Operações CRUD são a base de todas as aplicações, portanto, é essencial tornar-se proficiente nelas quando aprendendo novas tecnologias. Neste tutorial, você vai aprender a construir uma aplicação CRUD usando React e Convex. Vamos abordar essas operações construindo um projeto chamado Coleções de Livros. Neste projeto, os usuários poderão adicionar livros e atualizar seu status assim que completarem um livro. Tabela de Conteúdos O que é o Convex? Como Configurar Seu Projeto Como Criar o Schema Como Criar a UI…
-
Como Passar Argumentos Adicionais para Ações do Servidor Next.js
Mutação assíncrona de dados e manipulação é uma tarefa necessária em aplicações web modernas. Você pode querer executar uma função assíncrona independente no servidor para realizar tarefas como salvar dados no armazenamento de dados, enviar e-mails, baixar PDFs, processar imagens e assim por diante. O Next.js fornece-nos com Ações do Servidor que são funções assíncronas que executam no servidor. Podemos usar as ações do servidor para mutações de dados no servidor, mas as ações do servidor podem ser chamadas tanto…
-
Como usar RxStomp com React – construa um aplicativo de bate-papo com STOMP e React
STOMP é um protocolo simples e poderoso para enviar mensagens, implementado por servidores populares como RabbitMQ, ActiveMQ e Apollo. Ao usar STOMP sobre WebSocket, um protocolo direto, torna-se uma escolha popular para enviar mensagens a partir de um navegador da Web, pois protocolos como AMQP são limitados por browsers que não permitem conexões TCP. Para usar STOMP sobre WebSocket, você pode usar @stomp/stompjs, mas esse possui callbacks complicados e uma API complexa que atende a casos de uso mais especializados.…