Assignment 1.1: Welcome Message / Full Stack Development

Assignment 1.1: Welcome Message
by Tomas Trescak· Setup

0 / 700 XP

The external project has not been reviewed yet

Please follow instructions below to submit your project

Theme wsu

American

Presentation Transcript
If you prefer text to video, check out the transcript of the presentation above

Slide 1 ----------- Part 1: It's time to solve our first assignment. This time we will do it together! Slide 2 ----------- Part 1: In this assignment, we keep things simple! You have the following goals: Part 2: Add the "Get Things Done" header to your application Part 3: Render the initial list of tasks Part 4: Once you are done, your result should look as in the following figure Slide 3 ----------- Part 1: Please open the assignment project in Visual Studio Code. If you forgot how to download your assignment files, please check out the section called Project Setup. Part 2: The downloaded project is a NextJS application. Next is a framework for building web application that comes with opinionated project structure supporting routing, client and server rendering and others. We will explore individual features of NextJS in this course in due time. Slide 4 ----------- Part 1: Let's start exploring the fantastic world of NextJS. First, you need to know that NextJS uses file system-based routing, where each directory represents one segment of your route. Part 2: Please check out the directory structure of your project, which you can find in the left part of the Visual Studio Code. Slide 5 ----------- Part 1: The "src" folder contains the majority of your source code files. Part 2: The app folder is a special folder in NextJS representing the root point of your application. Every subdirectory in the app folder represents a route of your web application. More on this later. Part 3: The source code of the page is stored in the page.tsx file. The page.tsx stored in the app folder represents the entry point to your web application. In our case, we create a simple React component that returns a Hello World text. Part 4: If you run this NextJS application and open it in your browser at http localhost 3000, you will see the Hello World text. Slide 6 ----------- Part 1: Now, what if we would like to display different content in a new URL path, such as a list of tasks in a new tasks page? Part 2: With NextJS it's easy! All we have to do is to create a new directory named "tasks", representing the URL path "/tasks". Inside that directory we create the page.tsx file with the source code of the page. Part 3: In our case, we simply render the header of the page with the text Tasks. Slide 7 ----------- Part 1: When you visit the application in the browser, the welcome page will not display anything. So, how do you proceed? The easiest way to see what is expected of you in the assignment is to run automated tests and ensure they all pass. Thus, in a separate terminal, run the command "pnpm test," which will launch automated tests. Part 2: As you would expect, the results are somewhat disappointing, with all the tests failing. Let's fix that! Slide 8 ----------- Part 1: Please open the entry page file at src/app/page.tsx. As you see, it is not showing anything. Slide 9 ----------- Part 1: Now, add “Get Things Done” between the h1 tags and save your file. Slide 10 ----------- Part 1: Let's do it together now! We make the changes and save the file. Two things have happened. The page in the browser automatically reloads with your modified content, and the tests are automatically re-run, this time with only one failing test! The process is called “hot reloading,” and it makes your changes instantaneous, facilitating development of web applications. Slide 11 ----------- Part 1: Let's talk about what you need to do to finish your assignment. The best way to find out what is required is to explore the automated tests. In test-driven development, this is how you develop. You first write tests and then the functionality. It is a great practice! Please see the page.test file. Part 2: Lines eight to ten show that the test expects the three Tasks to exist in the document, that is, to be displayed on the page. Let's fix that! Slide 12 ----------- Part 1: Please open the file page.tsx Slide 13 ----------- Part 1: This time, we will hard code the three tasks to the page as a list. Please make the changes and save the file. Part 2: When you save your file, you can see that both tests are now complete! We are almost done. We need to submit our assignment to the classroom. We will do this in the next section.

Welcome to your first assignment! We will keep things simple! Your goal is to:

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

Your result should look as follows:

🛟 Help

To download your project, please follow the instructions in the Project Setup section.

The downloaded project is a NEXT.js application. Next is a framework for building web applications that comes with an opinionated project structure supporting routing, client and server rendering and others. We will explore the individual features of NEXT.js in this course as soon as we can.

To start, you need to know that NEXT.js uses file system-based routing, where each directory represents one segment of your route. In that directory, you need to have a page.tsx file, which takes care of rendering the web page. The router's root is stored in your project's src/app folder.

For example route http://localhost:3000/home/profile would render a page stored in your src/app/home/profile/page.tsx file.

Since we need to modify the root of our application, we need to modify the src/app/page.tsx file. Currently the file does not contain much:

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>
  );
}

There are the peculiar “styles.abc” statements in the page code. These statements represent CSS style imports from the CSS file. This technique is called CSS modules (read on!). The benefit of CSS modules are multiple, including that the names of classes are local and do not interfere with other components, eliminating conflicts, or that only the styles that the current content needs is sent to the client, reducing bandwidth and speeding up your website.

🧪 Tests

When you visit the application in the browser, welcome page will not display anything. So, how do you proceed? The easiest way to see what is expected from you in the assignment, is to run automated tests and to make sure they all pass. In a seperate terminal run the following command:

pnpm test

This will launch the automated unit tests checking for correctness of your solution. Unfortunately, all of your tests fail and you will see the following result:

Please try add “Get Things Done” between h1 tags in your src/app/page.tsx file and save the file.

<h1 className={styles.title}>Get Things Done</h1>

You should see that two things have happened:

The page in the browser automatically reloads with your modified content. This process is called “hot reloading” making your changes instantaneous.
Your tests have re-run and you should have now only 1 failing tests and 1 passing test!

🏁 Completing Assignment

When you open the src/app/page.test.tsx file, you see that we expect to see “Task 1”, “Task 2” and “Task 3” in the document. This should be understandable from the code below:

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();
});

Let us finalise the page and provide all three tasks in the unordered list. This is the final source of the src/app/page.tsx:

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>
  );
}

When you save your file, you can see that both tests now complete! 🎉🍕🧠🥹 We are almost done. We need to submit our assignment to the classroom.

Discuss with Others
Ask questions, share your thoughts, and discuss with other learners

Quiz: React and ReactDOM Submissions

Assignment 1.1: Welcome Messageby Tomas Trescak· Setup