What is Remix - Interactive Quiz & Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Remix route component.

Remix

export default function Index() {
  return <h1>[1]</h1>;
}

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

A<Welcome to Remix!>

B"Welcome to Remix!"

CWelcome to Remix!

D{Welcome to Remix!}

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around text in JSX

Using angle brackets incorrectly

The text inside JSX must be a string wrapped in quotes.

2fill in blank

medium

Complete the code to import the Link component from Remix.

Remix

import { [1] } from "@remix-run/react";

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

ARoute

BNavigate

CRouter

DLink

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Route instead of Link

Using Navigate which is from React Router

The Link component is used for navigation in Remix.

3fill in blank

hard

Fix the error in the loader function to return JSON data.

Remix

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

export async function loader() {
  return [1]({ message: "Hello from loader" });
}

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

Aresponse

Bfetch

Cjson

Dreturn

Attempts:

3 left

💡 Hint

Common Mistakes

Returning raw objects without json()

Using fetch inside loader incorrectly

The json function formats data properly for Remix loaders.

4fill in blank

hard

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

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"/submit"

C"get"

D"/home"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' method for data submission

Wrong action URL causing form to fail

Forms use method 'post' and action URL to submit data in Remix.

5fill in blank

hard

Fill all three blanks to create a loader that fetches data and returns JSON.

Remix

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

export async function loader() {
  const response = await fetch([1]);
  const data = await response.[2]();
  return [3](data);
}

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

A"https://api.example.com/data"

Bjson

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using json() on response instead of text()

Not wrapping returned data with Remix json()

Fetch URL is a string, response.text() reads text, json() wraps data for Remix.