コンポーネントの作成とネスト
コンポーネントとは
画面の部品をJavaScriptの関数として定義したものです。
画面上では見出しやボタンなど色々な部品の集合体で構成されていて、Reactではその部品をコンポーネントとして定義します。
function MyButton() {
return (
<button>I'm a button</button>
);
}
上記がやっていることとしては、この関数を呼ぶと、ボタンの見た目（HTML）が返ってくるというイメージです。
コンポーネントに分けるのは、「再利用できるUIの設計図」としての意味があります。
なので、同じHTMLを複数書くのではなく、コンポーネントとして定義して呼び出し再利用するようにします。
自分はRailsのpartial(_hoge.html.erb)のような感じで理解しました。
変数だとa = 1のように、値を格納して必要に応じて変数を呼び出すと思いますが、値じゃなく「見た目や振る舞い」を入れる変数のような感じかなと思います。
ネストとは
例えばHTMLで以下のようなコードがあるとします。
<div>
<h1>Welcome to my app</h1>
<button>I'm a button</button>
</div>
これは
- h1 が div の中
- button が div の中
に入っている状態です。
この状態をネストされていると言います。
上記のコードをReactのコンポーネントを利用して書いたものが以下となります。
export default function MyApp() {
return (
<div>
<h1>Welcome to my app</h1>
<MyButton />
</div>
);
}
結論、ネストとは「コンポーネント（またはHTMLタグ）を別のコンポーネントの中に入れること」と言えます。
コーディング
実際に画面上に表示させてみます。
環境は#1のものを使用しています。
// ボタンを格納するコンポーネント
function MyButton() {
return (
<button>
I'm a button
</button>
);
}
// export default がつくと「このファイルの中で、一番使われるやつ」という意味になる
export default function MyApp() {
return (
<div>
<h1>Welcome to my app</h1>
<MyButton />
</div>
);
}
ソースコードを変更して画面を確認してみます。
意図した通りに画面上にて表示されました👏
JSXとは
先ほどのファイルの拡張子は.jsではなく、.jsxでした。
初めて触れる拡張子なので、少し調べてみました。
| 項目 | 意味 |
|---|---|
| JSX | HTMLっぽくUIを書けるJavaScriptの記法 |
| 使う場所 | Reactのコンポーネントの return の中 |
| 正体 | 最終的には React.createElement() に変換される |
| 目的 | UIを直感的に書くため |
JSXを使用すると
<h1>Hello React</h1>
と書けるところ、JSだと
React.createElement(
"h1",
null,
"Hello React"
)
となって、読みにくいし書くのが面倒だなってなります。
<h1>Hello React</h1>
そして、見た目はHTMLなのですが、実はJavaScriptのコードです。
例えば、下記のコードだと<h1>Hello React</h1>の部分がJSXとなります。
export default function MyApp() {
return <h1>Hello React</h1>
}
少し書き換えてみると
function MyApp() {
return ここにJSXを書く
}
このようなイメージになります。
今回はViteを使用しているのですが、裏で
<h1>Hello</h1>
⬇️
React.createElement("h1", null, "Hello")
と変換してくれています。
スタイルの追加
src/App.cssというファイルを作成して、その中にstyleを設定します。
*今回は既にありました。
/* 画面全体の設定 */
body {
background-color: white;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* h1タグの色を青に設定 */
h1 {
color: blue;
}
/* ボタンのデザインを設定 */
button {
background-color: orange;
color: white;
padding: 8px 16px;
border-radius: 6px;
border: none;
}
次にsrc/App.jsの最上部に
import "./App.css";
を追加します。
最後に画面を確認してみます。
設定した通りのデザインとなっています👏
次回
データを扱っていきます。
React学習ログ #3｜データの表示・条件判定・リストのレンダー