React 설치 및 서버 시작 실행, 개발자 도구 설치

📢Node.js 설치

React를 설치하기 위해서, npm(node package manager)이 있어야 하므로 먼저 node js를 설치.

npm이 깔려있으면, 부트스트랩 같은 경우 npm명령어(npm install bootstrap@5.3.3)로 부트스트랩 다운 가능.

node는 화면을 서버처럼 운영할 수 있도록 크로스 플랫폼을 지원한다.

node.js 다운로드는 https://nodejs.org/en 메인에 Download Node.js(LTS) 클릭해서 다운.

동의 및 Next를 쭉 눌러서 설치 진행

설치한 경로에 nodejs 확인

 

node -v와 npm -v를 입력해서 설치 확인

 

윈도우 검색창에 '시스템 환경 변수 편집' 검색 후, 밑에 있는 시스템 변수에 Path를 편집 누른다.

 

nodejs가 없으면, 찾아보기로 추가 후 맨 위로 올린다.

 

VS Code의 TERMINAL => Command Prompt에서 입력하여 설치 확인

 

📢npx로 React 설치

npx는 npm처럼 node를 설치하면 자동으로 설치된다. 다음을 터미널에 입력

npx create-react-app test-app

에러가 뜨는데, node버전이 전체 설치가 안되어 있을 경우에 뜬다.

 

다음을 입력하여 전체 재설치

npm i -g npm@latest

 

 

다시 npx create-react-app test-app한 후, y를 누르고 진행

test-app안에 설치된 걸 확인 가능

 

Happy hacking! 설치 완료

설치가 완료되면, 서버를 시작할 때 쓰는 명령어를 알려준다.

 

src 안에 App.js에서 다른 코드는 지우고 기본구조만 남김

App.js의 컴포넌트 기본구조

 

📢리액트 개발자 도구 설치

리액트를 디버깅 하기 위해 크롬 확장프로그램 설치

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

React Developer Tools - Chrome 웹 스토어

 

개발자도구에 Components탭이 생김