리액트 환경설정

Node.js 설치

• 버젼 확인 후 없으면 공식 사이트에서 설치 (LTS)

➜  ~ node -v
v18.12.1

프로젝트 생성

➜ ~ npx create-react-app jsx
// jsx라는 프로젝트를 만들고자 함

• 시간이 좀 걸리는데 다 되면 이렇게 해피해킹 짠-
  
• 터미널에서 프로젝트 생성이 완료되면
  ls -> cd jsx > npm start
  
• 그럼 리액트 웹 화면이 뜸 (newly generated application) // localhost:3000
  
• Ctrl + c 하면 npm 종료
  
• 다시 켜고 싶으면 npm start 입력

VSCode

• open folder -> jsx
• index.js / App.js / reportWebVitals.js => Files that contain code that a browser doesn't know how to execute.
• EX. App.js is not valid JavaScript. That's why browser has no idea about how to execute JSX.

• index.js : First file that gets executed when our app runs
• index.html : Skeleton for the React app
• package.json : Lists dependencies our app needs.
• package-lock.json : Lists dependencies our app needs.
• node-modules : Contains dependencies our app needs.

Files

• public : index.html 빼고 다 삭제
• src : 다 삭제 후, index.js 및 App.js 등 필요한 파일 직접 생성

Chrome Extension

• React Developer Tools