React Cine World 구축 - TypeScript를 사용한 영화 애플리케이션

이 블로그 게시물은 React & Typescript 및 공통 뷰 구성 요소로 시작하는 방법에 대한 완전한 지식을 제공합니다.

어떤 단계에서든 막히면 Github repo을 참조하십시오.

완료된 프로젝트를 찾으려면 Demo link

이것이 우리가 만들 것입니다:

우리 프로젝트의 구조:

시작하기 전에 프로젝트가 어떻게 구성될 것인지에 대해 이야기해 봅시다.

create-react-app을 사용하여 React 앱을 생성하면 기본 React 앱이 생깁니다. 해당 응용 프로그램 내부에서 구성 요소 패턴을 만들고 폴더 구조는 다음과 같습니다.

오늘 우리의 목표는 다음과 같습니다.

새 React cine world 영화 앱 만들기

Themoviedb Api 계정 설정 및 API 키 생성

React Routing을 사용하여 앱을 탐색할 수 있음

Create React App으로 프로젝트 생성:

나는 종종(항상은 아니지만 😁) Create React App을 사용하여 내 React 프로젝트를 시작합니다.

프로젝트 실행을 생성하려면 다음을 수행하십시오.

npx create-react-app my-app --template typescript

API:

프런트엔드는 API에서 데이터를 가져와야 합니다. 저는 Themoviedb를 선택합니다 🎬 : 무료입니다. API 키를 얻기 위해 계정을 생성하기만 하면 됩니다.

코딩을 시작합시다.

React 컴포넌트 구축

이 응용 프로그램에서 우리는 템플릿을 위한 5페이지를 갖게 될 것입니다.

필터가 있는 모든 영화 목록

정렬된 모든 영화 목록

제작사 목록이 포함된 영화 세부 정보

해당 파일을 만들어 봅시다. src/폴더에서 src/pages 폴더를 만듭니다. 새로 만든 폴더 내에서.

React 라우터 설정:

React Router를 실행하려면 의존성을 설치해야 합니다. 프로젝트에서 다음 명령을 실행합니다.

npm install --save react-router-dom

router.ts 파일을 만들고 다음 코드를 복사하여 붙여넣습니다.

import * as React from "react";
import { Route, BrowserRouter } from "react-router-dom";
import Header from "./components/header";
import { ListController } from "./pages/movie-page/movie-listing-container";
import { ItemController } from "./pages/movie-page/movie-details-container";

export const Routes = () => {
  return <BrowserRouter>
    <React.Fragment>
     <Header />
      <Route path="/" exact={true} component={ListController} />
      <Route path="/:movieId" component={ItemController} />
    </React.Fragment>
  </BrowserRouter>;
};

함께 모아서

이제 구성 요소가 설정되었으므로 "localhost:3000"으로 이동하여 모든 페이지가 렌더링되는 것을 볼 수 있습니다.

이해가 되지 않는 부분은 자유롭게 질문하세요.

계속하려면 ...