【TypeScript】Reactを触っている

こんばんは、葛の葉です。 最近、個人でReactを触っています。

ja.reactjs.org

Reactはもはや説明不要なほど有名なフロントエンド向けのJSフレームワークです。

JSX(TypeScriptならTSX)を使うことが独特。

ReactはJSXという専用の拡張構文を使用します。

ja.reactjs.org

import React from "react";
import * as ReactDom from "react-dom";

const Sidebar  = () => {
  return (
    <div>
        <p>ほげほげ</p>
    </div>
  )
};

ReactDom.render(<Sidebar />, document.getElementById("root"));

Sidebar関数のような関数を作り、さらに関数の返り値にHTMLのようなものを記載します。そのSidebar関数をReactDom.rendorから呼び出します。ちょっと奇妙なのが<関数名 />となっているところです。これがReact独特の記載方法になります。Sidebar関数と便宜的に書いているのですが、実はこれ、Sidebarコンポーネントということになります。サイドバーという画面コンポーネントを作成し、それをReactが描写しているのが上記のコードになります。

UIをきれいに作るために、JSXからトランスパイル時にそのCSS向けに記述し直してくれるCSSフレームワークを使うと簡単できれいなウェブ画面が作成できます。

qiita.com

また、Rectではコンポーネントの持つ状態を管理するReduxという別のパッケージもありましたが、昨今ではReact Hooksという公式で同様な機能を持つようになりました。

react-redux.js.org

Reducerの機能はちょっと複雑ですが頑張って取得していきたいです。