Arizona Western College Converting JavaScript to ReactJS Computer Programming Task

Purpose

The purpose of this assignment is to convert JavaScript to ReactJS so that our websites remain interactive and fulfill Usability/Design Principles, but more elegantly. This works toward our course objective of “implement a website using HTML, Bootstrap, and ReactJS.”

Task

Summary:

Overall, you are converting the provided starter code from a JS implementation to a ReactJS implementation. While doing so, you are maintaining the functionality of the website.

You will notice the code get shorter; after combining the lines between my two js files, and combining the lines between my two jsx files, I got about an overall ~31% decrease of lines. You will notice the code get easier to read as well!

To Get Started:

Create a copy of the starter code. (statercode given hw8js.zip)

In that copy, do the following:

Open in your preferred editing environment.

Add a jsx folder.

1. Cut/paste your js files from the js folder to the jsx folder. Give them an extension of .jsx
2. Ensure your editing environment has updated based on the new folder and files.
3. Start the transpile script and http-server (or preferred method of hosting).
4. The code will transpile and work in the browser.
5. Change Code Incrementally
6. You only need to update the two .jsx files. Change things in the code incrementally. What I mean by this is change one “code group” at a time or change one function at a time. I have grouped relevant code together, separating the groups by spaces. Test after each incremental change that you make to make sure your code still works.

If you try and change everything at once, the assignment will take way longer than it should.

I suggest starting with the bottom and working your way up to the top of the code. Remember that classes will need to:

extend React.Component

contain props, and possibly state 

FYI: I have kept the structure the same. In other words:

the name and overall functionality of the methods in class Timer and class ExerciseProgress should remain the same. Note the code will still need tweaks.

function fillColWithTimer() is intended to be the render() method inside of class Timer.

function fillColWithProgress() is intended to be the render() method inside of class Exercise Progress.

The functions outside of the classes can easily turn into React Components with a render() method. Specifically, I am speaking to function fillRow() in both files.

  Installing the Iowa Agda Library (IAL)You clone the repo here from github:https://github.com/cedille/ial