Convert HTML page to React

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

  1. 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.
  2. Install Node.js. We recommend the latest long term support version (v18.12.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.
  3. 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.11, which is incompatible with psycopg2. Once the installation is complete, you should uninstall Python 3.11 (which will leave python 3.9 stil available)
    • NOTE: If you have already been using 3.11, then just continue ‘as-is’
  4. 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. Also run this command npm config set legacy-peer-deps true
  5. We’ll use the project create-react-app to get started. On the command line in the folder where you keep your code, run npx create-react-app react-practice. This creates a folder called react-practice and a ton of files.
    • There have been some late breaking changes in react, so go into your ‘react-practice’ directory, and run this additional command npm install ajv@latest ajv-keywords@latest

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

.  
├── .git/  
├── README.md  
├── react-practice/  
│   ├── .gitignore  
│   ├── README.md  
│   ├── node_modules/  
│   ├── package-lock.json  
│   ├── package.json  
│   ├── public/  
│   └── src/  
├── public/    
│   ├── index.html
  1. If all goes well, go to the react-practice folder on the command line, and you should be able to run npm start. This will start a development server locally, and it fires up a browser automatically at http://localhost:3000
  2. We need to make one small change to the starter code. In package.json, add the key-value pair homepage: “.” to the top-level settings. We’ll explain in the starter code walkthrough. So the code looks like this:
{
  "name": "react-practice",
  "version": "0.1.0",
  "homepage": ".",
  // lots of other stuff after this
}
  1. Let’s test out modifying code locally and then showing up in the browser. Open up src/App.js and change the text Edit src/App.js 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).
  2. Take a tour of the starter code for a bit. Don’t rush this step. Knowing all of these pieces is important.
  3. 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.
  4. Create files in src called Page.js and Headings.js. Page.js will be be the container for your React components. Headings.js is one of those components. You will need more!
  5. Add the following to Page.js
import { Component } from "react";
import Headings  from "./Headings";

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

            </div>
        )
    }
}
export default Page;
  1. Add the following to Headings.js
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;
  1. In index.js, replace <App /> with <Page />. Add the statement import Page from './Page'; with the other imports are the top of the file. Save your changes – this will now result in React rendering your Page component.
  2. 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.js to match sample.html
    • Now add another Component Controls.js. 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.js), 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.