Making Axios API Calls 📞 to Yelp Fusion inside React.js

Steps to get you set up if you are importing (brunch & breakfast) data with Yelp Fusion API into your react.js web application.

Photo by Brooke Lark on Unsplash

Step One: get your authorization key 🔑 from here.

headers: {   Authorization: `Bearer ${process.env.REACT_APP_API_KEY}`}

Step Two: choose your end points 🔍.

axios.get(https://api.yelp.com/v3/businesses/search, {    headers: {        Authorization: `Bearer ${process.env.REACT_APP_API_KEY}`   },
})

Step Three: add in the required params 🍳.

axios.get(https://api.yelp.com/v3/businesses/search, {headers: {   Authorization: `Bearer ${process.env.REACT_APP_API_KEY}`},params: {
location: {locationSearched},
categories: 'breakfast_brunch',}})
axios.get(https://api.yelp.com/v3/businesses/search, {   headers: {     Authorization: `Bearer ${process.env.REACT_APP_API_KEY}`},   params: {
location: {locationSearched},
categories: 'breakfast_brunch',}.then((res) => { console.log(res)}).catch((err) => { console.log ('error')})

Step Four: the catch 🤦🏻‍♀️.

Image found here
axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://api.yelp.com/v3/businesses/search?location=${locationSearched}`, {  headers: {    Authorization: `Bearer ${process.env.REACT_APP_API_KEY}`},  params: {  categories: 'breakfast_brunch',}}).then((res) => {console.log(res)}).catch((err) => {console.log ('error')})

--

--

A front-end web dev. Writing in my second language (English) about my third (HTML), fourth (CSS) and fifth (Javascript).

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Chao

A front-end web dev. Writing in my second language (English) about my third (HTML), fourth (CSS) and fifth (Javascript).