deve.K

エンジニアが未来を切り開く。

English

React フレームワーク Remix プロジェクト作成まで


スポンサーリンク

ReactRemix画像

Reactの新しいフレームワークであるRemixを試したので

まずはインストールしてプロジェクトの作成までの方法を解説します。

ドキュメントチュートリアルあるので英語が得意な方はこちらから Remix

環境構築

Node.js v14以上

npm v7以上

Windows or Mac

VS Code

私はVS Codeのターミナル操作でやっていきます!。

Remixインストール

まずはRemixプロジェクトを作成するために以下のコマンドを叩きます

初期化になります。

npx create-remix@latest

ReactRemix画像

ロゴと同じでカラフルな表示となっています

なんか可愛い表示ですね。

そのまま進むと

ターミナル画像

オプション選択肢ですね

これはドキュメントでは『Remix App Serverを選択することが重要』みたいなので1番上の『Remix App Server』のデプロイターゲットを選択しましょう!。

別のも気になりますね

デプロイターゲットの選択をすると

ターミナル画像

JSのみかTypeScriptなのかを選択します。

ドキュメントチュートリアルではTypeScriptでの使用になります。

『Ts』を使わないって方は我慢して下さい。

チュートリアルが終わったらご自身で試して下さい。

これでテンプレートのプロジェクトが作成されます。

プロジェクト構造はこのようになってます

ReactRemix画像

軽く解説します!。


App (全てのRemixアプリコードが入る場所)

Appの中にはいくつかのファイルがあります。

  • app/entry.client.tsx

このファイルを使用して、Reactコンポーネントをハイドレイトします。 hydrate()は簡単に言ってしまえば

ReactDOM.render()サーバーでレンダリングされたコンテナーをハイドレイトするために使用することは非推奨となりReact17から削除されてます。

render()でHTMLコンテンツがレンダリングされたコンテナをハイドレイトするために使用されます。

  • app/entry.server.tsx

リクエストがサーバーに来たときに実行されるJSのビットとなり、このファイルを使用しReactアプリを文字列/ストリームにレンダリングして

それをクライアントに送信します。

アプリのルートコンポーネントの配置場所です

HTMLの要素をレンダリングする。

  • app/routes

ここではすべての『ルートモジュール』が移動する場所となり、Remixはディレクトリにあるファイルを使用してそのファイルの名前に基づいてアプリのURLルートを作成します。

remix.config.js

Remixの設定ファイルになります。


とりあえずここまでにしときます!

ではターミナルでコマンドを叩きます

npm run dev

ターミナル上に表示された.『http://localhost:3000』を開くとテンプレートアプリが実行されます。

ReactRemix画像

色々と見ましたが、沢山情報がありました。

この続きはまたの機会に!

私も手探りでやっております

プライバシーポリシー