Ignite UI for React 시작하기
이 주제에서는 Ignite UI for React 사용하여 React 애플리케이션을 만드는 단계별 지침을 제공합니다.
전제 조건
- NodeJS를 설치합니다.
- 비주얼 스튜디오 코드를 설치합니다.
새로운 React 프로젝트 생성
위의 필수 구성 요소가 설치되면 새로운 React 애플리케이션을 만들 수 있습니다.
1 -VS Code를 열고 터미널 메뉴를 선택한 다음 새 터미널 옵션을 선택합니다.
2 - 터미널 창에 다음 명령 중 하나를 입력합니다.
npx create-react-app MyAppName --typescript
cmd
yarn create react-app MyAppName --typescript
cmd
접근 방식에 npx
yarn
따라 또는 필요할 수 있습니다. 위의 명령에 대한 자세한 내용은 이 웹 사이트를 참조하십시오.
cd MyAppName
cmd
기존 앱 업데이트 중
기존 React CLI 프로젝트(이전에 가지고 있는 프로젝트)에서 Ignite UI for React 사용하고 싶다면, 저희가 해결해 드리겠습니다! 다음 명령을 실행하기만 하면 됩니다.
npm install --save igniteui-react
npm install --save igniteui-react-charts igniteui-react-core
npm install --save igniteui-react-excel igniteui-react-core
npm install --save igniteui-react-gauges igniteui-react-core
npm install --save igniteui-react-grids igniteui-react-core
npm install --save igniteui-react-maps igniteui-react-core
npm install --save igniteui-react-spreadsheet igniteui-react-core
cmd
또는
yarn add igniteui-react-charts igniteui-react-core
yarn add igniteui-react-excel igniteui-react-core
yarn add igniteui-react-gauges igniteui-react-core
yarn add igniteui-react-grids igniteui-react-core
yarn add igniteui-react-maps igniteui-react-core
yarn add igniteui-react-spreadsheet igniteui-react-core
cmd
이렇게 하면 기존 프로젝트에 대한 Ignite UI for React 패키지와 모든 종속성, 글꼴 가져오기 및 스타일 참조가 자동으로 설치됩니다.
구성요소 모듈 가져오기
먼저 사용하려는 구성 요소의 필수 모듈을 가져와야 합니다. 계속해서 GeographicMap 구성 요소에 대해 이 작업을 수행하겠습니다.
import { IgrGeographicMapModule, IgrGeographicMap } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';
IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();
ts
구성요소 사용
이제 마크업에서 Ignite UI for React 맵 구성 요소를 사용할 준비가 되었습니다! 계속해서 정의해 보겠습니다.
// App.txs
function App() {
return (
<div style={{ height: "100%", width: "100%" }}>
<IgrGeographicMap
width="800px"
height="500px"
zoomable="true" />
</div>
);
}
tsx
애플리케이션 실행 중
마지막으로 다음 명령 중 하나를 사용하여 새 애플리케이션을 실행할 수 있습니다.
npm run-script start
cmd
이 명령을 실행하면 프로젝트가 빌드되어 컴퓨터에서 로컬로 제공됩니다. 기본 브라우저에서 자동으로 열리고 프로젝트에서 Ignite UI for React 사용할 수 있습니다. 최종 결과에는 대화형 세계 지도가 표시됩니다.
이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.