Practice - 5 Tasks
Answer the questions below
1fill in blank
easyComplete the code to import the Astro component correctly.
Astro
import [1] from 'astro/components';
Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Using lowercase or incorrect casing in import names.
Confusing Astro import with Next.js or Gatsby imports.
✗ Incorrect
The correct import for Astro components is Component.
2fill in blank
mediumComplete the code to create a Next.js page component.
Astro
export default function [1]() { return <div>Hello Next.js</div>; }
Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Using component names that are not standard or confusing with app-level components.
✗ Incorrect
Next.js page components are often named Page by convention.
3fill in blank
hardFix the error in the Gatsby GraphQL query syntax.
Astro
export const query = graphql`query [1] { allMarkdownRemark { nodes { id } } }`; Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Omitting the query name.
Using reserved words as query names.
✗ Incorrect
The query name must be a valid identifier, like MyQuery.
4fill in blank
hardFill both blanks to create a React component in Next.js that uses useState and useEffect.
Astro
import React, { [1] , [2] } from 'react'; function Counter() { const [count, setCount] = [3](0); [4](() => { document.title = `Count: ${count}`; }, [count]); return <button onClick={() => setCount(count + 1)}>{count}</button>; }
Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Confusing useState with useEffect.
Forgetting to import hooks.
✗ Incorrect
To manage state and side effects in React, use useState and useEffect.
5fill in blank
hardFill all three blanks to create a Gatsby page component that queries data and displays it.
Astro
import React from 'react'; import { graphql } from 'gatsby'; export default function BlogPost({ data }) { return <div><h1>{data.[1].title}</h1><p>{data.[2].content}</p></div>; } export const query = graphql`query [3] { markdownRemark { title content } }`;
Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Mismatching data keys with query fields.
Omitting the query name.
✗ Incorrect
The data object keys match the GraphQL query name markdownRemark, and the query is named BlogPostQuery.