Easy guide to filling your life with (more) internet cats by making a random cat image generator with React and Cat API. If you prefer video format then I have already made a video on YT: Prerequisites: installed in your system (PC) Node.js (or any other code editor) installed VScode Getting the base right 🚩 : 1.Open CMD (terminal if working on Linux or Mac) 2.Type the following command replacing the angle brackets with its content to the name you want to give to your site npx create-react-app <your-app-name> 3. After the installation process type: cd <your-app-name> code . If [code . ] command doesn't work then open the folder of your react app manually using your own preferred code editor Working with the code 👩‍💻 : 1. Navigate to the App.js file 2. Delete everything inside the div with className = “App” 3. Create two new files (components) inside the src folder and name them ‘Header.js’ and ‘Cat.js’ 4.In the Header.js file add the following code This is the non-important part of the app we just define some basic things over here 5.In the Cat.js file add the following code Explanation: Here, we create a state variable called and set it to an empty string. Then we create a function called fetch_data in which we determine the logic to fetch the data from the Everything we do inside the fetch thing is just to fetch and then convert the response object to If there were any errors while fetching we show them else we just set the state variable to jsonRes[0].url because we get the response in a particular format like: url Cat API. JSON. url [{"breeds":[],"id":"lm","url":"https://cdn2.thecatapi.com/images/lm.jpg","width":560,"height":420}] It is an array of objects(rather an array of only one object) and we just gain access to its image url. Finally, we render the image and button. If there is no image url specified then there will be nothing and when we press the button, we run the fetch_data function and store the image url into state variable which we use as the src for the image. url Your main part is over now. A bit of styling would help to make it look at least a bit more presentable. 6. Add both the components into App.js Styling ✨ : 1. Navigate to App.css file 2. Add the following things ( Do not change the existing styling): Your random cat image generator is done! Type in the terminal and see the results. npm start If you want to see more such content from me, then do subscribe to my channel: https://www.youtube.com/channel/UCv2hTdClW8560n89OZ6cazA?view_as=subscriber Also published at https://medium.com/@shridharkamat10/how-to-make-a-random-cat-image-generator-with-react-and-cat-api-c52a093d8b42

Fetch

YouTube

Cats Taking Over: How to Make a Random Cat Image Generator With React and Cat API

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Building Cool IoT Lamp That Can Be Controlled via Google Assistant

100 Stories To Learn About Html5

12 Websites to Take Your CSS Skills From Beginner to Pro

21 Valuable HTML & CSS Code Snippets for Web Developers

20 Best Free HTML5, CSS3, Bootstrap Landing Page Templates in 2018

Building Cool IoT Lamp That Can Be Controlled via Google Assistant

100 Stories To Learn About Html5

12 Websites to Take Your CSS Skills From Beginner to Pro

21 Valuable HTML & CSS Code Snippets for Web Developers

20 Best Free HTML5, CSS3, Bootstrap Landing Page Templates in 2018

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps