Reactの新しいフレームワークであるRemixを試したので
まずはインストールしてプロジェクトの作成までの方法を解説します。
ドキュメントチュートリアルあるので英語が得意な方はこちらから Remix
環境構築
Node.js v14以上
npm v7以上
私はVS Codeのターミナル操作でやっていきます！。
Remixインストール
まずはRemixプロジェクトを作成するために以下のコマンドを叩きます
初期化になります。
npx create-remix@latest
ロゴと同じでカラフルな表示となっています
なんか可愛い表示ですね。
そのまま進むと
オプション選択肢ですね
これはドキュメントでは『Remix App Serverを選択することが重要』みたいなので1番上の『Remix App Server』のデプロイターゲットを選択しましょう！。
別のも気になりますね
デプロイターゲットの選択をすると
JSのみかTypeScriptなのかを選択します。
ドキュメントチュートリアルではTypeScriptでの使用になります。
『Ts』を使わないって方は我慢して下さい。
チュートリアルが終わったらご自身で試して下さい。
これでテンプレートのプロジェクトが作成されます。
プロジェクト構造はこのようになってます
軽く解説します！。
App (全てのRemixアプリコードが入る場所)
Appの中にはいくつかのファイルがあります。
- app/entry.client.tsx
このファイルを使用して、Reactコンポーネントをハイドレイトします。 hydrate()は簡単に言ってしまえば
ReactDOM.render()サーバーでレンダリングされたコンテナーをハイドレイトするために使用することは非推奨となりReact17から削除されてます。
render()でHTMLコンテンツがレンダリングされたコンテナをハイドレイトするために使用されます。
- app/entry.server.tsx
リクエストがサーバーに来たときに実行されるJSのビットとなり、このファイルを使用しReactアプリを文字列/ストリームにレンダリングして
それをクライアントに送信します。
- app/root.tsx
アプリのルートコンポーネントの配置場所です
HTMLの要素をレンダリングする。
- app/routes
ここではすべての『ルートモジュール』が移動する場所となり、Remixはディレクトリにあるファイルを使用してそのファイルの名前に基づいてアプリのURLルートを作成します。
remix.config.js
Remixの設定ファイルになります。
とりあえずここまでにしときます！
ではターミナルでコマンドを叩きます
npm run dev
ターミナル上に表示された.『http://localhost:3000』を開くとテンプレートアプリが実行されます。
色々と見ましたが、沢山情報がありました。
この続きはまたの機会に！
私も手探りでやっております