리액트 프로젝트 시작하기

[DeveloperRyou]

기본 명세 사이트 : https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html

참고자료 : https://www.daleseo.com/create-react-app/

두번째 과제입니다.
리액트 프로젝트를 시작해봅시다.

필수 구현

1. 리액트 프로젝트 시작하기

• (본인 닉네임의 폴더)
  • react-project

1. 본인 닉네임의 폴더에서 npx create-react-app react-project --template typescript 로 프로젝트를 구성해주세요
2. 타입스크립트 기반의 리액트 프로젝트여야 합니다.

2. npm start 또는 yarn start를 통해 프로젝트를 시작해보세요.
3. localhost:3000으로 접속했을 때, 그전 과제에서 진행했던 인스타그램 클론 페이지가 생성되도록 구현해주세요.

1. 이때, html 파일이 아닌 tsx 파일로 만들어야 합니다. 약간의 수정이 필요할 수 도 있습니다.

보너스 구현

1. 인스타그램 클론 페이지를 하나의 파일로 구성하지 말고, 쪼개보세요.

1. src 폴더 안에 components 라는 폴더를 생성하고, input.tsx, button.tsx 등의 파일을 생성하세요.
2. input.tsx, button.tsx 파일에 input 태그, button 태그를 따로 쪼개서 저장하세요.
3. 실제 인스타그램 클론 페이지에 분리한 파일을 import 해서 컴포넌트로 사용해보세요.