Chapter3 - react 기본설정 및 JSX란? (21.11.15)

npm을 통하여 yarn 설치 및 버전 확인

bash 터미널을 이용하여 진행 

npm - 노드 패키지 매니저

npm, npx를 쓸 수도 있는데 yarn을 쓰는 이유는 속도가 조금 더 빨라서이다. 다른 것을 사용해도 무방하다.

 

CRA(creat react app) 패키지 설치

리액트로 웹사이트를 만들때 필요한 모든것을 갖고있는 패키지이다.

덩치가 조금 있는 친구라 설치 시간이 조금 소요된다.

마지막에 Done in 시간이 나오면 설치가 완료된 것이다.

 

 

React 프로젝트 폴더 만들기

프로젝트가 만들어 지는 경로 유의할 것!

폴더가 생성됨을 확인한다

추가 - 위 사진과 같이 나와야 프로젝트가 다 만들어진 것이다. 

 

이후 아래와 같이 week-1 폴더에 들어가서 yarn start를 해준다. 

yarn이 정상적으로 실행이 되면 http://localhost:3000/의 홈페이지가 자동으로 켜지는데 만약 켜지지 않는다면 직접 들어가도 괜찮다고 한다.

 

 

JSX 란 무엇일까?

- 리액트에서는 JSX 문법을 사용해서 리액트 요소를 만들어주고 이 요소를 DOM에 랜더링 해서 뷰를 그려준다.

- HTML을 포함한 자바스크립트 파일이 JSX이다.

- 리액트에서는 딱 하나의 html 파일만 존재한다. (public 폴더 아래에 있는 index.html)

리액트 app.js의 코드