v19.2Latest

Criar um aplicativo React do zero

Se o seu aplicativo tem restrições que não são bem atendidas pelos frameworks existentes, você prefere construir seu próprio framework ou apenas quer aprender o básico de um aplicativo React, você pode criar um aplicativo React do zero.

Deep Dive

Considere usar um framework

Passo 1: Instale uma ferramenta de build

O primeiro passo é instalar uma ferramenta de build comovite,parceloursbuild. Essas ferramentas de build fornecem recursos para empacotar e executar código-fonte, fornecem um servidor de desenvolvimento para desenvolvimento local e um comando de build para implantar seu aplicativo em um servidor de produção.

Vite

Viteé uma ferramenta de build que visa fornecer uma experiência de desenvolvimento mais rápida e enxuta para projetos web modernos.

npm create vite@latest my-app -- --template react-ts

O Vite é opinativo e vem com padrões sensatos prontos para uso. O Vite tem um rico ecossistema de plugins para suportar fast refresh, JSX, Babel/SWC e outros recursos comuns. Veja oplugin React do Viteou oplugin React SWC do Vitee oprojeto de exemplo React SSRpara começar.

O Vite já está sendo usado como ferramenta de build em um de nossosframeworks recomendados:React Router.

Parcel

Parcelcombina uma ótima experiência de desenvolvimento pronta para uso com uma arquitetura escalável que pode levar seu projeto desde o início até aplicações de produção massivas.

npm install --save-dev parcel

O Parcel suporta fast refresh, JSX, TypeScript, Flow e estilização prontos para uso. Veja areceita React do Parcelpara começar.

Rsbuild

Rsbuildé uma ferramenta de build baseada no Rspack que fornece uma experiência de desenvolvimento perfeita para aplicações React. Ela vem com padrões cuidadosamente ajustados e otimizações de desempenho prontas para uso.

npx create-rsbuild --template react

O Rsbuild inclui suporte integrado para recursos do React como fast refresh, JSX, TypeScript e estilização. Veja oguia React do Rsbuildpara começar.

Observação

Metro para React Native

Se você está começando do zero com React Native, precisará usar oMetro, o bundler JavaScript para React Native. O Metro suporta empacotamento para plataformas como iOS e Android, mas carece de muitos recursos quando comparado às ferramentas aqui. Recomendamos começar com Vite, Parcel ou Rsbuild, a menos que seu projeto exija suporte ao React Native.

Passo 2: Construir Padrões Comuns de Aplicação

As ferramentas de build listadas acima começam com um aplicativo de página única (SPA) apenas do lado do cliente, mas não incluem nenhuma solução adicional para funcionalidades comuns como roteamento, busca de dados ou estilização.

O ecossistema React inclui muitas ferramentas para esses problemas. Listamos algumas que são amplamente usadas como ponto de partida, mas sinta-se à vontade para escolher outras ferramentas se funcionarem melhor para você.

Roteamento

O roteamento determina qual conteúdo ou páginas exibir quando um usuário visita um URL específico. Você precisa configurar um roteador para mapear URLs para diferentes partes do seu aplicativo. Você também precisará lidar com rotas aninhadas, parâmetros de rota e parâmetros de consulta. Os roteadores podem ser configurados dentro do seu código ou definidos com base na estrutura de pastas e arquivos dos seus componentes.

Os roteadores são uma parte central dos aplicativos modernos e geralmente são integrados com busca de dados (incluindo pré-busca de dados para uma página inteira para carregamento mais rápido), divisão de código (para minimizar o tamanho dos pacotes do cliente) e abordagens de renderização de página (para decidir como cada página é gerada).

Sugerimos usar:

Busca de Dados

Buscar dados de um servidor ou de outra fonte de dados é uma parte fundamental da maioria das aplicações. Fazer isso corretamente requer lidar com estados de carregamento, estados de erro e armazenar em cache os dados buscados, o que pode ser complexo.

Bibliotecas especializadas em busca de dados fazem o trabalho pesado de buscar e armazenar em cache os dados para você, permitindo que você se concentre em quais dados seu aplicativo precisa e como exibi-los. Essas bibliotecas são normalmente usadas diretamente em seus componentes, mas também podem ser integradas aos carregadores de roteamento para pré-busca mais rápida e melhor desempenho, bem como na renderização do servidor.

Observe que buscar dados diretamente nos componentes pode levar a tempos de carregamento mais lentos devido a cascatas de requisições de rede, portanto, recomendamos pré-buscar dados nos carregadores do roteador ou no servidor sempre que possível! Isso permite que os dados de uma página sejam buscados todos de uma vez enquanto a página está sendo exibida.

Se você estiver buscando dados da maioria dos backends ou APIs de estilo REST, sugerimos usar:

