Weekly Assignment Instructions

Overview

This assignment will provide an introduction to React and the concept of JSX, components, and properties (props)!

Learning Outcomes

By the end of this assignment, you should be able to:

• Download and start this program
• Update the greetings.jsx component to use the "prop" passed in
• Create a new component from scratch

Instructions

1. Read the following materials:

   • State of JS This is an annual survey which focuses on the State of JavaScript. While many programming languages are rapidly changing and introducing new libraries/frameworks (code others have written) all the time, JS is relatively unique in that this language is widely used for full-stack web application development and has several (especially) frameworks which are super popular. While the entire survey is worth a look the "Libraries -> Front-End Frameworks" is where React.JS lives and the reason why we will be focusing on this particular framework in this class!

   • Quick Start This is the official "Get Started" page for React. Read through the "Quick Start" and "thinking in React" menu items to get an overview of what React is and how it is meant to work.

2. Complete the following tasks:

   • On your Linux Mint machine Download and install both node and git

   • Clone this repository to your Linux Mint development machine and start the project

   • Please update the greetings.jsx component to use the "name" property

   • Please add a new component which has a single button which when pressed creates an alert "Hello World!" Be sure to reference this button in your App.jsx.

3. Please commit your code to a public GitHub repository

   • Once you have completed all tasks in your code please commit your updated code to a public repository in your account on GitHub!

   • Once you have a public repository link submit that link to the week one assignment in Brightspace!

below is from the original project creation.

React + Vite (from project creation)

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh