【React】JSX記法を知る

どうも、豆腐メンタルな駆け出しエンジニアです。
最近、Reactの学習を始めたので、自身への備忘録として残しておきます。

Reactの約束事

Reactを使う際に最初にやることとしては、まずは下記のように記述

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

こちらは、Reactを使う際の約束事という認識で問題ないかと。
HTMLで言うなら、DOCTYPE~みたいなものでしょうか。

HTML側の準備

<div id=pityu></id>

こいついつもピチュー言ってんな...
簡単に解説する程度なのでHTMLはこれくらい

Reactの記述方法

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

上記のjsファイルの記述の下に、以下のように記述

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

const App = () => {
  return (
      <h1>ピチュー</h1>
      <p>こねずみポケモン</p>
  );
};
// 恐らくエラーが出るはず

アロー関数のAppを用意。returnで返却したい要素として、h1タグとpタグを入れています。
が、これだけだとエラーが出てしまいます。
何故か...

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

const App = () => {
  return (
     <div>
      <h1>ピチュー</h1>
      <p>こねずみポケモン</p>
     </div>
  );
};

Reactにおける記法、JSX記法では、
「returnする内容は、一つのタグで囲まなければならない」というルールがあります。
なので、divタグをつける...と言う認識ですね。

画面に表示する

最後に、記述された内容を画面に表示してみましょう

ReactDOM.render(<App />, document.getElementById("root"));

上記のコードを入力すると画面に表示できます。
()内に注目。
,を基準にして、左が「何処から持ってきて」
右が「何処に表示させるか」と言う認識で間違いないかと思われます。

最後に

まだまだReact勉強したばかりですが、今後も継続して学習していきたいです。
何かあればご一報ください。それでは...