FrontEnd/React

[React] VSCode에서 React 프로젝트 만들기

s.a 2022. 3. 12. 16:43
반응형

 

1. Visual Studio Code에서 작업할 폴더를 연다.

- 나는 C 드라이브에 vscode/workspace 경로로 작업폴더를 만들어 주었다.

VSCode 작업 폴더 열기

2. 터미널을 연다.

- 2-1. 하단 파란색 바 위로 마우스를 가져가면 화살표 모양으로 바뀐다. 그때 클릭해서 위로 드래그 하면 터미널 창이 열린다.

- 2-2. 상단 메뉴에서 Terminal-New Terminal로 터미널 창을 열 수 있다.

2-1. 드래그로 터미널 열기
2-2. 메뉴에서 터미널 열기

3. React-App을 생성하는 명령어를 친다. (npx create-react-app 프로젝트명)

- npx는 라이브러리를 편리하게 설치할 수 있게 해주는 명령어 node.js가 설치되어있어야 사용 가능하다.

- 리액트로 개발하기 위한 환경이 

 

react 프로젝트가 생성됨

4. 생성한 프로젝트를 연다.

- 다시 Open Folder를 클릭한다.

아까 생성한 폴더에 가보면 터미널에 입력한 'blog'라는 프로젝트가 생성된 것을 볼 수 있다.

VSCode 작업 폴더 열기

 

5. 코딩을 시작한다.

- 생성한 'bolg' 프로젝트 폴더를 열면 아래와 같이 초기 셋팅인 App.js, index.js 등 파일이 보일 것이다.

- 이제 생성한 프로젝트에서 코딩을 시작하면 된다.

 

6. 프로젝트를 열어서 확인할 수 있다. (npm start)

- 아까 연 프로젝트 명이 맞는지 확인하고 터미널에 명령어를 친다. 

- 그럼 아래와 같이 리액트 시작 페이지를 확인할 수 있다.

리액트 프로젝트 시작 명령어
리액트 프로젝트 시작 페이지