This assignment will be worth 12% of your total grade. The goal of this project is to test more advanced React.js concepts. You must delete you node modules directory before submitting, if it is present in the submission, you will face a 10% deduction. DO NOT WORRY ABOUT CCS. JUST NEED JS portion

Overview This assignment will be worth 12% of your total grade. The goal of this project is to test more advanced React.js concepts. You must delete you node modules directory before submitting, if it is present in the submission, you will face a 10% deduction. Specifications For this assignment, you will need to understand components, props, JSX, state, and HTTP requests. Barstool Archive Erika Nardini from Barstool Sports wants to make a throwback site from late 2020/early 2021. Your goal is to display a few of the articles in a list for some of the readers of the website to reference. You will find the data here: https://www.jalirani.com/files/barstool.json Requirements Your job is grab this remote article data via a HTTP request and display these articles in a list. Each article needs to have: - An article title (this should be clickable and take the user to the article on the actual Barstool Sport's website) - The article thumbnail/image - The author - The author's avatar/image - The number of comments for the article Use the small thumbnail image (this must render nicely). A few of the articles have a gif for a thumbnail You Can Actually See The Moment This Guy In The Front Row Remembered It Was Baylor 8.5 Figure 1: Example list item Notes - Your website does not need to minic my screenshot, it just needs to have the data mentioned above. - All five items needed for each article is contained inside of the JSON objects. - "Wink Wink* For article thumbnail it is image.location + image.thumbnail.small (the url is broken up into two parts) - Test the data in your browser to ensure it works. i.e. copy and paste image.location + image.thumbnail.small and put it in the address bar in your browser to ensure you can see an image. - If the article thumbnail/image has a .gif instead of a .png/.jpg you can look at this article for guidance ttps://stackoverflow.com/questions/44371716/addanimated-gifs-to-react-web-apps or I will allow you to substitute it for an image of your choice since we don't cover how to display .gif's (even though it's easy, just try it). - Here is a simple example of a HTTP request in React: https://jasonwatmore.com/post/2020/07/17/react-axios-http-get-requestexamples - Don't worry about adding CSS, fonts, etc. Just focus on displaying the five items for each article listed above. Overview This assignment will be worth 12% of your total grade. The goal of this project is to test more advanced React.js concepts. You must delete you node modules directory before submitting, if it is present in the submission, you will face a 10% deduction. Specifications For this assignment, you will need to understand components, props, JSX, state, and HTTP requests. Barstool Archive Erika Nardini from Barstool Sports wants to make a throwback site from late 2020/early 2021. Your goal is to display a few of the articles in a list for some of the readers of the website to reference. You will find the data here: https://www.jalirani.com/files/barstool.json Requirements Your job is grab this remote article data via a HTTP request and display these articles in a list. Each article needs to have: - An article title (this should be clickable and take the user to the article on the actual Barstool Sport's website) - The article thumbnail/image - The author - The author's avatar/image - The number of comments for the article Use the small thumbnail image (this must render nicely). A few of the articles have a gif for a thumbnail You Can Actually See The Moment This Guy In The Front Row Remembered It Was Baylor 8.5 Figure 1: Example list item Notes - Your website does not need to minic my screenshot, it just needs to have the data mentioned above. - All five items needed for each article is contained inside of the JSON objects. - "Wink Wink* For article thumbnail it is image.location + image.thumbnail.small (the url is broken up into two parts) - Test the data in your browser to ensure it works. i.e. copy and paste image.location + image.thumbnail.small and put it in the address bar in your browser to ensure you can see an image. - If the article thumbnail/image has a .gif instead of a .png/.jpg you can look at this article for guidance ttps://stackoverflow.com/questions/44371716/addanimated-gifs-to-react-web-apps or I will allow you to substitute it for an image of your choice since we don't cover how to display .gif's (even though it's easy, just try it). - Here is a simple example of a HTTP request in React: https://jasonwatmore.com/post/2020/07/17/react-axios-http-get-requestexamples - Don't worry about adding CSS, fonts, etc. Just focus on displaying the five items for each article listed above