[React 웹 개발] 리액트 프로젝트 생성 & 리액트 개발자 도구

 

1. node.js 설치

2. vscode 설치

3. 로컬 컴퓨터에 작업할 폴더 생성

4. 해당 폴더에서 vscode 열기

5. 아래의 커맨드 실행

• create-react-app으로 리액트 프로젝트 생성
  npm  init react-app <폴더 이름>
  혹은 폴더를 VS Code로 열고 터미널에서 npm init react-app .
• 개발 모드 실행
  npm run start
• 개발 모드 종료
  Ctrl + C

npm run start하면 위의 화면이 브라우저에 자동으로 뜸

 

6. 리액트 개발자 도구 설치

• react developer tools 검색 - chrome 웹 스토어 들어가기 & 추가 버튼을 눌러 설치

https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

React Developer Tools - Chrome 웹 스토어

 

• npm run start를 통해 localhost:3000에 실행시켰던 App.js의 개발자도구 창을 보면 Components와 Profiler라는 새로운 탭이 생긴 걸 확인할 수 있음
• 이 두 탭은 react로 만들어진 웹사이트에서만 보임