Reactのキャッチアップ始めます

はじめに

久しぶりの投稿ですね。やはり習慣的に書き続けるのがよいなと思う今日このごろ。

業務でReactをやりだしたので、そのキャッチアップのメモをまとめて行きたいと思います。

まずはGetting Startedから

おそらく公式ドキュメントのここからスタートするのが良いのかなと思う。

ja.reactjs.org

上記を眺めつつ、チュートリアルにすすむ

ja.reactjs.org

GettingStartedの記事の中で気になたものメモ

Reactを試す

Reactは当初より、既存のプロジェクトに徐々に追加してけるデザインになっている

そうなんだ。それはVue.jsのデザインだと思った。

Web上で試せるオンラインエディタ

  • codepen
    • よくみる、画面上で3panelくらいにわかれるエディタ
    • JSはscriptタグでいれる
  • CodeSandbox
    • package.jsonで依存関係管理できるぽい
  • Stackblitz

軽く、3つとも触ってみたけど、どれも簡単に確認できるんですね。

ローカルで試すだけなら、以下のHTMLファイルだけでも動きを確認できる。 raw.githubusercontent.com

ReactをWebサイトに追加する

  • 1分でReactを導入する
  • JSXを使う

ja.reactjs.org

スクリプトをcdnからインポートして、試す方法の紹介

  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

JSXを手軽に試すには、scriptタグでbabelをインポートする

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Reactもバンドルツールでバンドルしたりコンパイルせずに、そのままブラウザ上で動作させることできるんだぁ

  • HTMLにDOMコンテナの追加
  • ReactのJSファイルをCDNからインポート
  • DOMコンテナを取得して、ReactDOM.createRoot(コンテナ)
  • root.render(e(コンポーネント))

みたいなかんじ。

JSXなしだと

const e = React.createElement;

return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

JSXありだと

return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);

JSX の使用は完全にオプション らしい。

おわりに

この記事をメモ代わりにキャッチアップをすすめていきたいと思います。