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

Download the files sample.html, handlers.js, style.css from this location. These files are for mainly for 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.
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 -- --template react react-practice. This creates a folder called react-practice and a ton of files.
- 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.
Copy the file style.css from step 0 into the src folder. This will give you a starting point for styles. You will not need the handlers.js file, since your React files will include any javascript code.
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>I need to replicate the sample page headings...</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.
- The alignment doesn’t look quite right … this is 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 sample.html 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.
- Start by adding two headings in Headings.jsx to match sample.html
- Now add another Component Controls.jsx. Place the text, input box and button in that component. Use the classes from styles.css to help your layout.
  - Add an eventHandler for onClick to display the alert when the button is clicked.

Additional thoughts and hints

Look at the console output when you run npm start. Make sure you can eliminate all the warnings
- Warning: When you start using the CI, if you have any warnings, your build will fail!
You can use class to apply style, but sometimes you need to apply small style changes using the style attribute. React (JSX) has a special syntax for this, that is worth looking up!
Add a Counter as a new React component. Route the onClick from the button back to the parent (Page.jsx), and update the count in a State variable. Pass the value of the State variable to Counter so it can update the display. HINT: Modify the Controls click handler to use a callback to the Parent. The Parent will have to pass a callback method to Controls
- This will require usage of State, Events and Props.
As you continue to add components, you may not want to keep the index.css that the vite app provided. You can remove the import statement from main.jsx if you prefer to use your own styles