1. SETUP

React를 사용하려면 기본적으로 Webpack, BaBel등 다운 받아야할 것이 있다

--> 하지만, react app을 사용하면 하나의 명령을 실행해서 React Web App을 Set up 할 수 있게 해준다

npx create-react-app이라는 명령과 원하는 폴더명을 친후 Enter를 입력해준다.

 

대문자 쓰지 말라고 오류가 떳다

 

설치가 완료되었다.

 

저렇게 타이핑하면 react시작 된다해서 해봄

컴파일이 잘 됬다

 

code 명령어를 실행해 vsc에디터를 실행시켜 보자

다양한 폴더들이 존재한다, 필요없는 거 다지워준다.

 

App.js 내용 수정하고 컴파일

어떠한 원리로 동작이 되는 것일까?

 

index.js에서 App.js있는 App 컴포넌트를 가져온다.

가져온 후에 ReactDOM.render를 통해 App 컴포넌트를 index.html의 id값이 root인 태그 안에 넣어준다

 

App컴포넌트에서 return한 값인 <h1>Hello</h1>가 index.html의 id값이 root인 div태그에 들어가서

컴파일시 Hello가 출력이되는 것을 확인할 수 있다.

 

직접 html을 작성하지 않고, react가 알아서 컴포넌트를 html의 div태그 안에 잘 넣어준다.

신기하다..