tanish-kr's learning log

Learning output log

JavaScript React

インストール方法

Reactを利用するには、以下の方法がある

  • CDNからの取得
  • npmコマンドによるインストール
  • ツールチェインによる雛形の生成

CDNからの取得

CDNからReactを取得する場合、crossoriin属性を設定することが推奨されている。

React16以降でより優れたエラーハンドリングを利用できる

  • 開発用
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  • 本番用(圧縮・最適化済み)
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

ツールチェインによる雛形の生成

主流なツールチェイン

  • create-react-app
  • Next.js
  • Gatsby

create-react-app

Reactで新しくシングルページアプリケーションを作成する場合、現在最も推奨されている。バックエンドの機能は提供しないで、フロントエンドのビルドパイプラインを構築してくれる。

$ npm install -g create-react-app
$ npx create-react-app hello-react --typescript

--typescriptでTypeScriptをデフォルトで使用可能になった

Next.js

Next.jsはReactを使って静的なサイトやサーバサイドでレンダーされるアプリケーションを構築する場合に人気のある、軽量フレームワーク。

Gatsby

GatsbyはReactで静的なウェブサイトを作成するのに適している。Reactコンポーネントを使用しながらも、事前にレンダーされたHTMLとCSSを出力することで最速のロード時間を保証する。