How to Fetch Data From API in ReactJS.
Tags: react, axios, restapi, developer
Published: 2022-02-24 08:14:14

<p>While developing an application in ReactJs you might be asked to fetch some data from an API directly into the frontend and then process it.</p>
<p>Well just fetching some data from the API is quite easy and today we gonna learn that.</p>
<h3 id="lets-get-started">Let's get started</h3>
<h4 id="first-of-all-lets-create-a-new-react-app">First of all, let's create a new React app.</h4>
<ul>
<li>Go to your terminal and copy-paste the below code.</li>
</ul>
<div class="gist-block embed-wrapper" data-gist-show-loading="false" data-id="b48d33db8338b8d0c5edd1e61261e80c"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a href="https://gist.github.com/Ashumaurya/b48d33db8338b8d0c5edd1e61261e80c" class="embed-card">https://gist.github.com/Ashumaurya/b48d33db8338b8d0c5edd1e61261e80c</a></div><ul>
<li><p>Now open the folder in your favorite code editor. (Mine is VS code )</p>
</li>
<li><p>Let's use the <code>JSONPLACEHOLDER API</code>. (It's a dummy rest API for such purposes)</p>
</li>
</ul>
<div class="gist-block embed-wrapper" data-gist-show-loading="false" data-id="3f47d91de2b8f2358812af639e26aca9"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a href="https://gist.github.com/Ashumaurya/3f47d91de2b8f2358812af639e26aca9" class="embed-card">https://gist.github.com/Ashumaurya/3f47d91de2b8f2358812af639e26aca9</a></div><ul>
<li><p>Install the AXIOS library for fetching the data.</p>
<div class="gist-block embed-wrapper" data-gist-show-loading="false" data-id="fbd180c4c1d37df398e047ac05556f44"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a href="https://gist.github.com/Ashumaurya/fbd180c4c1d37df398e047ac05556f44" class="embed-card">https://gist.github.com/Ashumaurya/fbd180c4c1d37df398e047ac05556f44</a></div></li>
<li><p>After successfully installing the AXIOS let's import it into our app.js
  your app.js should look something like this </p>
</li>
</ul>
<div class="gist-block embed-wrapper" data-gist-show-loading="false" data-id="21196bd8f556ee69edebd72f196226d8"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a href="https://gist.github.com/Ashumaurya/21196bd8f556ee69edebd72f196226d8" class="embed-card">https://gist.github.com/Ashumaurya/21196bd8f556ee69edebd72f196226d8</a></div><ul>
<li><p>Now we are almost done. All we have how to use the Axios inbuilt method <code>Axios.get()</code> to fetch data from the above API.</p>
</li>
<li><p>let's get started by creating a function <code>fetchData</code> in our <code>App.js</code>.</p>
</li>
</ul>
<div class="gist-block embed-wrapper" data-gist-show-loading="false" data-id="75294e21d750a3fd2c9510c4a8120294"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a href="https://gist.github.com/Ashumaurya/75294e21d750a3fd2c9510c4a8120294" class="embed-card">https://gist.github.com/Ashumaurya/75294e21d750a3fd2c9510c4a8120294</a></div><ul>
<li><p>Now that we created the function to fetch data from the API, all we need is to call it in our <code>App.js</code> as soon as DOM renders.</p>
</li>
<li><p>We will use <strong>useEffect</strong> for fetching the data every time DOM renders.</p>
</li>
</ul>
<div class="gist-block embed-wrapper" data-gist-show-loading="false" data-id="e160199eab4a9c03e46ebf389ae1ed2a"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a href="https://gist.github.com/Ashumaurya/e160199eab4a9c03e46ebf389ae1ed2a" class="embed-card">https://gist.github.com/Ashumaurya/e160199eab4a9c03e46ebf389ae1ed2a</a></div><ul>
<li>If you followed the above steps clearly you would be getting an array of Objects in your developer's console.</li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1625400674380/OOCYOQdMGg.png" alt="You would be getting something like above in your developer's console" /></p>
<p>Voila!! you have fetched the data from a rest API directly into your React App. </p>
<p><strong>
Next is creating a TODO APP using React-18 with the above data </strong></p>
<p><strong> here is my code sandbox link for the above application </strong></p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codesandbox.io/embed/fetching-dummy-data-from-axios-pubbi?fontsize=14&amp;hidenavigation=1&amp;theme=dark">https://codesandbox.io/embed/fetching-dummy-data-from-axios-pubbi?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></div>
<h2 id="and-guys-do-subscribe-to-my-newsletter">And guys do subscribe to my newsletter</h2>
</br><p style="color:#808080;">This blog is posted using <a href="www.blogtiple.com">Blogtiple</a></p>