react 맛보기 (node.js와 함께)

node.js 설치

node.js를 다운받는다.

다운로드가 완료되면 인스톨 진행.

 

설치가 끝났으면 cmd 창에서 설치됐는지 확인해본다.

 

 

git 설치

git은 예전에 이미 깔아뒀었다.

cmd창에서 확인만 한번 하고 넘어간다.

 

 

프로젝트 생성

원하는 위치에서 npx create-react-app로 디렉토리를 만든다.

(tic-tac-to는 프로젝트 이름이다.)

엔터를 치면 무언가 막 진행된다.

 

 

생성이 완료되면 위와 같이 뜬다.

 

 

 

해당 디렉토리로 이동하여 npm start를 입력하면 리액트가 실행된다.

브라우저가 켜지고 아래와 같이 인덱스창이 뜨면 성공이다.

 

 

 

 

 

제이쿼리 추가하기

방금 생성한 tic-tac-to 프로젝트에서 package.json 파일을 열어

이미지에 표시한 것처럼 "jquery" 부분을 추가하고 저장한다.

 

 

Visual Studio Code 기준으로 단축키 Ctrl+Shift+` (Ctrl+~)를 누르면 화면 하단에 터미널창이 켜진다.

여기서 npm install을 입력하고 엔터를 치면

added 1 package 어쩌고 하면서 제이쿼리 설치가 완료된다

 

 

 

 

index.html 수정

다시 첫화면으로 돌아와서

얘가 시키는대로 Edit src/App.js를 하고 save해서 reload해보자.

 

 

 

이렇게 하고 저장하면

 

 

새로고침하지 않아도 저절로 화면이 바뀌는 것을 볼 수 있다.

 

 

App.js를 수정했는데 index.html가 바뀌었다.

이 둘이 연결되는 과정(?)은 아래와 같다.

 

 

public/indet.html에는 <div id="root">가 있고

 

 

 

src/index.js에는 ReactDOM.render(<App />, ... ('root'))가 있는 것이다.