[React] 리액트 프로젝트 생성

1. Requirements

● node.js 설치

https://nodejs.org/ko/download/

- 운영체제에 맞는 파일 설치

- 설치 후 터미널 > node 입력 > node 관련 명령어가 나오면 설치 된 것.

---

2. 프로젝트 생성 (보일러 플레이트 프로젝트)

● 프로젝트 생성 명령어

npx create-react-app {프로젝트명}

● 프로젝트 실행

cd {프로젝트명} npm start

> localhost에 react 프로젝트가 띄어진다.

---

3. 코드 수정

- App.js를 수정한다.

- return()부분에 jsx 코드 혹은 자바스크립트(createElement)코드를 작성

- 또는 미리 작성한 컴포넌트를 렌더링

예시)

---

부록. JS코드가 어떻게 DOM에 들어갈까?

부제: 엘리먼트 렌더링

● public/index.html

<div id="root"></div>​

 

● src/index.js

 

 

 

핵심) App.js에 작성된 js코드가 id가 root인 태그에 들어간다.

 

[코드변환 과정]

1. jsx코드는 webpack/bael을 통해 js코드로 변환된다.

2. js코드는 html 코드로 변환된다.

3. 렌더링 시에 html dom에 들어간다.

즉, (jsx) -> js -> html 변환 과정을 거쳐 html DOM에 들어가게 된다.

 

리액트에 가장 큰 특징은,

가상 DOM을 이용해 변경된 엘리먼트만 렌더링 된다는 것이다.

이 때 렌더링을 실행하는 부분은 위 코드(src/index.js 부분)이다.