This project represents work from the 10th and 11th projects for the web-dev course. These projects involved converting my JS/CSS/HTML project page into a React page using the Create React App.
This adaptive page includes form validation, interactive popups, fade-in and fade-out animations, functional like and delete buttons, modular JavaScript, and Object Oriented JS design.
Project 11: Global state with React context providers and subscribers, state variables for form input control, and refs
Project 10: React markup and interface, JSX, functional components, state hooks
This page features a responsive design, editable content, multiple popup elements, editable form fields, and transition animations. Internally, the site is designed under BEM methodology.
- React
- NPM
- JS/JSX/HTML/CSS
- Git/GitHub
- Visual Studio Code
- Figma
This project was bootstrapped with Create React App.
- Destructured objects passed to ImagePopup component to make variable name more clear/easier to read
- Added dynamic alt attribute in ImagePopup
- Replaced ternary operator with && operator for picture title element
- Converted multiple promises (API calls in Main) into a single Promise.all()
- Fixed effect for API request to only run once upon mounting (passed empty array as second arg)