Full Stack Development

Assignment #1
Welcome Message

by Tomas Trescak t.trescak@westernsydney.edu.au
Final Outcome

Instructions

  1. Add the "Get Things Done" header to your application.
  2. Render the initial list of tasks described as:
    1. Task 1
    2. Task 2
    3. Task 3

Next.JS

https://www.nextjs.org

Next.JS

Routing

Project Files
  • src
    • app
      • page.tsx

    Next.JS

    Routing

        import styles from "./index.module.css";

export default async function Home() {
  return (
    <div>Hello World!</div>
  );
}
    http://localhost:3000/
    Hello World
    Project Files
    • src
      • app
        • page.tsx
        • tasks
          • page.tsx

    Next.JS

    Routing

        import styles from "./index.module.css";

export default async function Home() {
  return (
    <h1>Tasks</h1>
  );
}
    http://localhost:3000/ tasks
    Tasks

    Assignment #1

    Testing

    Assignment #1

    Fixing the first test

        import styles from "./index.module.css";

export default async function Home() {
  return (
    <main className={styles.main}>
      <div className={styles.container}>
        <h1 className={styles.title}></h1>
      </div>
    </main>
  );
}
    /src/app/page.tsx

    Assignment #1

    Fixing the first test

        import styles from "./index.module.css";

export default async function Home() {
  return (
    <main className={styles.main}>
      <div className={styles.container}>
        <h1 className={styles.title}>Get Things Done</h1>
      </div>
    </main>
  );
}
    /src/app/page.tsx

    Assignment #1: Fixing the first test

    Assignment #1

    Finalising your assignment

        it("Show the list of tasks", async function () {
  render(
    <Suspense>
      <Page />
    </Suspense>
  );

  expect(await screen.findByText("Task 1")).toBeInTheDocument();
  expect(screen.getByText("Task 2")).toBeInTheDocument();
  expect(screen.getByText("Task 3")).toBeInTheDocument();
});
    /src/app/page.test.tsx

    Assignment #1

    Finalising your assignment

        import styles from "./index.module.css";

export default async function Home() {
  return (
    <main className={styles.main}>
      <div className={styles.container}>
        <h1 className={styles.title}>Get Things Done</h1>
      </div>
    </main>
  );
}
    /src/app/page.tsx

    Assignment #1

    Finalising your assignment

        import styles from "./index.module.css";

export default async function Home() {
  return (
    <main className={styles.main}>
      <div className={styles.container}>
        <h1 className={styles.title}>Get Things Done</h1>
        <ul>
          <li>Task 1</li>
          <li>Task 2</li>
          <li>Task 3</li>
        </ul>
      </div>
    </main>
  );
}
    /src/app/page.tsx