Why Fresh is Deno's official web framework - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import Fresh's core function for creating a page.

Deno

import { [1] } from "https://deno.land/x/fresh@1.0.0/server.ts";

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

Aserve

BcreatePage

Chandler

Drender

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function name not exported by Fresh, like createPage or serve.

The render function is used in Fresh to create page handlers that render components.

2fill in blank

medium

Complete the code to define a Fresh page component that returns a simple heading.

Deno

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

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

A"Welcome to Fresh"

B{Welcome to Fresh}

C'Welcome to Fresh'

DWelcome to Fresh

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the string unquoted or using single quotes which can cause syntax issues in JSX.

JSX requires strings inside tags to be quoted. Double quotes are standard for JSX strings.

3fill in blank

hard

Fix the error in the Fresh page handler export statement.

Deno

export const handler = [1](async (req) => {
  return new Response("Hello from Fresh!");
});

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

Ahandle

Brender

Cserve

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect function names like handle or fetch which are not part of Fresh's API.

Fresh uses the render function to create page handlers that respond to requests.

4fill in blank

hard

Fill both blanks to create a Fresh page that displays a dynamic message using props.

Deno

export default function Greeting([1]) {
  return <p>Hello, [2]!</p>;
}

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

Aprops

Bname

Cprops.name

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using props.name directly as the parameter or using an undefined variable like message.

The component receives props as an argument, and the name property is accessed inside JSX.

5fill in blank

hard

Fill all three blanks to create a Fresh page that fetches data server-side and passes it as props.

Deno

export const handler = [1](async () => {
  const data = await fetch('/api/data').then(res => res.json());
  return [2]({ props: { [3]: data } });
});

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

Arender

Cdata

DResponse

Attempts:

3 left

💡 Hint

Common Mistakes

Returning raw data instead of a Response, or mixing up render and Response usage.

The handler uses render to wrap the async function, returns a Response with props containing data.

Practice

1. What is the main reason Fresh is Deno's official web framework?

easy

A. It uses modern Deno features and server-side rendering for speed.

B. It requires heavy client-side JavaScript for interactivity.

C. It is designed only for mobile app development.

D. It depends on third-party Node.js packages.

Solution

1. Step 1: Understand Fresh's design goals

   Fresh focuses on speed and simplicity by using Deno's modern features and server-side rendering.

2. Step 2: Compare options with Fresh's characteristics

   Options B, C, and D contradict Fresh's lightweight and server-side approach.

3. Final Answer:

   It uses modern Deno features and server-side rendering for speed. -> Option A

4. Quick Check:

   Fresh = modern Deno + server-side rendering [OK]

Hint: Fresh is fast because it uses server-side rendering [OK]

Common Mistakes:

• Thinking Fresh needs heavy client-side code
• Confusing Fresh with mobile-only frameworks
• Assuming Fresh depends on Node.js packages

2. Which of the following is the correct way to create a new Fresh project using Deno?

easy

A. deno run -A https://fresh.deno.dev/init my-app

B. deno create fresh my-app

C. fresh new my-app

D. deno fresh init my-app

Solution

1. Step 1: Recall Fresh's official project creation command

   Fresh projects are created by running a Deno script from fresh.deno.dev with permissions.

2. Step 2: Match the command syntax

   deno run -A https://fresh.deno.dev/init my-app matches the official command format: deno run -A https://fresh.deno.dev/init my-app.

3. Final Answer:

   deno run -A https://fresh.deno.dev/init my-app -> Option A

4. Quick Check:

   Fresh project init uses deno run -A URL [OK]

Hint: Fresh uses deno run -A with fresh.deno.dev URL [OK]

Common Mistakes:

• Using 'deno create' which doesn't exist
• Trying 'fresh new' without installing Fresh CLI
• Assuming 'deno fresh init' is valid

3. Given this Fresh component code snippet, what will be rendered in the browser?

export default function Home() {
  return (
    <main>
      <h1>Welcome to Fresh</h1>
      <p>Fast and simple web apps</p>
    </main>
  );
}

medium

A. A syntax error preventing rendering

B. An empty page with no content

C. Only the <h1> tag content is shown

D. <main><h1>Welcome to Fresh</h1><p>Fast and simple web apps</p></main>

Solution

1. Step 1: Understand Fresh component rendering

   Fresh components return JSX-like HTML elements that render as HTML in the browser.

2. Step 2: Analyze the returned JSX

   The component returns a <main> element containing <h1> and <p> tags with text content.

3. Final Answer:

   <main><h1>Welcome to Fresh</h1><p>Fast and simple web apps</p></main> -> Option D

4. Quick Check:

   JSX returns full HTML structure [OK]

Hint: Fresh renders returned JSX as HTML in browser [OK]

Common Mistakes:

• Expecting no output or empty page
• Thinking JSX causes syntax errors in Fresh
• Assuming partial rendering of tags

4. Identify the error in this Fresh route handler code:

export const handler = {
  GET(req) {
    return new Response('Hello from Fresh!');
  }
};

medium

A. The handler should be a default export, not a named export.

B. The GET method should return a JSON object, not a Response.

C. The handler object must use async functions for HTTP methods.

D. The Response constructor is missing a status code.

Solution

1. Step 1: Review Fresh handler method requirements

   Fresh expects HTTP method handlers like GET to be async functions returning a Response.

2. Step 2: Check the GET method definition

   The GET method is synchronous here, missing async keyword, which can cause issues.

3. Final Answer:

   The handler object must use async functions for HTTP methods. -> Option C

4. Quick Check:

   Fresh handlers = async functions [OK]

Hint: Fresh HTTP handlers must be async functions [OK]

Common Mistakes:

• Omitting async keyword in handler methods
• Returning plain strings instead of Response
• Confusing default and named exports

5. You want to build a Fresh app that loads data from an API on the server and renders it without client-side JavaScript. Which Fresh feature helps achieve this efficiently?

hard

A. Using client-side React components for all UI

B. Server-side rendering with Islands architecture

C. Adding heavy client-side state management libraries

D. Disabling server rendering to speed up load

Solution

1. Step 1: Understand Fresh's Islands architecture

   Fresh uses Islands architecture to render most UI on the server and hydrate only small interactive parts on the client.

2. Step 2: Match the requirement to Fresh features

   Server-side rendering with Islands allows loading data on server and minimal client JS, fitting the requirement.

3. Final Answer:

   Server-side rendering with Islands architecture -> Option B

4. Quick Check:

   Fresh Islands = server render + minimal client JS [OK]

Hint: Use Islands for server data and minimal client JS [OK]

Common Mistakes:

• Thinking all UI must be client-side React
• Adding heavy client-side libraries unnecessarily
• Disabling server rendering which slows load