Integrating back-end with Front-end in React

npm install axios
// or
yarn add axios

import axios from 'axios'

const api = axios.create({ baseURL: 'http://localhost:3000/api' })

api.get('/users', { params: { name: 'Srinivas' } })

api.post('/todos', { title: 'Learn Axios', completed: false })

api.get('/users')
	 .then(response => console.log(response.data))
	 .catch(error => console.error(error))

async function getUsers() { 
	try { 
		const response = await api.get('/users'); 
		console.log(response.data); 
	} catch (error) { 
		console.error(error); 
	}
}

The final step is to display or update the data in your front-end UI according to the response or error from the API requests. You can use various techniques and libraries to manage the data flow between your front-end components and your back-end API. For example, you can use React hooks such as useState and useEffect to store and update the data in your component state and render it in your UI. You can also use state management libraries such as Redux or MobX to store and update the data in a global state and connect it to your components. You can also use UI libraries such as Material UI or Bootstrap to style and layout your components.