[React 리액트] 리액트 만들고 실행하기

react 리액트를 해보기 전에 준비를 해봅시다. 저는 VS Code를 사용하겠습니다.

 

준비

1. Node.js 설치하기

• Node.js가 설치되어 있는지 확인하기
• 윈도우-명령 프롬프트 / 맥os-터미널에서 아래와 같이 입력하기
  (버전이 나오면 설치된 것 / 'node은(는) 내부 또는...' 이렇게 나오면 설치가 안 되어있으니 설치 ㄱㄱ

node -v

• Node.js가 설치 되어 있지 않다면? 설치하기!

https://nodejs.org/en/

2. npm 설치 확인하기

npm -v

3. npx 설치하기

npm을 통해 npx를 설치하고 버전까지 확인 해주기

npm install npx -g

npx -v

 

4. VS Code 설치하기

https://code.visualstudio.com/

5. 깃 설치하기

https://git-scm.com/

아래와 같이 입력하면 버전을 확인가능

git --version

 

---

실행

1. 윈도우-명령 프롬프트 / 맥os-터미널 실행 후 리액트 앱을 만들고 싶은 곳으로 이동

(cd 이동할폴더 < 이런식으로 쓰면 되는데 이해 안 가면... 이것은 알아서 찾아봐주십쇼.)

맥os 쓰는 분들은 리액트 앱 만들고 싶은 폴더로 들어가서 오른쪽 버튼 누르고 서비스 > 폴더에서 새로운 터미널 열기 하면 안 귀찮게 할 수 있음

 

2. 원하는 폴더로 들어갔다면 윈도우-명령 프롬프트 / 맥os-터미널에서 아래와 같이 입력

npx create-react-app 원하는이름

원하는이름에는 만들고자하는 폴더이름을 입력하면 되는데, 입력 후 엔터를 누르면 Success! 가 표시될 거고 밑에 샬라샬라~ 막 나오는데 아무튼 성공임!

 

3. VS Code를 열어서 방금 만든 폴더를 열면 폴더 열기 성공

 

4. 실행은 VS Code에서 터미널을 열고 아래와 같이 입력하면 'Compiled Successfully!'와 같은 문장과 함께 브라우저가 켜지며, 리액트 이미지가 보이는데 그럼 완벽하게 실행에 성공을 한 것임!

npm start

 

참고로 리액트 앱을 종료하는 방법은 [Ctrl + c]를 누르면 됨

 

VS Code에서 터미널 여는 법

위에 메뉴에서 [터미널-> 새 터미널]을 누르거나

[Ctrl + Shift + `]을 누르면 됨! ` 이것은 백틱으로 숫자 1옆에 있는 것이니 헷갈리지 마시길...