Front-end/React.js

1. Setup - 웹 서비스 만들기 | 노마드코더

AGAL 2020. 3. 3. 22:38
반응형

[출처 : https://academy.nomadcoders.co]

0. Creating your first React App

# Webpack, bable을 설치해서 React 코드를 compile 한다  ⇒ create-react-app 으로 set-up이 가능하다

 

> npx create-react-app 디렉토리명   현재 디렉토리에서 하위 디렉토리명으로 react set-up

 

> code 디렉토리명   현재 디렉토리에 속한 디렉토리명(파일명)을 VS Code로 열기

 

> npm start  React Application 실행


2. How does React work?

# react는 javascript와 함께 모든 요소를 생성하고 그렇게 만든 요소를 HTML로 밀어 넣는다. 

 

# 브라우저의 '소스보기'에서 보여지는 코드는 비어있는 HTML 파일이다.    

 ⇒ Application이 로드할 때 빈 HTML을 로드한 후 react가 component에 작성한 코드를 HTML에 추가한다. 

 * react는 소스코드에 처음부터 HTML을 넣지 않고 HTML에서 HTML을 추가하거나 제거한다.

 

※ Virtual DOM(document object model)

소스보기(코드)에서는 존재하지 않는 가상 DOM

반응형