VS Code에서 React 프로젝트 생성하기
VS Code 실행합니다.
디렉토리를 미리 만들어 둡니다.
C:\Users\tj\Downloads\react-app
왼쪽 탐색기에서 디렉토리 엽니다.
디렉토리 오픈된 상태에서
상단 메뉴에서 '터미널' > '새 터미널'을 선택하여 터미널을 엽니다.
그 다음 아래 매뉴얼대로 진행 합니다.
create-react-app을 사용하여 새 프로젝트 생성하기
https://lshjju.tistory.com/106
create react app tool chain
https://create-react-app.dev/ create react app tool chain installnpx create-react-app my-app 설치로컬 터미널에 위 코드를 입력합니다. Create React App (CRA)이란?Create React App은 React 애플리케이션을 쉽고 빠르게 만들 수
lshjju.tistory.com
매뉴얼대로 새 프로젝트를 빌딩 합니다.
React 프로젝트 실행하기
새프로젝트가 잘 빌딩 되었다면 프로젝트 폴더로 이동합니다
터미널이 현재 프로젝트 패스 상태라면 아래 코드는 패스하고 그 아래 npm start라는 개발 서버 코드를 바로 실행 합니다.
cd 프로젝트이름
예: cd my-app
개발 서버를 시작합니다:
npm start
또는
npm run start
브라우저가 자동으로 열리면서 React 애플리케이션이 실행됩니다.
기본 주소는 http://localhost:3000입니다.
개발 서버를 중지하려면 터미널에서 Ctrl + C를 누르시면 됩니다.
프로젝트 실행 기념으로 App.js 파일을 살짝 열어서 감상 합니다.
참고사항
create-react-app은 React 개발에 필요한 모든 설정(웹팩, 바벨, ESLint 등)을 자동으로 구성해주는 도구입니다.
생성된 프로젝트 구조는 src 폴더에 소스 코드, public 폴더에 정적 파일이 위치합니다.
package.json 파일에서 프로젝트 의존성과 스크립트를 확인하실 수 있습니다.
이제 VS Code에서 React 개발을 시작할 수 있습니다!
'React.js basic manual' 카테고리의 다른 글
| React.js props - 리액트 프롭스 (0) | 2025.06.25 |
|---|---|
| React.js component - 리액트 컴포넌트 (0) | 2025.06.25 |
| React.js deploy - 리액트 배포하기 (0) | 2025.06.24 |
| React.js about - 리액트 정의 (0) | 2025.06.20 |
| create react app tool chain (0) | 2025.06.20 |