A method of calling an api of node.js from react.js - node.js

Question

After crawling a part of the university to node.js, we try to call an api of node.js to react.js.
In the node.js file, Title and url of the link were retrieved, and in the react.js file, List and ListItem were configured to receive api data.
The problem is that I don't know how to call tittle and url from react.js, which are data crawled in node.js.
Also, I ask because I don't know how to insert the called api into the list of react.js.
This is App.js :
import React from 'react';
import HeaderTemplate from './components/HeaderTemplate';
import MainTemplate from './components/MainTemplate';
import FooterTemplate from './components/FooterTemplate';
const App = () => {
return (
<div>
<HeaderTemplate/>
<MainTemplate/>
<FooterTemplate/>
</div>
);
};
export default App;
This is MainTemplate.js :
import React from 'react';
import styled from 'styled-components';
import NoticesList from './NoticesList';
const MainTemplate = () => {
const Main = {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
padding: '60px',
};
const Section01 = {
margin: '25px',
width: '55%',
height: '80vh',
backgroundColor: '#eeeeee',
fontSize: '45px',
textAlign: 'center',
};
const Section02 = {
margin: '25px',
width: '45%',
height: '80vh',
backgroundColor: '#ff0000',
fontSize: '45px',
textAlign: 'center',
};
return (
<div className="Main" style={Main}>
<div className="Section01" style={Section01}>
비교과
<NoticesList />
</div>
<div className="Section02" style={Section02}>
튜터링 및 학공
</div>
</div>
);
};
export default MainTemplate;
This is NoticesItem.js :
import React from 'react';
import styled from 'styled-components';
const NoticesItemBlock = styled.div`
display: flex;
.contents {
h6 {
margin: 15px;
a {
color: black;
}
}
}
& + & {
margin-top: 1.5rem;
}
`;
const NoticesItem = ({ article }) => {
const { title, url } = article;
return (
<NoticesItemBlock>
<div className="contents">
<h6>
<a href={url} target="_blank" rel="noopener noreferrer">
{title}
</a>
</h6>
</div>
</NoticesItemBlock>
);
};
export default NoticesItem;
This is NoticesList.js :
import React from 'react';
import styled from 'styled-components';
import NoticesItem from './NoticesItem';
const NoticesListBlock = styled.div`
box-sizing: border-box;
padding-bottom: 3rem;
width: 768px;
margin: 0 auto;
margin-top: 2rem;
`;
const sampleArticle = {
title: 'title',
url: 'https://google.com',
};
const NoticesList = () => {
return (
<NoticesListBlock>
<NoticesItem article={sampleArticle} />
<NoticesItem article={sampleArticle} />
<NoticesItem article={sampleArticle} />
<NoticesItem article={sampleArticle} />
</NoticesListBlock>
);
};
export default NoticesList;