[React] 리액트 프로젝트 생성(create-react-app)

editor: vs code

 

1. Node.js, npm 설치

 

2. create-react-app

create-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 간편하게 프로젝트 작업 환경을 구축해준다.

터미널에서 원하는 디렉터리로 이동 후 명령어를 입력한다.

npx create-react-app

npx는 노드 패키지 실행을 도와주는 도구

 

그럼 바탕화면에 프로젝트 폴더가 생성됨

 

3. 프로젝트 기본 구조

public: 정적 파일을 저장하는 곳. public 내부의 파일만 public/index.html에서 사용할 수 있다.

src: 리액트 컴포넌트와 애플리케이션 로직이 들어있는 곳. Webpack은 여기 있는 파일만 보기 때문에 이 폴더 외에 넣은 것은 Webpack에 의해 처리되지 않음

 

* 이름 수정하면 안되는 파일

public/index.html (페이지 템플릿)

src/index.js (js 시작점)

 

4. 프로젝트 실행

프로젝트 폴더로 이동후 개발 서버를 실행한다. 그럼 저절로 리액트 페이지가 뜬다.

cd [프로젝트 명]

npm start (또는 npm run start)

 

5. 확장 프로그램 설치

Reactjs Code Snippets: 리액트 컴포넌트 및 라이프사이클 함수 작성할 때 간편하게 코드를 생성하는 코드 스니펫 모음