콘텐츠로 이동

React 컴포넌트 내보내기

이 가이드는 CrewAI AMP crew를 React 컴포넌트로 내보내고 이를 여러분의 애플리케이션에 통합하는 방법을 설명합니다.

React 컴포넌트 내보내기

컴포넌트 내보내기

배포된 crew 오른쪽에 있는 줄임표(세 개의 점)를 클릭한 다음 내보내기 옵션을 선택하고 파일을 로컬에 저장하세요. 본 예시에서는 CrewLead.jsx를 사용합니다.

리액트 환경 설정

이 리액트 컴포넌트를 로컬에서 실행하려면 리액트 개발 환경을 설정하고 이 컴포넌트를 리액트 프로젝트에 통합해야 합니다.

Node.js 설치
- 공식 웹사이트(https://nodejs.org/)에서 Node.js를 다운로드하고 설치하세요.
- 안정성을 위해 LTS(장기 지원) 버전을 선택하세요.
새 리액트 프로젝트 생성
- 명령 프롬프트 또는 PowerShell을 엽니다.
- 프로젝트를 생성하고자 하는 디렉터리로 이동하세요.
- 다음 명령어를 실행하여 새로운 리액트 프로젝트를 생성합니다:
  Terminal window
```
npx create-react-app my-crew-app
```
- 프로젝트 디렉터리로 이동합니다:
  Terminal window
```
cd my-crew-app
```
필요한 의존성 설치
Terminal window
```
npm install react-dom
```
CrewLead 컴포넌트 생성
- 다운로드한 파일 CrewLead.jsx를 프로젝트의 src 폴더로 이동하세요.

App.js를 수정하여 CrewLead 컴포넌트 사용

src/App.js를 엽니다.
내용물을 아래와 같이 교체하세요:

import React from 'react';
import CrewLead from './CrewLead';

function App() {
    return (
        <div className="App">
            <CrewLead baseUrl="YOUR_API_BASE_URL" bearerToken="YOUR_BEARER_TOKEN" />
        </div>
    );
}

export default App;

YOUR_API_BASE_URL 및 YOUR_BEARER_TOKEN 부분을 실제 API 값으로 바꿔주세요.

개발 서버 시작
- 프로젝트 디렉터리에서 다음 명령어를 실행하세요:
  Terminal window
```
npm start
```
- 개발 서버가 시작되며, 기본 웹 브라우저가 자동으로 http://localhost:3000 을 열고 리액트 앱이 실행되는 것을 확인할 수 있습니다.

커스터마이징

그런 다음 CrewLead.jsx를 커스터마이즈하여 색상, 제목 등을 추가할 수 있습니다.

React 컴포넌트 커스터마이즈

React 컴포넌트 커스터마이즈

다음 단계

구성 요소 스타일을 애플리케이션 디자인에 맞게 맞춤화하세요
추가 구성을 위한 props를 추가하세요
애플리케이션의 상태 관리와 통합하세요
오류 처리 및 로딩 상태를 추가하세요