UCF Programming Worksheet

hello, you can find everything you need to know in the attachments, pdf file has full instructions about this assignment.

program language is react.js

you can find a zip file attached containing the fake prototype file which you will need to modify for this assignment.

first you need to fresh install the libraries that are mentioned in the pdf file, then copy the src file in fake-protptype and paste and replace it into the new file that you just created with installing the libraries

you should modify three files, entry.js, entries.js and app.js to fit the assignment instructions, you can find these files on the src file in fake-prototype folder which is inside the zip file.

Assignment : React Front-End Site
Web Application Development
For this assignment, you are required to modify the fake-proptypes React project in our class repository
to make it work with data obtained from https://jsonplaceholder.typicode.com/. In it, you need to include
everything I need to simply run npm install and npm start to open your page in a browser once I clone the
repository to my system. Begin by using create-react-app, then install bootstrap, react-bootstrap, and axios
using npm so you have the freshest starting point. Your README.md file must include your name, the
assignment (i.e. Assignment 3), and data due.
You must meet these requirements:
1. In your repository, after using npm to install the above libraries, delete the src directory and copy the
src directory and all of its contents from the fake-proptypes project.
2. Modify this code so that the App.js file has the line to indicate that your program
will produce 3 entries. Note that I should be able to change this to any number between 1 and 10 and
it will work with that number of entries. Your modified Entries.js program will take the props (a single
number) from App.js and create an array of numbers for it (e.g. for 3, create [1, 2, 3], and for 8, create
[1, 2, 3, 4, 5, 6, 7, 8]). The map in the Container in Entries.js should loop over those numbers, passing
the number into Entry.js.
3. From here, you need to modify the program to work correctly by having useEffect code in the Entry.js
file access data from the placeholder site. In particular, you are to use the /users endpoint, with the
number passed into Entry.js indicating which entry from the site to use. Your Entry.js program should
display any data from the /users endpoint you wish, but at least one of the fields must be a nested
property (e.g. address.street or company.name). For the field I call animals, you may use a hardcoded
link to any image, e.g. https://via.placeholder.com/600/ 771796 or some other image of your choice.
4. You must use PropTypes to enforce strong types. When I run your code, I will open the console in
Chrome. There cannot be ANY warnings or errors when I run it!