more data docs

Author: ryanflorence

docs/start/data/actions.md

@@ -0,0 +1,138 @@
+---
+title: Actions
+order: 5
+---
+
+# Actions
+
+[MODES: data]
+
+## Defining Actions
+
+Data mutations are done through Route actions defined on the `action` property of a route object. When the action completes, all loader data on the page is revalidated to keep your UI in sync with the data without writing any code to do it.
+
+```tsx
+import { createBrowserRouter } from "react-router";
+import { someApi } from "./api";
+
+let router = createBrowserRouter([
+  {
+    path: "/projects/:projectId",
+    Component: Project,
+    action: async ({ request }) => {
+      let formData = await request.formData();
+      let title = formData.get("title");
+      let project = await someApi.updateProject({ title });
+      return project;
+    },
+  },
+]);
+```
+
+## Calling Actions
+
+Actions are called declaratively through `<Form>` and imperatively through `useSubmit` (or `<fetcher.Form>` and `fetcher.submit`) by referencing the route's path and a "post" method.
+
+### Calling actions with a Form
+
+```tsx
+import { Form } from "react-router";
+
+function SomeComponent() {
+  return (
+    <Form action="/projects/123" method="post">
+      <input type="text" name="title" />
+      <button type="submit">Submit</button>
+    </Form>
+  );
+}
+```
+
+This will cause a navigation and a new entry will be added to the browser history.
+
+### Calling actions with useSubmit
+
+You can submit form data to an action imperatively with `useSubmit`.
+
+```tsx
+import { useCallback } from "react";
+import { useSubmit } from "react-router";
+import { useFakeTimer } from "fake-lib";
+
+function useQuizTimer() {
+  let submit = useSubmit();
+
+  let cb = useCallback(() => {
+    submit(
+      { quizTimedOut: true },
+      { action: "/end-quiz", method: "post" }
+    );
+  }, []);
+
+  let tenMinutes = 10 * 60 * 1000;
+  useFakeTimer(tenMinutes, cb);
+}
+```
+
+This will cause a navigation and a new entry will be added to the browser history.
+
+### Calling actions with a fetcher
+
+Fetchers allow you to submit data to actions (and loaders) without causing a navigation (no new entries in the browser history).
+
+```tsx
+import { useFetcher } from "react-router";
+
+function Task() {
+  let fetcher = useFetcher();
+  let busy = fetcher.state !== "idle";
+
+  return (
+    <fetcher.Form method="post" action="/update-task/123">
+      <input type="text" name="title" />
+      <button type="submit">
+        {busy ? "Saving..." : "Save"}
+      </button>
+    </fetcher.Form>
+  );
+}
+```
+
+They also have the imperative `submit` method.
+
+```tsx
+fetcher.submit(
+  { title: "New Title" },
+  { action: "/update-task/123", method: "post" }
+);
+```
+
+See the [Using Fetchers][fetchers] guide for more information.
+
+## Accessing Action Data
+
+Actions can return data available through `useActionData` in the route component or `fetcher.data` when using a fetcher.
+
+```tsx
+function Project() {
+  let actionData = useActionData();
+  return (
+    <div>
+      <h1>Project</h1>
+      <Form method="post">
+        <input type="text" name="title" />
+        <button type="submit">Submit</button>
+      </Form>
+      {actionData ? (
+        <p>{actionData.title} updated</p>
+      ) : null}
+    </div>
+  );
+}
+```
+
+---
+
+Next: [Navigating](./navigating)
+
+[fetchers]: ../../how-to/fetchers

docs/start/data/custom.md

@@ -1,10 +1,15 @@
 ---
 title: Custom Framework
+order: 8
 ---
 
 # Custom Framework
 
-Instead of using `@react-router/dev`, you can integrate React Router's framework features (like loaders, actions, fetchers, etc.) into your own bundler and server abstractions.
+[MODES: data]
+
+## Introduction
+
+Instead of using `@react-router/dev`, you can integrate React Router's framework features (like loaders, actions, fetchers, etc.) into your own bundler and server abstractions with Data Mode..
 
 ## Client Rendering
 

docs/start/data/data-loading.md

@@ -0,0 +1,40 @@
+---
+title: Data Loading
+order: 4
+---
+
+# Data Loading
+
+[MODES: data]
+
+## Providing Data
+
+Data is provided to route components from route loaders:
+
+```tsx
+createBrowserRouter([
+  {
+    path: "/",
+    loader: () => {
+      // return data from here
+      return { records: await getSomeRecords() };
+    },
+    Component: MyRoute,
+  },
+]);
+```
+
+## Accessing Data
+
+The data is available in route components with `useLoaderData`.
+
+```tsx
+import { useLoaderData } from "react-router";
+
+function MyRoute() {
+  const { records } = useLoaderData();
+  return <div>{records.length}</div>;
+}
+```
+
+As the user navigates between routes, the loaders are called before the route component is rendered.

docs/start/data/installation.md

@@ -0,0 +1,55 @@
+---
+title: Installation
+order: 1
+---
+
+# Installation
+
+[MODES: data]
+
+## Bootstrap with a Bundler Template
+
+You can start with a React template from Vite and choose "React", otherwise bootstrap your application however you prefer (Parcel, Webpack, etc).
+
+```shellscript nonumber
+npx create-vite@latest
+```
+
+## Install React Router
+
+Next install React Router from npm:
+
+```shellscript nonumber
+npm i react-router
+```
+
+## Create a Router and Render
+
+Create a router and pass it to `RouterProvider`:
+
+```tsx lines=[1-4,9-14,19]
+import {
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router";
+
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <div>Hello World</div>,
+  },
+]);
+
+const root = document.getElementById("root");
+
+ReactDOM.createRoot(root).render(
+  <RouterProvider router={router} />
+);
+```
+
+---
+
+Next: [Routing](./routing)

docs/start/data/navigating.md

@@ -0,0 +1,12 @@
+---
+title: Navigating
+order: 6
+---
+
+# Navigating
+
+Navigating in Data Mode is the same as Framework Mode, please see the [Navigating](../framework/navigating) guide for more information.
+
+---
+
+Next: [Pending UI](./pending-ui)

docs/start/data/pending-ui.md

@@ -0,0 +1,12 @@
+---
+title: Pending UI
+order: 7
+---
+
+# Pending UI
+
+Pending UI is the same as Framework Mode, please see the [Pending UI](../framework/pending-ui) guide for more information.
+
+---
+
+Next: [Custom Framework](./custom)