intro

1.node.js 설치(홈페이지에서. 설치확인 : node -v / npm 설치확인 : npm -v)
2. 콘솔에서 npm install npx -g (설치확인: npx -v)
3. VSC 설치(다른 코드 에디터 써도 됨)
4. git 설치(설치 확인:콘솔에서 git --version)

SETUP

1.0 Creating your first React App

-cmd에 npx을 이용하여 리액트 어플 만들기(npx create-react-app 폴더명)
-설치된 후 code 폴더명을 입력하면 해랑 폴더 디렉토리로 VSCODE가 열린다.

1.1 Creating a Github Repository

-github에서 새 Repisitory를 생성
-Repisitory를 생성 후 movie_app을 작업하는 터미널 창에
1.git init
2.git remote add origin 새 Repisitory url
3.git add .
4.git commit -m "커밋메세지" (ex) git commit -m "#1.0 Creating your first React App"
5.git push origin master 입력하고 github Repisitory 창 새로 고침 하면 movie_app 폴더가 업로드 되어 있다.

1.2 How does React work?

-react는 우리가 쓰는 모든 요소를 생성한다. js로 그것을 만든 뒤 html에 밀어넣는다.
-react는 소스코드에 처음부터 index.html 파일에 넣지않고 html에서 html을 추가하거나 제거하는 법을 알고 있다. 따라서 app은 빈 html을 로드한 후에 react가 component에 작성한 것을 html을 밀어넣는 식으로 동작한다.

-index.js가 app.js를 import해서 가져온 뒤

ReactDOM.render(<React.StrictMode>
<App /></React.StrictMode>,document.getElementById('root'));

을 통해 app.js component에 ElementById "rood"를 내부에 넣으려한다.
-ReactDOM.render()함수는 HTML 코드와 HTML 요소라는 두 개의 인수를 사용하는데 함수의 목적은 지정된 HTML 요소 내부에 지정된 HTML 코드를 표시하는 것이다.

-즉 react가 app.js의 컴포넌트를 #root안에 넣어서 보여주고 있다. 따라서 React는 load 할 때, html을 Virtual Dom React을 사용하여 보여준다. 이것이 React가 빠른 이유이기도 하다.

-페이지 소스보기 했을 때 결과. 빈 #root만 보인다. 보이지 않는 이유는 hello가 없는 빈 index.html 파일을 보고 있기 때문이다.