지난 번까지의 상태

TypeScript+React 프로젝트를 실행할 수 있는 환경을 구축했다.
※타이틀이 길었기 때문에, 수정했습니다.

이번 목적

Hello world한다.

절차

마지막으로 만든 프로젝트 폴더에 src라는 폴더가 있으므로 이동합니다.

cd src

다음 명령으로 index.tsx 이외의 파일을 삭제합니다.

 rm *.ts *.css *.svg App.*

※WSL상에서는 ls | grep -v -E 'index.tsx' | xargs rm -r (을)를 하면(자) 에러가 나왔기 때문에.

index.tsx의 내용을 다음으로 변경한다.

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(  
<h1>Hello, world!</h1>,
  document.getElementById('root')
);

변경하면 npm start에서 프로젝트 실행.

아래와 같이 Hello, world!라고 표시되면 성공.

해설

import React from 'react';
import ReactDOM from 'react-dom';

react 및 react-dom 패키지를 읽습니다.
DOM(Document Object Model)이란 web페이지의 표현 방법.

ReactDOM.render();

React 프로젝트가 실행될 때 처음 실행되는 렌더.
첫 번째 인수가 그리는 내용(컴포넌트)으로, 두 번째 인수가 그리는 대상(DOM 요소).

<h1>Hello, world!</h1>

HTML의 h1 태그를 사용하여 Hello, world!라는 제목을 만들고 있다.

document.getElementById('root')

document.getElementById() 를 사용하여 루트 요소를 가져옵니다.

요약

ReactDOM.render()에서 HTML의 루트 요소에

Hello, world!

을 묘사하고 있다.

다음

다른 파일의 구성 요소 로드

참고문헌

기억하고 싶은 React 구현에서 자주 사용하는 기본 구문 (쓰기) | maesblog

react-dom - npm

DOM 소개 - Web API | MDN

React 입문 - 토호호의 WWW 입문