@remix-run/react

What is @remix-run/react?

@remix-run/react is a package that provides React components and hooks for building web applications with Remix, a full-stack web framework. It allows developers to handle routing, data loading, and form handling in a seamless and efficient manner.

What are @remix-run/react's main functionalities?

Routing

The routing feature allows you to define navigation within your application. The `Link` component is used to create navigable links, and the `Outlet` component is used to render the matched child route.

import { Link, Outlet } from '@remix-run/react';

function App() {
  return (
    <div>
      <nav>
        <Link to="/home">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Outlet />
    </div>
  );
}

Data Loading

The data loading feature allows you to fetch data on the server and pass it to your components. The `useLoaderData` hook is used to access the data loaded by the `loader` function.

import { useLoaderData } from '@remix-run/react';

export async function loader() {
  const data = await fetchData();
  return data;
}

function DataComponent() {
  const data = useLoaderData();
  return <div>{JSON.stringify(data)}</div>;
}

Form Handling

The form handling feature allows you to manage form submissions and handle the data on the server. The `Form` component is used to create forms, and the `useActionData` hook is used to access the data returned by the `action` function.

import { Form, useActionData } from '@remix-run/react';

export async function action({ request }) {
  const formData = await request.formData();
  const result = await processFormData(formData);
  return result;
}

function FormComponent() {
  const actionData = useActionData();
  return (
    <Form method="post">
      <input type="text" name="name" />
      <button type="submit">Submit</button>
      {actionData && <div>{JSON.stringify(actionData)}</div>}
    </Form>
  );
}

Other packages similar to @remix-run/react

react-router

React Router is a popular library for handling routing in React applications. It provides similar routing capabilities as @remix-run/react but does not include built-in data loading and form handling features.

next

Next.js is a React framework that offers server-side rendering, static site generation, and API routes. It provides a more comprehensive solution compared to @remix-run/react, including routing, data fetching, and form handling.

gatsby

Gatsby is a React-based framework for building static sites. It offers powerful data fetching capabilities through GraphQL and a rich plugin ecosystem. While it provides routing and data loading, it is more focused on static site generation compared to @remix-run/react.

README

Welcome to Remix!

Remix is a web framework that helps you build better websites with React.

To get started, open a new shell and run:

npx create-remix@latest

Then follow the prompts you see in your terminal.

For more information about Remix, visit remix.run!

Changelog

v2.0.1

Date: 2023-09-21

Patch Changes

• Fix types for MDX files when using pnpm (#7491)
• Update getDependenciesToBundle to handle ESM packages without main exports (#7272)
  • Note that these packages must expose package.json in their exports field so that their path can be resolved
• Fix server builds where serverBuildPath extension is .cjs (#7180)
• Fix HMR for CJS projects using remix-serve and manual mode (remix dev --manual) (#7487)
  • By explicitly busting the require cache, remix-serve now correctly re-imports new server changes in CJS
  • ESM projects were already working correctly and are not affected by this.
• Fix error caused by partially written server build (#7470)
  • Previously, it was possible to trigger a reimport of the app server code before the new server build had completely been written. Reimporting the partially written server build caused issues related to build.assets being undefined and crashing when reading build.assets.version
• Add second generic to UIMatch for handle field (#7464)
• Fix resource routes being loaded through route.lazy (#7498)
• Throw a semantically correct 405 ErrorResponse instead of just an Error when submitting to a route without an action (#7423)
• Update to latest version of @remix-run/web-fetch (#7477)
• Switch from crypto.randomBytes to crypto.webcrypto.getRandomValues for file session storage ID generation (#7203)
• Use native Blob class instead of polyfill (#7217)

Changes by Package 🔗

• @remix-run/dev
• @remix-run/node
• @remix-run/react
• @remix-run/serve

Full Changelog: v2.0.0...v2.0.1