리액트 설치와 첫 실행

이제 직접 실행해 봅시다

이전 문서에서 npm 감각을 잡았다면, 이제는 손으로 직접 실행해 볼 차례입니다.
React 앱 하나를 만들고, 브라우저에 첫 화면이 뜨는 것까지 확인하면 됩니다.

React 앱 만들기

아래 명령으로 프로젝트 생성을 시작합니다.

pnpm create vite@latest hello-react

설치 과정에서 선택지는 아래처럼 맞춰 주세요.

• Framework: React
• Variant: TypeScript + SWC

프로젝트가 생성되면 폴더로 이동해서 의존성을 설치하고 실행합니다.

cd hello-react
pnpm install
pnpm dev

브라우저에서 터미널에 표시된 주소(보통 http://localhost:5173)를 열어보세요.
Vite + React 로고가 보이면 성공입니다.

눈에 익혀둘 파일 3개

처음에는 아래 3개 파일만 알면 충분합니다.

• package.json: 어떤 라이브러리를 쓰는지(dependencies), 어떤 명령으로 실행하는지(scripts)를 여기서 확인합니다.
• src/main.tsx: 앱의 시작점입니다. 리액트 앱을 브라우저 화면에 연결하는 역할을 합니다.
• src/App.tsx: 첫 화면 컴포넌트입니다. 사용자가 처음 보게 되는 UI가 여기에 있습니다.

이 세 파일의 역할만 구분되면 다음 단계에서 구조를 훨씬 빠르게 읽을 수 있습니다.

자주 막히는 지점

• Node 버전이 맞지 않아 설치 실패
• install 없이 바로 dev 실행
• 잘못된 폴더에서 명령 실행

막히면 복잡하게 생각하지 말고, "지금 내가 어느 폴더에서 어떤 명령을 쳤는지"부터 확인해 보세요.
대부분 여기서 바로 해결됩니다.

직접 해보기

• pnpm으로 React 앱을 생성하고 브라우저에서 확인하기
• package.json에서 scripts와 dependencies 읽어보기

다음 문서

• 본격 카운트 증가시켜보기