> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crewai.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Exportação de Componentes React
> Aprenda como exportar e integrar componentes React do CrewAI AMP em suas aplicações
Este guia explica como exportar crews do CrewAI AMP como componentes React e integrá-los às suas próprias aplicações.
## Exportando um Componente React
Clique no menu de opções (três pontos à direita do seu crew implantado), selecione a opção de exportação e salve o arquivo localmente. Usaremos o arquivo `CrewLead.jsx` como exemplo.
## Configurando seu Ambiente React
Para executar este componente React localmente, você precisará configurar um ambiente de desenvolvimento React e integrar este componente em um projeto React.
* Baixe e instale o Node.js no site oficial: [https://nodejs.org/](https://nodejs.org/)
* Escolha a versão LTS (Long Term Support) para maior estabilidade.
* Abra o Prompt de Comando ou PowerShell
* Navegue até o diretório onde deseja criar seu projeto
* Execute o seguinte comando para criar um novo projeto React:
```bash theme={null}
npx create-react-app my-crew-app
```
* Entre no diretório do projeto:
```bash theme={null}
cd my-crew-app
```
```bash theme={null}
npm install react-dom
```
* Mova o arquivo baixado `CrewLead.jsx` para a pasta `src` do seu projeto.
* Abra o arquivo `src/App.js`
* Substitua o conteúdo por algo semelhante a isso:
```jsx theme={null}
import React from 'react';
import CrewLead from './CrewLead';
function App() {
return (
);
}
export default App;
```
* Substitua `YOUR_API_BASE_URL` e `YOUR_BEARER_TOKEN` pelos valores reais da sua API.
* No diretório do seu projeto, execute:
```bash theme={null}
npm start
```
* Isso iniciará o servidor de desenvolvimento, e seu navegador padrão será aberto automaticamente em [http://localhost:3000](http://localhost:3000), onde você verá sua aplicação React rodando.
## Personalização
Você pode então personalizar o `CrewLead.jsx` para adicionar cor, título etc.
## Próximos Passos
* Personalize o estilo do componente para combinar com o design da sua aplicação
* Adicione props adicionais para configuração
* Integre com o gerenciamento de estado da sua aplicação
* Adicione tratamento de erros e estados de carregamento