[React] 리액트 설치

react logo

리액트라는 프로그램에 대해 강의를 듣고 간단히 복습했습니다.

실행하는 방법에 대해 설명해보겠습니다.

 

먼저, node js를 설치합니다.

 

https://nodejs.org/ko

Node.js

가능하다면 LTS(Long Term Support) 버전으로 설치하는 것이 좋습니다. 가장 안정적으로 오랫동안 지원되는 버전이기 때문입니다.

 

설치를 하고 나면, 윈도우의 경우 명령 프롬프트 창, Mac은 터미널을 실행합니다. 그리고 명령어를 통해 node와 npm 버전을 확인합니다.

C:\Users>node -v
v18.16.1

C:\Users>npm -v
9.5.1

 

이 상태에서 npm 명령어를 활용하여 first-react-app을 설치합니다.

//first-react-app 설치
npm install -g first-react-app

//생성 명령어 사용
npx create-react-app first-react-app

 

설치 후에 이것을 npx라는 명령어 혹은 node package executing 즉 실행하는 명령어를 사용합니다. npm으로 설치한 first-react-app을 생성하는 것을 실행한다고 해석하면 됩니다.

 

실행도 아주 간단합니다.

cd first-react-app
npm start

 

그러면 기본으로 다운로드 된 App 파일을 바탕으로 아래와 같은 홈페이지가 나타납니다. 인터넷 주소는 localhost:3000, 즉 포트번호 3000번으로 실행합니다.

실행시 성공하면 나타나는 화면

리액트 초기 화면

이제 App.js를 편집해서 원하는 화면을 업데이트 하면됩니다. 좋은 점은 한번 실행하게 되면, 새로고침 없이 바로 저장하는 순간 반영되어 화면이 변경된다는 점입니다.

 

앞으로 즐거운 리액트 생활해보겠습니다.