# Compatibilidade de Frameworks | React

import DocButton from '~/components/webkit/DocButton.vue';

## 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 | <DocButton href="/pt-br/documentacao/produtos/templates/react-buttercms/" label="Mais detalhes" kind="secondary" size="medium" /> |
| React Boilerplate | Projeto inicial project | <DocButton href="/pt-br/documentacao/produtos/templates/react-boilerplate/" label="Mais detalhes" kind="secondary" size="medium" /> |

Templates com outras frameworks que também usam React:

| Nome do template | Caso de uso | Detalhes |
|:-------------|:---------|:-----|
| Space Jelly Shop| E-commerce | <DocButton href="/pt-br/documentacao/produtos/templates/space-jelly-shop/" label="Mais detalhes" kind="secondary" size="medium" /> |
| Cosmic Agency | Starter | <DocButton href="/pt-br/documentacao/produtos/templates/cosmic-agency/" label="Mais detalhes" kind="secondary" size="medium" /> |
| Astro With Multiple Frameworks | Starter | <DocButton href="/pt-br/documentacao/produtos/templates/astro-multiple-frameworks/" label="Mais detalhes" kind="secondary" size="medium" /> |
| Nextal | Geral | <DocButton href="https://www.azion.com/pt-br/documentation/products/templates/nextal/" label="Mais detalhes" kind="secondary" size="medium" /> |

### Realizando deploy de um template no Azion Console

1. Faça login no [Console](https://console.azion.com).
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

2. No [Console](https://console.azion.com), clique no botão **\+ Create**.  
3. Selecione Importar do Github.
4. Selecione seu repositório.
5. Escolha um nome para a aplicação.
6. Selecione o Preset do **React**.
7. Insira o comando de instalação:

```sh
npm install
```
8. Clique em **Deploy**.

#### Realizando deploy de um template via Azion CLI

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

:::tip[Dica]
Visite o [Guia CLI](/pt-br/documentacao/produtos/azion-cli/visao-geral/#instalar-a-azion-cli) para instruções detalhadas de instalação.
:::

1. No terminal, inicialize o projeto:

```sh 
  azion init
```

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

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

3. Escolha o preset React: 

```sh 
? Choose a preset: [Use arrows to move, type to filter]
  Angular 
  Astro 
  Docusaurus
  Eleventy
  Emscripten
  React
  Hexo
  Hono
  Hugo
  Javascript
  Preact
> React
  ...
```

4. Escolha um dos templates disponíveis.

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

```sh 
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](#resposta-sim-para-desenvolvimento-local).
- [Se você optou por não executar um servidor de desenvolvimento local](#resposta-nao-para-desenvolvimento-local).

#### Resposta `sim` para desenvolvimento local

1. Instale as dependências do projeto. Digite `y` quando a interação solicitar:

```sh 
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:

```sh
Your Application was built successfully
[Azion] [Server] › ✔  success   Function running on port 0.0.0.0:3000, url: http://localhost:3000
```

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

```sh
cd [your-project-name] 
```

3. Realize o deploy do projeto: 

```sh
azion deploy
```

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

:::note 
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:

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

2. Instale as dependências do projeto. Digite `y` quando a interação solicitar:

```sh 
  Do you want to install project dependencies? This may be required to deploy your project (y/N)
```

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

:::note 
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](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/).

:::tip[Dica]
Visite o [Guia CLI](/pt-br/documentacao/produtos/azion-cli/visao-geral/#instalar-a-azion-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:

```shell
azion link
```

2. Selecione o preset React.

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