[React] CH01. 리액트 설치 및 개발환경 설치

1. nodejs 검색 후 가장 최신 버전 설치(오른쪽 현재 버전 설치(LTS가 아님))

• Automatically install the necessary tools에 체크하는 것 말고 나머지는 계속 next 누르며 기본 설정 유지

https://nodejs.org/ko/

Node.js

[ 참고 ]
nodejs 설치 ⇒ create-react-app 라이브러리 사용 가능, npm 툴(라이브러리 설치 사용) 이용 가능

 

---

2.visual studio code 설치

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

---

3. 리액트 프로젝트 생성

• Visual Studio Code의 터미널을 열고 아래 명령어 입력
  - npx : 라이브러리 설치 도와주는 명령어(nodejs 설치 필요)
  - create-react-app : 리액트 셋팅 다된 boilerplate 만들기 쉽게 도와주는 라이브러리

npx create-react-app 프로젝트명

---

4. 리액트 코드 미리보기

• 브라우저가 자동으로 뜨지 않으면 → localhost:3030 직접입력

npm start

[ 참고 ]
src/App.js : 메인페이지에 들어갈 HTML 짜는 곳
public/index.html : 메인페이지, App.js에 있는 코드를 index.js가 index.html에 전달
node_modules : 라이브러리 모은 폴더
public : static 파일 보관함 ex)이미지와 같은 바뀌지 않은 정적인 파일 보관
src : 소스코드 보관함
package.json : 설치한 라이브러리 목록(npm으로 라이브러리 설치 시, 추가됨)

※ create-react-app 관련 문서 : https://create-react-app.dev/docs/getting-started