Using React, build an image resizer component. You will have to install node.js
to implement this lab.
The image resizer needs three buttons, +, -, and H, for making a specified image larger, smaller, or toggling
its visibility.
Please place a title block to the right of the buttons. This will hold a caption for the image.
Use React with JSX to implement the resizer component, combining JavaScript and markup, as the implementation
medium. You may use the Babel library to translate the JSX. You don't need to do anything except
link to the Babel library.
Your goal is to have a component that can be placed on a webpage to display the image and resize it.
You will have to include a script block at the end of your HTML file to trigger the Babel translation.
For your reference, here is a link to the resizer demo shown in class. This, of course,
did not use React.
The React Demo from class is here: ReactDemo3.htm
Demos - posted 13 Feb 2019 - late afternoon
There was much discussion about whether you can put React code in the head section of a web page.
You can.
Demo1 - React code in head Demo2 - React code in Script file Demo3 - React component holding other components
The third demo shows how to include one component in another. I'll talk quickly about that
at the start of lecture #6.
Babel-Cli lets you compile JSX so you can include
the resulting JavaScript that doesn't need to be translated in the browser.
Please zip your Lab #5 folder and Submit Lab. Note: just zip, no rar, tar, ...