【Remix】Remixリリース

Remixが本日リリースされた

remix.run

RemixはOSSになる前に調べていて注目しているフレームワーク

uga-box.hatenablog.com

インストールして試してみる

$ npx create-remix@latest

インストーラーに従ってもろもろ環境を選択して実行

$ npm run dev

http://localhost:3000でサンプルアプリケーションが立ち上がる

前回調べたときのRemixの特徴のファイルルーティングシステムを確認してみる

ファイルルーティングシステムとは、ルーティング用の設定ファイルをつくらずともファイルをおけばそこにパスが通る仕組み

試しにまず、以下のような/app/routes/gists.jsをつくる

import { Outlet } from "remix";

export default function Gists() {
  return (
    <div>
       <h1 className="text-3xl bold">Gists</h1>
       <Outlet />
    </div>
  )
}

これだけで、http://localhost:3000/gistsにアクセすると、上のページが表示される

上のソースのOutletはパスの子階層のコンポーネントが埋め込まれる

例えば、/app/routes/gistsディレクトリをつくり、そこにindex.tsxという以下のようなファイルをつくると

export default function GistsIndex() {
  return (
    <h2 className="text-xl">Gists Index</h2>
  )
}

<Outlet />の箇所にこのindex.tsxがレンダリングされて表示される

存在しないパスを指定した場合は、404ページを表示してくれる

これは/app/root.tsx内のCatchBoundary内でハンドリングしているみたい

export function CatchBoundary() {
  let caught = useCatch();

  let message;
  switch (caught.status) {
    case 401:
      message = (
        <p>
          Oops! Looks like you tried to visit a page that you do not have access
          to.
        </p>
      );
      break;
    case 404:
      message = (
        <p>Oops! Looks like you tried to visit a page that does not exist.</p>
      );
      break;

    default:
      throw new Error(caught.data || caught.statusText);
  }

  return (
    <Document title={`${caught.status} ${caught.statusText}`}>
      <Layout>
        <h1>
          {caught.status}: {caught.statusText}
        </h1>
        {message}
      </Layout>
    </Document>
  );
}        

チュートリアルがあったのでやろうと思ったが、クラスメソッドの@_hiromosihigeさんが早速記事にしていたのでこれを眺めるだけにした 　

dev.classmethod.jp

時間があったらやる

あとは、http://remix.new にアクセスするとすぐ試せるみたい

他参考

https://zenn.dev/kaa_a_zu/articles/fbd06ca2cc3b86