In this lesson we will go from basic JavaScript to React. We will use the Javascript to React tutorial as a starting point.

Access the lesson here: Intro to React

• Who is this for? Students.
• How much experience do students need? This lesson assumes a base knowledge of HTML, Javascript, and CSS.
• Prerequisites: None. This lesson will provide a working and deployable web app you can immediately extend for your teaching needs with GitHub Copilot to help.

A Codespace is a development environment that's hosted in the cloud that you can configure. The Codespaces Education benefit gives Global Campus teachers a free monthly allowance of GitHub Codespaces hours to use in GitHub Classroom. Learn more here about Using GitHub Codespaces with GitHub Classroom.

1. Click the Use this Template button
2. Select the repository owner (e.g. your GitHub account or organization)
3. Enter a unique name for your new repository
4. Click Create repository from template
5. Once repository created, click the Code button
6. Click Create Codespace on main button

• Avoid environment setup time for you.
• Runs in the cloud.
• Can be configured and customized.
• Integrates with your repositories on GitHub.

🎥 Watch the video tutorial to learn more about Codespaces

This lesson demonstrates a basic web application using the React framework and Parcel to build the application within Codespaces.

We've included the bare minimum file structure for a working application, so you have immediate ability to customize. Also included is a sample component (Header) to demonstrate how to incorporate components into your application.

The template uses Parcel because it's regarded one of the eaisest to use, with limited configuration. You can of course extend or replace this.

To run what's in this repository, you need to first start a Codespaces instance.

1. Navigate to the main page of the newly created repository.

2. Under the repository name, use the Code drop-down menu, and in the Codespaces tab, select "Create codespace on main".

   

3. Wait as GitHub initializes the Codespace.

   

4. When complete you will see your Codespace load with a terminal section at the bottom. Codespaces will install all the required extensions in your container, followed by executing npm install. Once the package installs are completed, Codesaces will execute npm start to start your web application running within your Codespace.

   When the web application has successfully started you will see a message in Termin that the server is running on port 1234 within your Codespace:

   

This template is intended to be fully customizable for your particular Web Development teaching needs. Here are three different challenge scenarios you are likely to want to do:

1. Add an extension
2. Update linter configuration

💡 Learn more here, docs.github.com/en/codespaces/customizing-your-codespace/personalizing-github-codespaces-for-your-account

VS Code extensions let you add functionality to your VS Code instance so that you can setup to meet your particular development workflow. In VS Code Marketplace you can browse the complete collection to find the exact language, linter, debuggers, and more that you need for your project.

Within this template we have preinstalled extensions for you to utilize within your Codespace. Here is how you can view and change which extensions your Codespaces environment starts with::

1. Open file .devcontainer/devcontainer.json and locate the following JSON element extensions

   "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "ms-vscode.azure-account",
        "ms-azuretools.vscode-azurestaticwebapps"
   ]

2. Add "oderwat.indent-rainbow" to the list of extensions. It should end up looking like the following:

   "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "ms-vscode.azure-account",
        "ms-azuretools.vscode-azurestaticwebapps",
        "oderwat.indent-rainbow"
   ]

The string added is the unique identifier of indent-rainbow, a popular extension to make indentation more readable. Adding "oderwat.indent-rainbow" identifier to the list lets Codespaces know that this extenion should be pre-installed upon startup.

To find the unique identifier of an extension:

• Navigate to the extension's web page, for example indent-rainbow
• Locate the Unique Identifier field under More info section on your right side.

A linter is a tool that helps improve quality and consistency of code. This project comes configured with ESLint.

To get you started we included some basic linter settings typically found in JavaScript, and React applications. Including extensions for Prettier (for code formatting rules), and web accessibility with eslint-plugin-jsx-a11y.

Let's now update the linter rules to check for prop types to be defined on all React components. To set this linter rule, open the .eslintrc file. Within the rules object add: "react/prop-types": "warn". Your ESLint rules should then be:

"rules": {
   "prettier/prettier": ["warn", { "endOfLine": "auto" }],
   "react/prop-types": "warn"
}

Note: possible values to set a rule to are "off", "warn" and "error". When set to "warn" student will ne notified of issue, but not required to resolve. Set to "error" will require a student to resolve that linter issue.

With that in place, all incoming properties to a component will need to be definied with the name and type or the student will see a warning. You can then add a title prop to Header and see your new rule in action:

To resolve the prop types wanring in this example, you would need to import PropTypes and then define the propTypes for Header, giving you:

import React from "react";
import PropTypes from "prop-types";

const Header = ({ title }) => {
  return <h1>Educator React Codespaces JS Template - {title}</h1>;
};

Header.propTypes = {
  title: PropTypes.string,
};

export default Header;

• GitHub Codespaces docs overview
• GitHub Codespaces docs quickstart
• GitHub Copilot docs
• Use dev containers locally with VS Code and Docker
• Using GitHub Codespaces with GitHub Classroom

Codespaces Browser App

If you are using Edge or Chrome you will see an option to install the Codespaces app when you launch your Codespace. The Codespaces app let's you launch your Codespace within the app so you can work outside of the browser. Look for the app icon and install pop-up to try it out.

Help us make this template repository better by letting us know and opening an issue!.