Week 2: Introduction to React
Week 2 Assignment

Week 2 Assignment

Overview

In this assignment, you will create a new Next.js project. You will create a new page for week-2 and a React component. You will also edit the root page of the project.

The Next.js project that you create here will be used for all of the assignments in this course. You will add new weekly folders to the project for each assignment.

Part 1: Create a New Next.js Project

Follow the Guide: Creating a New Next.js Project to create a new Next.js project. The project name and GitHub repository name must be cprg306-assignments.

️🚫

Failure to name the project and repository correctly will result in a 0 for all assignments.

Part 2: Create a New Page for week-2, a React Component, and Edit the Root Page

Create week-2 Page

In the project app folder, create a new folder called week-2.

In the week-2 folder, create a new file called page.js.

In the week-2/page.js file, enter the following code to display a heading:

export default function Page() {
  return (
    <main>
      <h1>Shopping List</h1>
    </main>
  );
}

Try out the new page! In the browser, navigate to http://localhost:3000/week-2. You should see the heading displayed. Don't worry about the styling for now.

Create StudentInfo Component

In the week-2 folder, create a file called student-info.js.

In the student-info.js file, code a React component called StudentInfo that renders (displays) the following information:

  • Your name
  • A link to your GitHub repository
️💡

You should use Link component from Next.js to link to your GitHub repository. Do not use the HTML anchor tag directly.

The component should be exported as the default export.

Render StudentInfo in week-2 Page

In the week-2/page.js file, import the StudentInfo component you created in the previous step.

Render (display) the StudentInfo component below the heading tag.

After every change, you should view the page in the browser to make sure it is working as expected. You should see the heading and your name and GitHub link displayed.

Edit Root Page

The root page is the page that is displayed when you navigate to http://localhost:3000/. It is the page.js file in the project /app folder.

Edit the root page and remove all of the code. You will replace it with new code.

The root page should contain the following:

  • The heading: CPRG 306: Web Development 2 - Assignments
  • A link to the week-2 page you created above

Additional information

The Guide: Coding Workflow may help you with the coding workflow.

There is no requirement to deploy the application, but you may do so if you wish. See Guide: Deploying a Next.js Application for instructions.

Example Output

Root page: https://cprg306-assignments.vercel.app (opens in a new tab)

Week 2 page: https://cprg306-assignments.vercel.app/week-2 (opens in a new tab)

Part 3: Assignment Submission

The instructor will be able to find your assignment in your GitHub repository. Make sure you have committed and pushed your changes to GitHub before the assignment deadline.

Ensure the following:

  • You have completed the previous assignment and that the instructor has your GitHub username.
  • The GitHub repository is public and named exactly cprg306-assignments.
  • The weekly folder is named exactly week-2 (lowercase) and contains the page.js file.

Check your GitHub account to see if your assignment has been correctly pushed.

Introduction to ReactWeek 3: Components and Props