Project structure overview in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the main component from the root of a Remix app.

Remix

import [1] from '~/root';

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

AApp

BRoot

CMain

Droot

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'root' or 'Root' instead of 'App'.

Importing from './root' instead of '~/root'.

In Remix, the root component is imported from '~/root' using the conventional name 'App'.

2fill in blank

medium

Complete the code to define a route component inside the Remix 'routes' folder.

Remix

export default function [1]() {
  return <div>Hello Remix!</div>;
}

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

AIndex

BApp

CRoute

DRoot

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the component 'Root' or 'App' instead of 'Index'.

Forgetting to export the component as default.

The default route component in Remix is named 'Index' for the root path.

3fill in blank

hard

Fix the error in the Remix loader function to fetch data.

Remix

export async function loader() {
  const data = await fetch('/api/data').then(res => res.[1]());
  return { data };
}

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

Atext

Bjsonify

Cjson

Dparse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'jsonify()' which does not exist.

Using 'parse()' which is not a method on the response.

The fetch response object has a method 'json()' to parse JSON data.

4fill in blank

hard

Fill both blanks to create a Remix form that submits data with POST method.

Remix

<form method=[1] action=[2]>
  <button type="submit">Send</button>
</form>

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

A"post"

B"POST"

C"/submit"

D"submit"

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'post' which may still work but uppercase is standard.

Using 'submit' as action which is not a URL.

The form method should be uppercase 'POST' and the action is the URL path like '/submit'.

5fill in blank

hard

Fill all three blanks to create a Remix loader that returns JSON data with a status code.

Remix

import { json } from '@remix-run/node';

export async function loader() {
  const data = { message: 'Hello' };
  return json(data, { status: [1], headers: { 'Content-Type': [2] } });
}

// Use this in the component:
// const response = useLoaderData(); // returns [3]

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

A200

B"application/json"

Cdata

D"text/html"

Attempts:

3 left

💡 Hint

Common Mistakes

Using status 404 or other error codes.

Using 'text/html' as content type for JSON data.

Expecting the loader to return raw response instead of parsed data.

The loader returns JSON with status 200 and content type 'application/json'. The component receives the 'data' object.