Compatibilidade de Frameworks | React

Veja como o Azion Bundler se integra com o React, uma biblioteca JavaScript que utiliza componentes para elementos de UI.

Ver como Markdown

Sobre React

React é uma biblioteca JavaScript popular para construção de interfaces de usuário interativas. Ela utiliza uma arquitetura baseada em componentes, na qual elementos de UI são encapsulados em partes reutilizáveis, tornando o desenvolvimento eficiente e modular. O React emprega um DOM virtual, que otimiza atualizações e renderização para alta performance.

Principais funcionalidades:

  • Construção declarativa de UI usando JSX.
  • Arquitetura baseada em componentes para interfaces reutilizáveis.
  • DOM virtual para atualizações eficientes.
  • Fluxo de dados unidirecional com props e state.
  • Ecossistema rico de bibliotecas e ferramentas.
  • Forte comunidade e suporte empresarial.
  • Suporte completo ao TypeScript.

Templates disponíveis

Nome do templateCaso de usoDetalhes
ButterCMS + React Projeto inicial ProjectProjeto inicial Mais detalhes
React BoilerplateProjeto inicial project Mais detalhes

Templates com outras frameworks que também usam React:

Nome do templateCaso de usoDetalhes
Space Jelly ShopE-commerce Mais detalhes
Cosmic AgencyStarter Mais detalhes
Astro With Multiple FrameworksStarter Mais detalhes
NextalGeral Mais detalhes

Realizando deploy de um template no Azion Console

  1. Faça login no Console.
  2. Clique no botão + Create.
  3. Navegue para a seção Templates.
  4. Escolha o template React desejado.
  5. Conecte sua conta do GitHub.
  6. Escolha um nome para sua aplicação.
  7. Clique em Deploy.

Realizando deploy de um projeto existente usando importação do GitHub

  1. No Console, clique no botão + Create.
  2. Selecione Importar do Github.
  3. Selecione seu repositório.
  4. Escolha um nome para a aplicação.
  5. Selecione o Preset do React.
  6. Insira o comando de instalação:
npm install
  1. Clique em Deploy.

Realizando deploy de um template via Azion CLI

Você pode usar a Azion CLI para realizar o deploy de um template.

Dica — Visite o Guia CLI para instruções detalhadas de instalação.

  1. No terminal, inicialize o projeto:
azion init
  1. Dê um nome ao seu projeto ou pressione enter para aceitar a sugestão dada:
? Your applications name: (black-thor)
  1. Escolha o preset React:
? Choose a preset: [Use arrows to move, type to filter]
Angular
Astro
Docusaurus
Eleventy
Emscripten
React
Hexo
Hono
Hugo
Javascript
Preact
> React
...

  1. Escolha um dos templates disponíveis.

  2. Você pode optar por iniciar um servidor de desenvolvimento local ou não.

Do you want to start a local development server? (y/N)

Os próximos passos dependem de sua resposta.

Resposta sim para desenvolvimento local

  1. Instale as dependências do projeto. Digite y quando a interação solicitar:
Do you want to install project dependencies? This may be required to start local development server (y/N)

Aguarde até que a instalação seja concluída.

Saída:

Your Application was built successfully
[Azion] [Server] › ✔ success Function running on port 0.0.0.0:3000, url: http://localhost:3000
  1. No browser, visite http://localhost:3333/ e você pode ver o seu projeto Angular rodando.

Realizando deploy do projeto

Quando o seu projeto está em execução localmente, você ainda pode implantá-lo. Para fazer isso:

  1. Pare a execução no terminal com control + c.

  2. Acesse a pasta do projeto:

cd [your-project-name]
  1. Realize o deploy do projeto:
azion deploy
  1. Aguarde enquanto o projeto é construído e implantado na Azion Web Platform.

Uma vez que o deployment é iniciado, a Azion abrirá o navegador e levará o usuário a uma página no Azion Console onde os logs e o processo de implantação podem ser monitorados. Se não abrir automaticamente, basta clicar no link fornecido.

Após a implantação ser concluída, você receberá um domínio para acessar o seu projeto React na plataforma da Azion.

Aguarde alguns minutos para que a propagação ocorra e, em seguida, acesse a sua aplicação usando o domínio fornecido, que deve ser semelhante a https://xxxxxxx.map.azionedge.net.

Resposta não para desenvolvimento local

Após indicar que você não deseja executar um servidor local, implante o projeto.

  1. Digite y para a seguinte interação, indicando que deseja implantar o projeto:
Do you want to deploy your project? (y/N)
  1. Instale as dependências do projeto. Digite y quando a interação solicitar:
Do you want to install project dependencies? This may be required to deploy your project (y/N)
  1. Aguarde enquanto o projeto é construído e implantado na plataforma da Azion.

Uma vez que o deployment é iniciado, a Azion abrirá o navegador e levará o usuário a uma página no Azion Console onde os logs e o processo de implantação podem ser monitorados. Se não abrir automaticamente, basta clicar no link fornecido.

Após a implantação ser concluída, você receberá um domínio para acessar o seu projeto React na plataforma da Azion.

Aguarde alguns minutos para que a propagação ocorra e, em seguida, acesse a sua aplicação usando o domínio fornecido, que deve ser semelhante a https://xxxxxxx.map.azionedge.net.

Deploy de um projeto local com Azion CLI

Você pode utilizar o processo abaixo para realizar o deploy de um projeto local, compatível com as frameworks suportadas.

Dica — Visite o Guia CLI para instruções detalhadas de instalação.

  1. Dentro da pasta de seu projeto existente, use o comando abaixo para vincular o seu projeto a uma application:
azion link

  1. Selecione o preset React.

  2. A CLI vai lhe guiar pelo restante do processo.