戻る

Remixフレームワークを始める

レダ・サルミ

React 開発者

Remixは、ウェブの基礎とモダンなUXに焦点を当てたフルスタックウェブフレームワークです。

そう、これはまた別の話なのだ。 JS しかし、このフレームワークがマイケル・ジャクソンそしてライアン・フローレンス賢い連中 Reactルーター.では、この「ヴェルディの良いところ」を見てみよう。 リミックス・フレームワーク.

技術詳細

Remixはサーバーサイドフレームワークである。ウェブフェッチAPI そして Reactルーターリミックスの各ルートには3つの主要なエクスポートがある。 ローダーを、"an "を、"an "を アクション とデフォルトの コンポーネント 輸出その ローダー 関数は、ルートにデータを提供するために、レンダリングの前にサーバー上で呼び出されます。 アクション 関数がデータ変異を担当する場合、デフォルトのエクスポートはそのルートにレンダリングされるコンポーネントになります。その ローダー そして アクション 関数はサーバー側でのみ実行され、必ず応答オブジェクトは デフォルト エクスポートはサーバー側とクライアント側の両方で実行される。

はじめに

新しいRemixを初期化するにはプロジェクト:

npx create-remix@latest

重要：プロンプトが表示されたら、"Just the basics"、"Remix App Server "の順に選択してください。

cd [プロジェクト名を指定]。
npm run dev
```

開く http://localhost:3000その クリエート・リミックス コマンドを実行すると、次のような構造のスターター・テンプレートが得られる：

について アプリ フォルダには、すべてのアプリケーションルートとコード.
について app/entry.client.jsx は、ブラウザで実行される最初のコードで、次のように使われる。 水和物 Reactのコンポーネント。
について app/entry.server.jsx このファイルは、Reactアプリを文字列/ストリームにレンダリングし、クライアントへのレスポンスとして送信します。
について app/root.jsx はルート・コンポーネントの場所である。
について app/routes/ はすべてのルートモジュールの行き先で、remixはファイルシステムベースのルーティングを使います。
について 公開 フォルダには静的アセット（画像、フォントなど）を入れます。
について remix.config.js はリミックスのコンフィギュレーションを設定する場所です。

口数は少なく、コードを見せろ

をチェックしてみよう。 ログイン.jsx Remixアプリ内のルート例：

import { redirect, json, Form, useActionData, useTransition } from 'remix';
import { isLoggedIn, verifyLogin } from '../auth';

export const loader = async ({ request }) => {
if (await isLoggedIn(request)) {
return redirect('/dashboard');
}

return json({ success: true });
};

export const action = async ({ request }) => {
const formData = await request.formData();
const values = {
email: formData.get('email') ?? '',
password: formData.get('password') ?? '',
};

const errors = await verifyLogin(values);
if (errors) {
return json({ errors }, { status: 400 });
}

return redirect('/dashboard');
};

export default function LoginRoute() {
const actionData = useActionData();
const transition = useTransition();
const isSubmitting = transition.state === 'submitting';

return (

Email

{actionData?.errors?.email &&
{actionData.errors.email}
}

  <div>
    <label htmlFor="password">Password</label>
    <input id="password" name="password" type="password" />
    {actionData?.errors?.password && (
      <div>{actionData.errors.password}</div>
    )}
  </div>

  <div>
    <button type="submit" disabled={isSubmitting}>
      {`Login ${isSubmitting ? '...' : ''}`}
    </button>
  </div>
</Form>

);
}
```

ここでまず起こることは ローダー 関数でログイン済みかどうかをチェックする。 isLoggedIn 関数を使用する。 リダイレクト に連れて行く。 /ダッシュボード ルートを返します。 {成功：true }。 レスポンスが返されると、ログインページがレンダリングされる。

について ログインルート は、電子メールとパスワードの入力と送信ボタンを持つフォームをレンダリングします。 状態 変数も オンサブミット イベントハンドラをコンポーネントに追加したのは、リミックスではすべてのルートが アクション また、フォームが ポスト メソッドのアクションが呼び出され、そのイベントを処理します。

フォームが送信されると アクション 関数は
フォームデータよりリクエストオブジェクト const formData = await request.formData()を構築していることになる。 価値観 オブジェクトに電子メールとパスワードのプロパティを指定すると formData.get('email') を持つフォームの中で最初にマッチするフィールドを探します。 name="電子メール" プロパティを作成し、その値を返します。認証情報が正しいかどうかは ベリファイログイン 関数を使用すれば、好きなJSスキーマ検証ライブラリを使って フェッチ ログインデータが正しいかどうかをチェックするために、カスタムバックエンドにアクセスします。 リダイレクト ユーザーを /ダッシュボード ルートを返す。 json エラーオブジェクトと HTTPステータスコード400その 使用アクションデータ フックは、エラーがあればこのエラーオブジェクトを返し、条件付きでエラーメッセージを次のように表示する。 {actionData?.errors?.email &&. <div>{actionData.errors.email}</div>}.

について 使用トランジション フックはページの遷移状態についてすべてを教えてくれる。 isSubmitting 変数に投稿が発生したときにチェックしています。 無効にする 送信ボタンを押して ログイン... の代わりに ログインその代わりに、ローディング・スピナーやその他の表示をユーザーに見せることもできる。

について json 関数は application/json 応答オブジェクト。その useLoaderData フックはルートからパースされたJSONデータを返します。 ローダーその 使用アクションデータ ルートを返す アクション パースされたデータ。

SEOフレンドリー

各ルートは メタ Htmlドキュメントのメタタグを設定する関数です。 タイトル そして 記述 すべてのルートにオープングラフやその他のメタタグを追加します。

エクスポート const meta = () => {
const title = 'My Awesome Page'；
const description = 'Super awesome page'；

return {
charset: 'utf-8'、
タイトル、
説明
キーワード'Remix,Awesome'、
'twitter:image': 'https://awesome-page.com/awesome.png'、
'twitter:card': 'summarylargeimage'、
'twitter:クリエイター': '@awesome'、
'twitter:サイト': '@awesome'、
'twitter:title': タイトル、
'twitter:description': 説明、
};
};

エクスポート デフォルト関数 AwesomeRoute() {
return

オーサムルート

;
}
```

便利なリンク

私たちはRemixについての氷山の一角に取り組んだに過ぎない：

概要

Remixの素晴らしいところは、Remixを使いこなすことでウェブの基礎が身につくことだ。モジラのドキュメントRemixがウェブの基礎にフォーカスしているというのはこういうことだ。ResponseオブジェクトやRequestオブジェクトのようなウェブAPIを使って、ユーザーに素晴らしいUXを提供する。

この記事では、Remixが提供する以下のような素晴らしい機能のすべてについて話していない。 ネストされたルート, エラーの境界, リミックス・スタックス しかし、それでもこの記事を読めば、リミックスの哲学を理解できるはずだ。