Why Remix embraces web standards - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Remix loader function that fetches data.

Remix

export async function loader({ request }) {
  const data = await fetch([1]);
  return data.json();
}

Drag options to blanks, or click blank then click option'

A'data.json'

Brequest

C'/api/data'

D'/static/data'

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the request object directly to fetch instead of a URL string.

Using a file name without a path.

The loader function fetches data from a URL string. '/api/data' is a valid endpoint.

2fill in blank

medium

Complete the code to use Remix's Form component for a POST request.

Remix

<Form method=[1]>
  <button type="submit">Send</button>
</Form>

Drag options to blanks, or click blank then click option'

A"post"

B"put"

C"get"

D"delete"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' when intending to send data.

Using uppercase method names.

The Form component uses the method prop to specify HTTP method. 'post' is used to send data.

3fill in blank

hard

Fix the error in the Remix action function to handle form data correctly.

Remix

export async function action({ request }) {
  const formData = await request.[1]();
  const name = formData.get('name');
  return { success: true, name };
}

Drag options to blanks, or click blank then click option'

AformData()

BformData

Ctext

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using json() instead of formData() for form submissions.

Calling formData as a property without parentheses.

The request object has a method formData() to parse form data from the request.

4fill in blank

hard

Fill both blanks to create a Remix route component that uses loader data and renders it.

Remix

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

export default function [1]() {
  const data = useLoaderData();
  return <div>[2]: {data.message}</div>;
}

Drag options to blanks, or click blank then click option'

AMessageRoute

BUserRoute

C"Message"

D"User"

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around component names.

Not using a string for the label inside JSX.

The component name should be MessageRoute and the rendered text should be 'Message' to label the data.

5fill in blank

hard

Fill all three blanks to define a Remix loader that returns JSON with a message and status.

Remix

export async function loader() {
  return new Response(JSON.stringify({ [1]: 'Hello Remix', [2]: 200 }), {
    status: [3]
  });
}

Drag options to blanks, or click blank then click option'

Amessage

Bstatus

C200

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around keys in the object literal.

Using a string instead of a number for status code.

The JSON object keys are 'message' and 'status', and the HTTP status code is 200.