In the context of frontend web development, a functional component is a fundamental building block in many modern JavaScript frameworks and libraries. It is a type of component used in frameworks like React and Vue.js, and it can also refer to a similar concept in other programming paradigms, like functional programming.

In the context of React (which is one of the most popular JavaScript libraries that we are dealing), a functional component is a JavaScript function that returns JSX (JavaScript XML) to define the structure and appearance of a user interface element.

You could choose to use either class or functional components in rendering your JSX. For this particular example, we have already demonstrated the “class” example using React Native. See this article

In this tutorial, we are going to fetch data from an endpoint and display the results on our page using, of course, functional components as well as bootstrap for styling.

We are going to be fetching data from this endpoint https://catfact.ninja/breeds . It’s a GET Request and requires no access token or authorization.

The first thing we want to do is create a new react project and add our code. In our App.js or App.tsx, whichever one applies to you, we’re going to add the following:

import { useState, useEffect } from 'react';

const App = () => {
return(
<div>

</div>
}

export default App
Next, we want to have a function that fetches data from the given endpoint. We will create a function and call it fetchItems().

Let us fetch data from the endpoint in React JS.

const fetchItem = () => {
requestAnimationFrame(() =>
fetch(`https://catfact.ninja/breeds`, {
method: 'GET',
})
.then(response => response.json())
.then(responseJson => {
setData(responseJson.data)
console.warn(responseJson.data);
})
.catch(error => {
{
alert(error)
}
}),
);
}
Next, we need to show this data to see that at least we’re getting a response.
Read more https://codeflarelimited.com/blog/fetch-data-from-an-api-in-react-using-functional-components/

wow going hard.

kemi72:
In the context of frontend web development, a functional component is a fundamental building block in many modern JavaScript frameworks and libraries. It is a type of component used in frameworks like React and Vue.js, and it can also refer to a similar concept in other programming paradigms, like functional programming.

In the context of React (which is one of the most popular JavaScript libraries that we are dealing), a functional component is a JavaScript function that returns JSX (JavaScript XML) to define the structure and appearance of a user interface element.

You could choose to use either class or functional components in rendering your JSX. For this particular example, we have already demonstrated the “class” example using React Native. See this article

In this tutorial, we are going to fetch data from an endpoint and display the results on our page using, of course, functional components as well as bootstrap for styling.

We are going to be fetching data from this endpoint https://catfact.ninja/breeds . It’s a GET Request and requires no access token or authorization.

The first thing we want to do is create a new react project and add our code. In our App.js or App.tsx, whichever one applies to you, we’re going to add the following:

import { useState, useEffect } from 'react';

const App = () => {
return(
<div>

</div>
}

export default App
Next, we want to have a function that fetches data from the given endpoint. We will create a function and call it fetchItems().

Let us fetch data from the endpoint in React JS.

const fetchItem = () => {
requestAnimationFrame(() =>
fetch(`https://catfact.ninja/breeds`, {
method: 'GET',
})
.then(response => response.json())
.then(responseJson => {
setData(responseJson.data)
console.warn(responseJson.data);
})
.catch(error => {
{
alert(error)
}
}),
);
}
Next, we need to show this data to see that at least we’re getting a response.
Read more https://codeflarelimited.com/blog/fetch-data-from-an-api-in-react-using-functional-components/

When using the useEffect() hook, always tell people about the cleanup function. It's a very good practise to unsubscribe from events when they finish running.

I no too sabi sha... but I think it's really important.

React-query or RTK-query is better when fetching data from API endpoint

niel63:


When using the useEffect() hook, always tell people about the cleanup function. It's a very good practise to unsubscribe from events when they finish running.

I no too sabi sha... but I think it's really important.

Yeah valid point.

john1101:
wow going hard.

Yeah. No time.

kemi72:
In the context of frontend web development, a functional component is a fundamental building block in many modern JavaScript frameworks and libraries. It is a type of component used in frameworks like React and Vue.js, and it can also refer to a similar concept in other programming paradigms, like functional programming.

In the context of React (which is one of the most popular JavaScript libraries that we are dealing), a functional component is a JavaScript function that returns JSX (JavaScript XML) to define the structure and appearance of a user interface element.

You could choose to use either class or functional components in rendering your JSX. For this particular example, we have already demonstrated the “class” example using React Native. See this article

In this tutorial, we are going to fetch data from an endpoint and display the results on our page using, of course, functional components as well as bootstrap for styling.

We are going to be fetching data from this endpoint https://catfact.ninja/breeds . It’s a GET Request and requires no access token or authorization.

The first thing we want to do is create a new react project and add our code. In our App.js or App.tsx, whichever one applies to you, we’re going to add the following:

import { useState, useEffect } from 'react';

const App = () => {
return(
<div>

</div>
}

export default App
Next, we want to have a function that fetches data from the given endpoint. We will create a function and call it fetchItems().

Let us fetch data from the endpoint in React JS.

const fetchItem = () => {
requestAnimationFrame(() =>
fetch(`https://catfact.ninja/breeds`, {
method: 'GET',
})
.then(response => response.json())
.then(responseJson => {
setData(responseJson.data)
console.warn(responseJson.data);
})
.catch(error => {
{
alert(error)
}
}),
);
}
Next, we need to show this data to see that at least we’re getting a response.
Read more https://codeflarelimited.com/blog/fetch-data-from-an-api-in-react-using-functional-components/

You try!

Frontend:
React-query or RTK-query is better when fetching data from API endpoint

How?

Do the users even care about what was used to fetch?

Fronted guys worry too much..

LikeAking:


How?

Do the users even care about what was used to fetch?

Fronted guys worry too much..

Lol comrade be calming down lol