Web development using React
Overview
This assignment will use your learning from Web-1, but not your code.
We will introduce you to a new Web Development framework called React (or React.js or Reactjs). Web development with React uses a component and Class/ Object model vs. the markup/ tag model in HTML.
Setup
See setup instructions for React here.
Instructions
Once your React project is setup, up you will do the following
- Rewrite the webpage from Web-1 using React components
- Add a small logo of Ritchie, the RIT tiger at the top of the page, with a behaviour where clicking on Ritchie will raise an alert popup that say ‘Roar!'.
- Notice the line breaks at the end of each line in the verse. You need to replicate that as well.
React Re-write specifics
You have three main ‘sections’ of your Web-1 page (four when you add Ritchie).
Each section will be its own React .js file (you can name them what you like).
For example your components could be:
- Logo.js (Holds all the code for Ritchie)
- Headings.js (Holds all the code the Title, Subtitle)
- Controls.js (Holds the pull-down menu and the radio buttons)
- TextBoxes.js (Holds the text boxes and the more/less button)
Of course, you will still need your index.js file and other items from the setup.
All your styling should still be in a .css file and/ or using React styling conventions
All your javascript event handlers must now be part of the component .js files (not a separate .js file). You will need to raise and handle events ‘React-style’.
You will need to use React state management to ensure updates and refreshes across components. Match the background as closely as you can. Match centering and controls alignment as closely as you can.
Sample Page:
Your page should look similar to this
Grading:
- Correct tiger image and onclick: 5 pts
- Correct heading section: 5 pts
- Correct selection controls and event handling/ updates: 10 pts
- Correct text boxes and button behaviour: 10 pts
- All appropriate code refactored in React components and stylesheet: 10 pts