概要
Reactを学習するにおいて、実際に手を動かすのが吉ということで、アプリケーションを作成します。
元記事
次の記事
作成物
基本中の基本Hello Worldを出力するアプリケーションを作成します。
構成は、以下のみです。
- index.html
- index.js実装
今回は、ただHello Worldを返すだけのアプリケーションなのでベタ書きで実装します。
また、今回はcss等も使用せずにそのまま出力します。
わざわざプロジェクトを作るのは大変だと思うので、code sandbox等で動かしてみてください。
index.js
------------------------
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
const App = () => {
return (
<>
<h1>Hello World</h1>
</>
);
};
root.render(
<StrictMode>
<App />
</StrictMode>
);index.html
------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>学びポイント
空タグ
ここでは、returnで<><h1>Hello World</h1></>を返しています。
const App = () => {
return (
<>
<h1>Hello World</h1>
</>
);
};この<></>は空タグといいます。
戻り値にタグが複数ある場合に、まとめる役割として<></>が必要になります。
下記のようなコードで必要となります。
const App = () => {
return (
<>
<h1>Hello World</h1>
<h2>Hello</h2>
</>
);
};まとめ
実際に手を動かして実装することで、イメージを少し掴めてきました。
また別のアプリケーションも実装していきたいと思います。
コメント