Converting JavaScript to ReactJS

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:

1. Open in your preferred editing environment.
2. Add a jsx folder.
3. Cut/paste your js files from the js folder to the jsx folder. Give them an extension of .jsx
4. Ensure your editing environment has updated based on the new folder and files.
5. Start the transpile script and http-server (or preferred method of hosting).
6. The code will transpile and work in the browser.

CHANGE CODE INCREMENTALLY

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.

Criteria

Please consult the rubric below to understand how we will grade. To paraphrase the rubric, beyond the website working as intended, the .jsx files should not:

• have any reference to “document.getElementById()” except on the very last line when you call ReactDOM.render(…)
• have any calls to document.createElement(…)
• work with HTML DOM elements as variables (e.g., rowDiv, exerciseColDiv)
• have any functions outside of class Timer. Those will be added to or turned into React Components as mentioned above.
• have any class methods work with DOM (except in render(), as that is necessary)
• not have this.propsVarName and this.stateVarName. Instead, use this.props.varName and this.state.varName

In addition, both class Timer and class ExerciseProgress should not need any parameters in their functions, beyond:

• the constructor (in class Timer)
• formatToString() (in class Timer and ExerciseProgress)

Rubric