React- 프로젝트 생성하기 (vscode버전, intellij 버전)

visual Studio Code에서 프로젝트 생성하기 

 

1. 새로운 프로젝트 폴더를 만들어서 열어준다. 

 

 

 

2. ctrl+` 또는 메뉴 상단에 view >  terminal를 입력하여 터미널 창을 열어준다. 

 

 

3. 터미널 창에 npm init react-app .를 입력해 주면, 아래의 사진과 같이 로딩이 진행된다. 

(npm init react-app . :  리액트 프로젝트를 생성해달라는 명령어)

▼▼로딩이 끝나고 성공화면

 

4. 로딩도 끝나면 리액트 프로젝트가 생성된다. 

 

5. 프로젝트를 실행방법 : terminal에서 npm run start를 입력해준다. 

 

 

6. 프로젝트 종료방법 :  ctrl +c 를 눌러주면 프로젝트가 종료가 된다. 

 

 

 

intellij 에서 프로젝트 생성하기 

 

 

1. 상단의 File > New > Project를 눌러주고 JavaScript > React를 선택하고 >Next를 눌러준다. 

 

2. project name: 프로젝트명을 적어준다. 

   project interpreter :  다운받은 node.js의 경로를 찾아 준다. 

                                                                                  > Finish 클릭하면 프로젝트 생성완료

 

3. Finish를 누르면 로딩이 바로 시작된다. 

 

4. 로딩 완료가 되고 project가 생성된것을 확인할 수 있다.

(인텔리제이에서는 터미널부분에 명령어를 입력하여 프로젝트를 실행/종료 할수있고, 상단의 빌드 부분에서 프로젝트를 실행/종료시킬수도 있다. )

 

 

 Chrome환경에서 React Developer Tools다운받는 주소 

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko 

React Developer Tools