JavaScript: Build a React app:

0 comments

Please Build a React app:

Display a few of the articles in a list for some of the readers of the website to reference. The website is: com/files/barstool.json”>https://www.jalirani.com/files/barstool.json

Grab this remote article data via an 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

    Don’t worry about adding CSS, fonts, etc. Just focus on displaying the five items for each article listed above.

    Example: You Can Actually See The Moment This Guy In The Front Row Remembered It Was Baylor -8.5 Range 1 day ago 18

    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-axi
  • About the Author

    Follow me


    {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}