PresentationInteractive, narrated presentation of the section content.

ContentDetailed description of the section content.

It is time for our first interaction with Github Classroom. GitHub Classroom is a powerful tool designed to streamline the way coding assignments are distributed and reviewed in educational settings. It leverages GitHub, a popular version control and collaboration platform, to provide a space where instructors can easily create, distribute, and grade programming assignments. Each student receives their repository for an assignment, ensuring that their work is organised and isolated. This setup simplifies submission and grading processes and introduces students to practices used in real-world software development, like using Git for version control and collaborating through pull requests. GitHub Classroom is an excellent resource for enhancing learning and teaching experiences in computer science courses.

🚀 Accessing the Assignment

Make sure you have an existing Github account, connected to Github Classroom and that you are logged in. Accept your assignment by clicking on the following link https://classroom.github.com/a/. This will take you to the assignment acceptance page displayed below. Please click on “Accept this Assignment”

Figure 1: Accepting your assignment

Once you accept your assignment, you are greeted with the page below:

Figure 2: Accepted Assignment

You now have two options: using either the locally downloaded files or using the online editor.

Option 1: Online Editor

If you do not want to install applications and tools on your local computer, you are welcome to use Github Codepsaces, an online editor that allows you to work remotely on your files. To start the online editor, click on “Open in GitHub Codespaces”. After initialisation, it will open a new instance of your codespace.

Figure 3: Github Codespaces

Option 2: Local Project

To work on your assignment on your computer, you must download the files from the repository. Make sure that git is installed. First, mark the name of the repository that was created for you for this assignment. It is displayed in the Figure 2 under you're ready to co. In my case, the URL is https://github.com/WesternSydneyUniversity/introduction-to-react-tomitrescak. Please make sure you use your own personalised URL. 

If you have already closed the assignment welcome page, you can go to https://www.github.com and you can find the newly created repository in the list of your repositories.

To do that, please create a new folder where you will be storing all your assessments from this course, and then we will clone the files into the new folder. Thus, in your terminal (command line) type:

mkdir Course-FullStackDevelopment-GTD
cd Course-FullStackDevelopment-GTD
git clone <url of your repository>

Once you clone your files to a local folder, please open that folder in Visual Studio Code.

All the script files in the src/app folder, contain many errors (see red squiggles in Figure 1). The problem is that we did not install the packages that the application requires, including React. In the terminal of your editor (the bottom right pane) please type the following command pnpm install and hit enter. This will download all the packages to your project folder. If you want to explore which packages the application needs, please see package.json in the root folder.

Figure 1: Github Codespaces with Errors

 

No hints available.

Discuss with OthersAsk questions, share your thoughts, and discuss with other learners.

Loading discussion ...
Setup
React Fundamentals
Next.js
Advanced React
Databases
React Hooks
Authentication and Authorisation
APIs
CI/CD and DevOps
Testing React
Advanced Topics