【React学習記録②】コンポーネントを作ってみる

前回は環境構築をして、App.jsx に「Hello, React!」を出したところまで。今回はそこに出てきたコンポーネントとJSXを編集して見ながらhtmlとの違いについて書いていこうと思う。

前回までのコードはこちら

function App() {
  return <h1>Hello, React!</h1>;
}

export default App;

javascriptを知っている人ならぴんと来るだろうが、関数を宣言してhtmlを戻り値として受け取っている形である。
ポイントは2つ

関数名は大文字で始める(App、Hello とか)
returnでHTML(JSX)を返す

関数を呼び出す

コンポーネントを呼び出すときは、HTMLのタグのように <関数名 /> と書く。普通のJavaScriptの 関数名() とは書き方が違うので注意
試しに関数を作成してみる

const Test = () => {
  return (
    <div>
      Test Component
    </div>
  )
}

function App() {
  return (
    <>
      <h1>Hello, React!</h1>
      <Test />
    </>
  )
}

export default App;

上記のconst Test = () => {のように関数式の形で書くのもOK

HTMLと決定的に違う点

① 最上位のタグは必ず1つ

function App() {
  return (
    <h1>Hello, React!</h1>
    <p>こんにちは</p>
  );
}

returnで返せるのは1つのタグだけなので上記の書き方ではエラーになります。
<div></div>で囲むかフラグメントと呼ばれる<></>この記法で囲むととりあえずは覚えておきましょう。

function App() {
  return (
    <>
      <h1>Hello, React!</h1>
      <p>こんにちは</p>
    </>
  );
}

② classはclassName

<h1 class="title">Hello, React!</h1>

JSXではclassじゃなくてclassNameと書くのが決まり。classのままだとコンソールに「className のことでは？」みたいな警告が出てしまいます。これも先ほどの最上位タグと同様仕組みはよくわからないがとりあえず決まりとして覚えると良いと思います。

<h1 className="title">Hello, React!</h1>

JavaScriptの中ではclassが予約語だから、避けてこの名前になっているとのことです。

javascriptを書いてみる

JSXというだけあってhtmlタグだけではなく同じコードの中にjavascriptも同時に書けて実行することが可能です。
JSXの中で波括弧 { } を使うと、JavaScriptの値をそのまま表示できます。

function Hello() {
  const name = "Masa";
  const year = new Date().getFullYear();
  return (
    <>
      <h1>Hello, React!</h1>
      <p>こんにちは、{name}さん！今年は{year}年です。</p>
    </>
  );
}

function App() {
  return <Hello />;
}

export default App;

今回のまとめ

コンポーネントはJSXを返す関数。名前は大文字で始める
<●●● /> と書けば何回でも使い回せる
JSXはHTMLと違って、ルートは1つ、classではなくclassName
{ } でJavaScriptの値を埋め込める