前回までの状態
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のプロジェクトが実行された際に最初に実行されるレンダー。
1つ目の引数が描画する内容(コンポーネント)で、2つ目の引数が描画する対象(DOM要素)。
<h1>Hello, world!</h1>
HTMLのh1タグを使用してHello, world!という見出しを作っている。
document.getElementById('root')
document.getElementById()を使用してroot要素を取得している。
要約
ReactDOM.render()でHTMLのroot要素に<h1>Hello, world!</h1>を描写している。