01 리액트 웹 프로젝트 : 환경설정 세팅하기

1. Node.js 설치 (https://nodejs.org/en)

 

2. Node.js 버전 확인

노드  -v

 

3. IDE 통합 개발 환경 설치하기

- IDE(통합 개발 환경)- 종류: VS Code(

https://code.visualstudio.com/download

), Webstorm(

https://www.jetbrains.com/webstorm/

)

 

4. 리액트 파일 만들기

 

4-1. terminal에서 리액트 프로젝트 폴더부터 파일까지 만들기

 

위치 : 폴더(문서) -> 폴더(React) -> 프로젝트 

 

React 폴더 우클릭해서 "폴더에서 새 터미널 열기" 클릭

 

터미널에서 명령어 입력하여 프로젝트 폴더,파일 생성

npx create-react-app 프로젝트폴더명

 

 

 

 

4-2. 프로젝트 폴더를 만들고 난 후, 리액트 파일 만들기

프로젝트 폴더를 만든 후 해당 폴더 위치로 terminal 또는 IDE 들어가기

 

명령어 입력하여 프로젝트 파일 생성

npx create-react-app .

 

 (.은 현재 위치한 곳에 파일을 생성하겠다 라는 뜻)

 

5. 프로젝트 파일 생성 완료 및 실행 명령어

아래 사진처럼 success가 뜨면 프로젝트 파일 생성 완료했다는 뜻이다. 

 

그리고 npm으로 시작하는 파란색 글씨는 명령어이다. 

 

6. 리액트 웹페이지 띄우기

npm start

 5번에서 보여주고 있는 명령어가 개발할 때 필요한 명령어인데 대표적으로 npm start는 내 현재 웹페이지를 실시간으로 보여준다.