ReactのJSX記法について

こんにちは。今回はReactの環境を作成した後の話になります。JSX（TypeScriptではTSX）記法に関して触れていこうと思います。

まず初めにReactのプロジェクトを作成してください。（まだ作成されていない方はこちらを参考にReactの環境作成を行っていただくと始めることができます。）

そもそもJSX記法に関して何なのかという話ですが、これはJavaScriptファイル内にHTMLタグを使ってReact要素（DOM要素みたいなもの）を作成していくことができる記法になります。つまりUIに関する記述になります。つまりjsファイル（jsxファイル）内にUIとロジックを作成することができるようになるReactフレームワーク内の記述方法になります。これによっていままでHTMLでマークアップされた部品とそこに動きをつけるJSだったのが、これらをひとまとめにしたコンポーネントという単位でみることができるようになったものらしいです。

では実際にどのように記述するのかfunctional componentの記述方法で作成してみましょう。

作成したら「App.js」と「App.css」ファイルにデフォルトのアプリが作成されているのでこちらに書かれているコードを消しましょう。（ファイルはそのまま再利用するので消さないでください。）

TypeScriptのテンプレートを作成された方はファイル名が「App.js」ではなく、「App.ts」と拡張子が変わっているのも確認できるはずです。

そうしたら「App.js」に

// app.js
import React from 'react';
import './App.css';

const App = () => {
  return (
    <div>
      <H1>
        Hello, React
      </H1>
    </div>
  );
}

export default App;

このように記述した後、コマンドラインツールを用いて、プロジェクトの直下で以下のコマンドを入力します。

$ npm run start

少し待つとコマンドライン上にURLで「http://localhost:3000」と表記されるのでこれをブラウザ上に張り付けてみると、ブラウザ上にHello, Reactと表示されるのでこれが表示されたら成功です。今回作成したコンポーネントにはロジックは書いておらず、単純なマークアップのみを作成しましたが「props」を用いることで再利用することができるコンポーネントを作ることや、普通のJS記法を組み込んでロジックを書くことができます。またコンポーネント内の変数をいじりたい場合は状態管理の「useState」を使ったり、状態管理のライブラリである「Redux」を使うとよりアプリケーション内を横断的に状態管理できます。