Se você estiver buscando dados de uma API GraphQL, sugerimos usar:

Divisão de Código

A divisão de código é o processo de dividir seu aplicativo em pacotes menores que podem ser carregados sob demanda. O tamanho do código de um aplicativo aumenta com cada novo recurso e dependência adicional. Os aplicativos podem ficar lentos para carregar porque todo o código para o aplicativo inteiro precisa ser enviado antes que possa ser usado. Cache, redução de recursos/dependências e mover parte do código para ser executado no servidor podem ajudar a mitigar o carregamento lento, mas são soluções incompletas que podem sacrificar a funcionalidade se usadas em excesso.

Da mesma forma, se você depender dos aplicativos que usam sua estrutura para dividir o código, pode encontrar situações em que o carregamento se torna mais lento do que se nenhuma divisão de código estivesse acontecendo. Por exemplo,carregar um gráfico de forma preguiçosaatrasa o envio do código necessário para renderizar o gráfico, separando o código do gráfico do resto do aplicativo.O Parcel suporta a divisão de código com React.lazy. No entanto, se o gráfico carregar seus dadosapóster sido renderizado inicialmente, você agora está esperando duas vezes. Isso é uma cascata: em vez de buscar os dados para o gráfico e enviar o código para renderizá-lo simultaneamente, você deve esperar cada etapa ser concluída uma após a outra.

Dividir o código por rota, quando integrado com empacotamento e busca de dados, pode reduzir o tempo de carregamento inicial do seu aplicativo e o tempo que leva para o maior conteúdo visível do aplicativo ser renderizado (Maior Pintura de Conteúdo).

Para instruções sobre divisão de código, consulte a documentação da sua ferramenta de build:

Melhorando o Desempenho do Aplicativo

Como a ferramenta de build que você selecionou só suporta aplicativos de página única (SPAs), você precisará implementar outrospadrões de renderizaçãocomo renderização do lado do servidor (SSR), geração de sites estáticos (SSG) e/ou Componentes de Servidor do React (RSC). Mesmo que você não precise desses recursos inicialmente, no futuro pode haver algumas rotas que se beneficiariam de SSR, SSG ou RSC.

Aplicativos de página única (SPA)carregam uma única página HTML e atualizam a página dinamicamente conforme o usuário interage com o aplicativo. SPAs são mais fáceis de começar, mas podem ter tempos de carregamento inicial mais lentos. SPAs são a arquitetura padrão para a maioria das ferramentas de build.
Renderização do lado do servidor com streaming (SSR)renderiza uma página no servidor e envia a página totalmente renderizada para o cliente. O SSR pode melhorar o desempenho, mas pode ser mais complexo de configurar e manter do que um aplicativo de página única. Com a adição de streaming, o SSR pode ser muito complexo de configurar e manter. Vejaguia de SSR do Vite.
Geração de site estático (SSG)gera arquivos HTML estáticos para seu aplicativo no momento da build. O SSG pode melhorar o desempenho, mas pode ser mais complexo de configurar e manter do que a renderização do lado do servidor. Vejaguia de SSG do Vite.
Componentes de Servidor React (RSC)permite que você misture componentes de build, somente servidor e interativos em uma única árvore React. O RSC pode melhorar o desempenho, mas atualmente requer conhecimento profundo para configurar e manter. Vejaexemplos de RSC do Parcel.

Suas estratégias de renderização precisam se integrar ao seu roteador para que aplicativos construídos com seu framework possam escolher a estratégia de renderização no nível de cada rota. Isso permitirá diferentes estratégias de renderização sem ter que reescrever todo o seu aplicativo. Por exemplo, a página inicial do seu aplicativo pode se beneficiar de ser gerada estaticamente (SSG), enquanto uma página com um feed de conteúdo pode ter melhor desempenho com renderização do lado do servidor.

Usar a estratégia de renderização correta para as rotas certas pode diminuir o tempo que leva para o primeiro byte de conteúdo ser carregado (Tempo até o Primeiro Byte), o primeiro conteúdo a ser renderizado (Primeira Pintura de Conteúdo) e o maior conteúdo visível do aplicativo a ser renderizado (Maior Pintura de Conteúdo).

E mais…

Estes são apenas alguns exemplos dos recursos que um novo aplicativo precisará considerar ao construir do zero. Muitas limitações que você encontrará podem ser difíceis de resolver, pois cada problema está interconectado com os outros e pode exigir conhecimento profundo em áreas de problemas com as quais você pode não estar familiarizado.

Se você não quiser resolver esses problemas por conta própria, podecomeçar com um frameworkque fornece esses recursos prontos para uso.

上一篇Criando um Aplicativo React 下一篇Adicionar React a um Projeto Existente