React introduction

Overview

The intent of this class assignment is to give you some hands on experience with building React components, and using React concepts like props and state.
You will take an existing HTML web page and convert to React components. You do not need to create a gitlab project for this assignment. It is solely for your learning and will not be graded. That said, you should really, really (really) do this!

Setup

We will use this webpage as a reference.
- Look at and inspect the controls and layout in these files. You will be required to create a new react project and replicate (and even enhance) this page and its behaviour using React and JSX.
- You can view the page content via View Source or Inspect if that helps!
Install Node.js. We recommend the latest long term support version (v22.x at the moment). However, if another project on your system requires the development version of Node.js, that is fine. Managing multiple versions of Node.js on a single system is often painful.
The Node.js installer will ask if you want to install C/C++ compiler tools. Do this. Many Javascript modules have native code that should be compiled locally. This will also install Python 3.13, which is incompatible with psycopg2. Once the installation is complete, you should uninstall Python 3.13 (which will leave python 3.12 stil available)
- NOTE: If you have already been using 3.13, then just continue ‘as-is’
To test that Node.js is installed, go to the command line. Run node --version. You should see the version that you expect to be installed.
We’ll use vite to create the skeleton app to get started. On the command line in the folder where you keep your code, run
npx create-vite react-practice -- --template react. This creates a folder called react-practice and a ton of files.

NOTE:
This command works fine with Mac, Windows Terminal or Powershell. You may have problems with the old ‘Command Prompt’
- For Command Prompt try using npx create-vite and answer the questions
If you are prompted for a framework after this (e.g. Vanilla, React, Vue …), select React.
If you are prompted for a ‘variant’ (e.g. Javascript, Typescript, Tanscript, React Router …), select Javascript
Once done, cd into the react-practice directory, and run npm install

At this point, your directory structure should look something like this:

.  
├── .git/  
├── README.md
├── eslint.config.js
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
└── vite.config.js

If all goes well, go to the react-practice folder on the command line, and you should be able to run npm run dev. This will start a development server locally. Open a browser with this URL: http://localhost:5173
We need to make a few more changes to get the dev environment to autostart the web browser when you type npm run dev
Edit the file package.json, and change

    "dev": "vite",
to 
    "dev": "vite --open",

Also, to make sure the production build sets the correct home/ basepath location, change

    "build": "vite build",
to
    "build": "vite build --base=./ ",

Let’s test out modifying code locally and then showing up in the browser. Open up src/App.jsx and change the text Edit src/App.jsx and save to reload to something else. Switching back to your browser, you’ll see the change is updated (it should auto-reload, but this can be a little flakey).
Take a tour of the starter code for a bit. Don’t rush this step. Knowing all of these pieces is important.
You can use the file style.css for a start on styling

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 50px;
    padding-right: 50px;
  }


  .rounded{
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
  }

.normal {
    font-size: 1em;
}

.medium {
    font-size: 1.5em;
}

.col1 {
      flex-basis: 120px;
      margin-right:20px;
      margin-bottom:10px;
  }

.col2 {
    flex-basis: 180px;
    margin-right: 20px;
    margin-bottom:10px;
}

.col3 {
    flex-basis: 70px;
    margin-right: 10px;
    margin-bottom:10px;
}

.col4 {
    flex-basis: 180px;
    margin-right: 10px;
    margin-bottom:10px;
}

Create files in src called Page.jsx and Headings.jsx. Page.jsx will be be the container for your React components. Headings.jsx is one of those components. You will need more!
Add the following to Page.jsx

import { Component } from "react";
import Headings  from "./Headings.jsx";

class Page extends Component
{
    render()
    {
        return(
            <div>
                <Headings />

            </div>
        )
    }
}
export default Page;

Add the following to Headings.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import {Component} from 'react';

class Headings extends Component
{
    render()
    {
        return(
        <div>
            <h2>Are you smarter than a xxth grader?</h2>
        </div>
        )
    }
} 

export default Headings;

In main.jsx, replace <App /> with <Page />. Add the statement import Page from './Page.jsx'; with the other imports are the top of the file. Save your changes – this will now result in React rendering your Page component.
- If the alignment doesn’t look quite right … this may due to some unfortunate styles in index.css … let’s fix that
  You should find the section
```
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
```
  We want to delete the display tag, so it looks like this:
```
body {
margin: 0;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
```
  Make that change, save, confirm the alignment changed, and then proceed to the next step.
Now look at the example page and replicate that behaviour in React! (And feel free to improve it). You will need to add more React components, and work out javascript usage and event/ state usage in React. Refer to the React tutorials (see the React project instructions) for additional guidance.
- Run the app useing npm run dev. The web page should open and you will see the heading display.
- Now change the title to be Are you smarter than a 5th grader? in your code. The page should automatically update.
Now add another Component Controls.jsx. Place the radio buttons in that component.
- You will need to replicate the behaviour of the sample page. Start with just making the selections work, and a simple event handler to print the selected button to the console. Use the browser debugger to confirm that it works.
- Modify Page.jsx to also render <Controls /> and observe the display (hopefully correctly!)

Full functionality

Populating the quotes

Create two sets of data (one for quotes, one for songs) General format would be:

const literary = [
        ["Please sir, may I have some more","Dickens"],
        ["Politicians are like diapers", "Twain Haha, Copilot didn't know!"],
        ["Any sufficiently advanced technology is indistinguishable from magic", "Arthur C. Clarke"],
        ["What fools these mortals be", "Shakespeare"],
        ...
            ];


const songs = [
            ["My names Johnny, and it might be a sin; but I'll take your bet, and you're gonna regret, 'cause I'm the best there's ever been", "Charlie Daniels Band, not Johnny Cash Copilot"],
        ["I'm taking a Greyhound, on the Hudson River line ...", "Billy Joel"],
        ["I can take myself dancing; And I can hold my own hand", "Miley Cyrus"],
        ...
]

Feel free to substitute your own data! Let’s see what you like.

Use the selection of the radio button (songs or literary) as a state variable.
Use the state variable to trigger your React code to load a new set of data and refresh the display

Once that is working, use another event (when a quotation item is selected in the listbox) to display the origin of the quote.
Again, replicate the behaviour of the sample