MODELLO（モデュロ）中の人です。
MODELLO（モデュロ）は、CMSなので使いやすさは抜群ですが、CMSを使わなくてもWEBページって作りたいですよね？
と、いうことで、viteを使用してReactを導入し、tutorialができる所までを紹介したいと思います。

そもそもReactとは何か?

フロントエンド用のフレームワーク

フロントエンド用のフレームワークではanglerやvueも有名だが、主流はReact

従来のフロントエンド開発ではhtml中にjavascriptを埋め込むがReactのようなフロントエンドフレームワークではjavascriptを通してhtmlを吐き出す

htmlのパーツを定義して再使用することが可能になる

Reactで生成されるのは静的サイト(javascriptのコード)

最初の読み込みの際にいっぺんに読み込まれるので初期読み込みが長いが、その分ページ遷移が早い

SEO等がしにくいという話あり

なので描写の際に好きな場所をサーバーサイドでもできるフロントエンドフレームワークも増えてきている。
⇒reactに対応するSSR(サーバーサイドレンダリング)としてnext.jsが有名

ただしこちらは動的出力になる。

静的サイトならばS3などに一括して置ける

DBに値を入れるような動的処理はAPIを通してバックエンドが担当する。

あくまでフロントエンドはhtml部分、つまり表示だけ

viteを使用してReactを導入してみよう

viteを使ってReactを導入する

  • npm create vite@latest でviteを使ってインストールする
  • フレームワークにReactを選択
Reactを使ってみよう！（第1弾）２
  • valiantはjavascriptもしくはjavascript+SWCを選択
    • SWCはrust製のトランスパイル用のライブラリ
  • レスポンスにはYesを回答する
  • 導入されたプロジェクト内部に移動して、 npm install して必要なライブラリをinstallする
  • npm run dev を押すと開発用のサーバーがローカルでたてられる
Reactを使ってみよう！（第1弾）
  • 試しに何かうってみる。
    • src/App.jsx に適当にhelloworldを入れてみる
    • devサイトが更新されてhello worldが表示される
      • reactの npm run dev では通常、hotリロードといって、更新が自動的に反映される
Reactを使ってみよう！（第1弾）３

環境ができたら、Reactのクイックスタートおよびチュートリアルをやってみる

以下のサイトからReactのクイックスタートおよびチュートリアルをやってみる

https://ja.react.dev/learn

https://ja.react.dev/learn/tutorial-tic-tac-toe

  • 基本動作が身につく内容なのでお勧めです
  • tutorialをやるにあたって、viteで作った App.jsx は、空にして問題なし
  • function() の形で書かれているが、アロー関数でも問題なし

次回予告

次回は、Javascriptのformatter,linter,test用のライブラリや環境について書きたいとおもいます。