Compatibilidade de Frameworks | React

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 template	Caso de uso	Detalhes
ButterCMS + React Projeto inicial Project	Projeto inicial	Mais detalhes
React Boilerplate	Projeto inicial project	Mais detalhes

Templates com outras frameworks que também usam React:

Nome do template	Caso de uso	Detalhes
Space Jelly Shop	E-commerce	Mais detalhes
Cosmic Agency	Starter	Mais detalhes
NextJs Store with React	E-commerce	Mais detalhes
Astro with React	Starter	Mais detalhes
Astro With Multiple Frameworks	Starter	Mais detalhes

Realizando deploy de um template no Azion Console

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

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

No Console, clique no botão + Create.
Selecione Importar do Github.
Selecione seu repositório.
Escolha um nome para a aplicação.
Selecione o Preset do React.
Insira o comando de instalação:

npm install

Clique em Deploy.

Realizando deploy de um template via Azion CLI

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

No terminal, inicialize o projeto:

  azion init

Dê um nome ao seu projeto ou pressione enter para aceitar a sugestão dada:

? Your application's name:  (black-thor)

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
  ...

Escolha um dos templates disponíveis.
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.

Se você optou por executar um servidor de desenvolvimento local.
Se você optou por não executar um servidor de desenvolvimento local.

Resposta `sim` para desenvolvimento local

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 Edge Application was built successfully
[Azion] [Server] › ✔  success   Function running on port 0.0.0.0:3000, url: http://localhost:3000

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:

Pare a execução no terminal com control + c.
Acesse a pasta do projeto:

cd [your-project-name]

Realize o deploy do projeto:

azion deploy

Aguarde enquanto o projeto é construído e implantado na Azion Web Platform.

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.

Digite y para a seguinte interação, indicando que deseja implantar o projeto:

   Do you want to deploy your project? (y/N)

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)

Aguarde enquanto o projeto é construído e implantado na plataforma da Azion.