Como Construir uma Interface Frontend em React e Conectá-la a um Backend?

neste tutorial, você criará um aplicativo de lista de tarefas usando react e o conectará a um serviço de backend este projeto é um ponto de partida ideal porque envolve operações crud fundamentais (criar, ler, atualizar, excluir) e uma interface de usuário simples ao final, você terá um aplicativo totalmente funcional com um backend conectado, demonstrando como integrar serviços de backend gerenciados em seu fluxo de trabalho de desenvolvimento construir um aplicativo full stack do zero geralmente requer a configuração de um backend, gerenciamento de um banco de dados, manuseio de autenticação e implantação de infraestrutura essas tarefas podem ser complexas e demoradas, especialmente se você estiver focado no desenvolvimento frontend e usaremos o back4app para esse propósito o back4app simplifica esse processo ao fornecer um backend escalável como serviço (baas) , permitindo que você se concentre em construir seu aplicativo enquanto ele cuida da hospedagem, bancos de dados e apis o back4app oferece serviços de backend, incluindo um banco de dados pronto para uso, autenticação, cloud code para lógica do lado do servidor e sdks para integração perfeita ele também suporta implantações em contêineres, tornando se uma escolha flexível para hospedagem de aplicativos full stack com esses recursos, você pode construir e implantar aplicativos rapidamente sem gerenciar a infraestrutura do servidor principais conclusões ao ler este artigo, você aprenderá a configure um projeto moderno em react usando ferramentas padrão da indústria integre perfeitamente um serviço de backend para gerenciar os dados da aplicação implemente operações crud essenciais para uma experiência de usuário dinâmica implante uma aplicação todo totalmente funcional e veja a rodando em todo app pré requisitos para seguir este tutorial de forma eficaz, certifique se de ter as seguintes ferramentas e habilidades node js e npm instalados em sua máquina você usará o npm para instalar dependências e executar sua aplicação react verifique sua instalação executando node v e npm v no seu terminal conhecimento básico de react , incluindo componentes funcionais, gerenciamento de estado com hooks e manipulação de entrada do usuário este tutorial não cobrirá os fundamentos do react, portanto, espera se familiaridade com jsx e estrutura de componentes uma conta back4app para configurar e gerenciar seus serviços de backend inscreva se em back4app https //www back4app com/ se você não tiver uma conta com isso em mãos, você está pronto para configurar seu projeto e começar a construir configuração do projeto para começar, você precisa configurar seu ambiente de desenvolvimento local e inicializar seu projeto frontend usando vite isso garante uma experiência de desenvolvimento rápida e eficiente, mantendo a estrutura do seu projeto limpa primeiro, certifique se de ter node js (versão lts) instalado se não, baixe o de nodejs org https //nodejs org/ e instale o uma vez instalado, verifique executando node v npm v agora, inicialize seu projeto react usando vite , uma ferramenta de construção moderna que oferece velocidade superior em comparação ao create react app execute o seguinte comando no seu terminal, substituindo todo app pelo nome do seu projeto preferido npm create vite\@latest todo app template react navegue até a pasta do projeto cd todo app instale as dependências necessárias npm install inicie o servidor de desenvolvimento para verificar a configuração npm run dev isso inicia seu aplicativo react localmente abra a url fornecida em seu navegador para confirmar que está em execução com seu frontend configurado, o próximo passo é criar um backend no back4app para gerenciar o armazenamento de dados e as interações da api criando o backend todo back4app fornece um serviço de backend totalmente gerenciado, alimentado por parse , oferecendo um banco de dados nosql, autenticação, cloud code e geração de api prontos para uso isso permite que você gerencie os dados do seu aplicativo sem construir um backend do zero você criará um modelo de dados de tarefa para armazenar itens da lista de tarefas e conectá lo ao seu frontend react criando um aplicativo de backend faça login no seu painel do back4app https //www back4app com/ e clique "criar um novo app " digite um nome para seu aplicativo (por exemplo, todoapp ) e selecione nodejs/parse como o tipo de backend uma vez criado, vá para "banco de dados" > "navegador" , clique "criar uma classe" , e escolha "personalizado" nomeie como tarefa e defina as permissões de nível de classe para permitir leitura e escrita públicas (você pode refinar isso depois) na classe tarefa , adicione os seguintes campos título (string) – título da tarefa descrição (string) – detalhes da tarefa completado (boolean) – status de conclusão datadevencimento (data) – prazo da tarefa clique "salvar" para criar o esquema conectando o back4app ao react agora, integre o back4app ao seu projeto react usando o parse javascript sdk para se comunicar com o backend instale o via npm npm install parse em seguida, configure o sdk inicializando o com seu application id e javascript key recupere essas credenciais do back4app dashboard na seção app settings > security & keys página de chaves do back4app com o id do aplicativo e a chave js destacadas dentro de src/main jsx , configure o parse importando o sdk minificado e inicializando o com seu application id e javascript key import parse from 'parse/dist/parse min js'; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; com seu backend conectado, você pode construir o to do list ui e integrar operações crud desenvolvendo o frontend agora que seu backend está configurado e conectado, é hora de construir o to do list ui em react você criará componentes para adicionar, exibir, atualizar e excluir tarefas enquanto gerencia o estado de forma eficiente estruturando os componentes sua aplicação consistirá em três componentes principais taskform jsx – responsável por adicionar novas tarefas tasklist jsx – exibe todas as tarefas e fornece controles para marcar tarefas como completas ou excluí las taskitem jsx – representa uma única tarefa com ações como marcar como completa ou excluir comece criando uma components pasta dentro de src e adicione estes arquivos mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx gerenciando estado você usará o usestate e useeffect hooks para gerenciar tarefas localmente enquanto busca e atualiza dados do back4app primeiro, defina o estado dentro de app jsx import { usestate, useeffect } from "react"; import parse from "parse/dist/parse min js"; import taskform from " /components/taskform"; import tasklist from " /components/tasklist"; function app() { const \[tasks, settasks] = usestate(\[]); useeffect(() => { fetchtasks(); }, \[]); const fetchtasks = async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); settasks(results map((task) => ({ id task id, task tojson() }))); } catch (error) { console error("error fetching tasks ", error); } }; return ( \<div classname="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); } export default app; criando o formulário de tarefa dentro de taskform jsx , crie um formulário controlado para adicionar novas tarefas isso armazenará os valores de entrada no estado e enviará os dados para o back4app import { usestate } from "react"; import parse from "parse/dist/parse min js"; function taskform({ fetchtasks }) { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = async (e) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title); task set("description", description); task set("completed", false); await task save(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } export default taskform; exibindo tarefas dentro de tasklist jsx , renderize a lista de tarefas e inclua ações para marcá las como concluídas e excluí las import taskitem from " /taskitem"; function tasklist({ tasks, fetchtasks }) { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); } export default tasklist; componente item de tarefa dentro de taskitem jsx , defina ações para marcar uma tarefa como concluída ou excluí la do back4app import parse from "parse/dist/parse min js"; function taskitem({ task, fetchtasks }) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; estilizando a aplicação crie um styles css arquivo em src e adicione estilos básicos / container to center the content and add some spacing / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } / make the heading stand out and add spacing below it / container h1 { margin bottom 20px; } / style the form so that inputs and the button are nicely spaced and aligned / form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } / make the text inputs fill a reasonable width and add padding / form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } / style the 'add task' button / form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } / basic text styles for empty task list message / container p { font size 1rem; } / task item container \ centered in both directions (flex + align items/justify content) \ a gap between elements for visual breathing room / task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; / centers text for titles/descriptions / transition background color 0 2s ease; } / completed tasks visually differ strikethrough and grey text / task item completed h3, task item completed p { text decoration line through; color #888; } / task title / task item h3 { margin 0; font size 1 1rem; } / task description / task item p { margin 0; font size 1rem; } / buttons within each task item (centered and with some spacing) / task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } / on wider screens, you can display elements in a row but keep them centered adjust justify content/align items if you want them spaced differently / @media (min width 600px) { task item { flex direction row; } } importe este css em main jsx import " /styles css"; a ui da aplicação seu aplicativo de lista de tarefas agora tem um frontend funcional com uma ui react, integração com back4app e estilização básica aplicativo de lista de tarefas finalizado em seguida, você irá implantar este frontend no back4app web deployment implantando o frontend no back4app web deployment back4app web deployment fornece um ambiente totalmente gerenciado e containerizado para implantar aplicações ele suporta implantações baseadas em docker , permitindo que você empacote seu frontend em um contêiner e o execute na infraestrutura do back4app isso garante escalabilidade, segurança e um pipeline ci/cd fácil ao integrar diretamente com o github configurando o vite para containerização o vite serve aplicações em modo de desenvolvimento por padrão para produção, você precisa construir uma versão estática e servi la usando um servidor web leve como nginx primeiro, atualize vite config js para especificar um caminho base adequado para a implantação import { defineconfig } from 'vite'; import react from '@vitejs/plugin react'; export default defineconfig({ plugins \[react()], base ' /', // ensures correct asset paths in a containerized environment }); agora, execute o comando de construção para gerar arquivos prontos para produção npm run build criando um dockerfile para implantação um dockerfile define como seu aplicativo react é containerizado crie um arquivo chamado dockerfile na raiz do seu projeto e adicione a seguinte configuração # use an official lightweight node js image from node 18 alpine as build \# set working directory workdir /app \# copy package json and install dependencies copy package json package lock json / run npm install \# copy project files copy \# build the project run npm run build \# use an nginx server for efficient static file serving from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html \# expose port 80 expose 80 \# start nginx cmd \["nginx", " g", "daemon off;"] este dockerfile faz o seguinte usa node js para instalar dependências e construir o aplicativo react copia os arquivos construídos para um nginx container para servir arquivos estáticos de forma eficiente expõe a porta 80 para servir a aplicação construindo e testando o container localmente antes de implantar, teste o container localmente para garantir que funcione como esperado execute o seguinte comando para construir a imagem docker docker build t todo frontend em seguida, inicie um container usando docker run p 8080 80 todo frontend abra http //localhost 8080 no seu navegador para confirmar que seu aplicativo react está sendo servido corretamente publicando no github e conectando ao back4app para implantar no back4app, primeiro, envie seu projeto para o github git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main agora, siga estas etapas para implantar via plataforma de implantação web do back4app faça login no back4app web deployment https //www back4app com/containers clique "criar novo app" , nomeie seu projeto e selecione repositório github autorize o back4app a acessar seu github e selecione o repositório todo app unhandled content type escolha implantação dockerfile e confirme as configurações de build clique "implantar" para acionar a primeira build gerenciando e monitorando implantações uma vez implantado, navegue até seu app no painel do back4app aqui, você pode ver logs para depurar problemas monitorar reinicializações de contêiner e uso de recursos reimplantar em novos commits usando o botão "acionar build" configurar domínios personalizados se hospedando em um domínio pessoal painel de implantação web do back4app aplicação implantada você pode acessar a aplicação implantada usada neste tutorial em https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ com seu front end implantado com sucesso, o próximo passo é testar e depurar para garantir que tudo funcione corretamente testando e depurando após implantar seu front end e back end, você precisa garantir que a aplicação funcione corretamente isso envolve testar a interação frontend backend , identificar problemas comuns e depurar erros de forma eficaz teste de aplicação integrada para verificar se seu frontend react interage corretamente com o backend do back4app, siga estas etapas testar a conectividade da api abra o console de desenvolvedor do seu navegador ( f12 → aba de rede ) e verifique as chamadas da api ao adicionar ou buscar tarefas se as requisições da api falharem, inspecione o status da resposta e as mensagens de erro adicionar e recuperar tarefas manualmente use a interface de lista de tarefas para adicionar uma tarefa atualize a página para garantir que a tarefa persista abra o navegador de banco de dados back4app e confirme que a tarefa aparece na classe tarefa verificar operações crud complete e exclua tarefas pela interface, depois verifique as mudanças no banco de dados do back4app se as atualizações não refletirem, verifique se há erros no console do navegador ou nos logs da api testar casos limite tente enviar tarefas vazias para garantir que a validação funcione simule conexões de internet lentas ( chrome devtools → rede → lento 3g ) para testar o desempenho problemas comuns e solução de problemas erros de cors ( access control allow origin problema) vá para back4app dashboard > configurações do app > segurança e chaves sob "cabeçalhos e domínios permitidos" , adicione a url do seu frontend salve e reinicie o backend falhas de autenticação (erros 401 não autorizado) certifique se de que o id da aplicação e chave javascript estão configurados corretamente em seu aplicativo react se estiver usando autenticação de usuário, verifique se o token da sessão está incluído nas requisições da api problemas de implantação do backend se a api não estiver respondendo, navegue até back4app web deployment > logs para verificar erros na sua implantação do backend reinicie o contêiner se necessário com os testes e depuração concluídos, o próximo passo é implementar melhores práticas para usar os serviços back4app para otimizar o desempenho e a manutenibilidade melhores práticas para usar os serviços do back4app aqui estão algumas melhores práticas que você pode seguir ao usar o back4app otimizando a interação frontend backend a comunicação eficiente entre seu frontend e o backend do back4app garante uma experiência do usuário suave use requisições em lote ao realizar múltiplas operações para reduzir a sobrecarga da rede const tasks = \[task1, task2, task3]; parse object saveall(tasks); para operações de leitura, ative o cache e configure consultas indexadas no painel do back4app para acelerar solicitações frequentes sempre solicite apenas os campos necessários para minimizar o tamanho da resposta query select("title", "completed"); ambiente & escalabilidade armazene chaves sensíveis, como id do aplicativo e chave javascript , em variáveis de ambiente em vez de codificá las diretamente se estiver usando vite , crie um env arquivo vite parse app id=your app id vite parse js key=your js key em produção, ative escalonamento automático para a implantação web do back4app para lidar com o aumento do tráfego monitore o uso do banco de dados e otimize consultas usando a ferramenta de monitoramento de desempenho no back4app segurança e desempenho aprimorados restringa permissões de nível de classe (clps) para que apenas usuários autenticados possam modificar dados defina permissões de leitura/gravação dinamicamente com base nos papéis dos usuários task setacl(new parse acl(parse user current())); use cloud code para descarregar lógica de negócios complexa do frontend, reduzindo a exposição da api e melhorando o desempenho por fim, ative limitação de taxa e validação de solicitações para prevenir abusos e garantir a integridade dos dados conclusão você agora construiu uma aplicação de lista de tarefas full stack configurando um frontend react, integrando o com o backend do back4app e implantando via fluxos de trabalho em contêiner este processo demonstrou um caminho claro desde o desenvolvimento local até a implantação na nuvem, garantindo uma interação suave entre frontend e backend olhando para o futuro, considere melhorias como gerenciamento avançado de usuários, atualizações em tempo real e integrações de terceiros para mais aprendizado, explore a documentação do back4app https //www back4app com/docs e recursos de suporte da comunidade