DEV Community

loading...

Fetching Yelp API via Netlify Function with React.js [pt. 1]

Marcin Oleksiak
self-taught coding newbie, interested in frontend webdev
Updated on ・8 min read

Since I am a noob to frontend coding (and to programming in general), this entry will be more like a learning diary then tutorial. During the first wave of coronavirus I stayed at home and decided to give a try with HTML, CSS and JavaScript. For a guy like me, who spent 25+ years in print advertising, coding seemed to be a nice escape from daily routine. At the end of autumn, when I was still unemployed, I tried React. At first, I was disoriented: injecting HTML snippets into JavaScript??? What the heck! It appeared to be confusing, even insane, at least from novice perspective. And worse, it wasn't what I had learned so far. However, after a few weeks I even liked it.

After months of banging my head against the wall, I wanted to implement some real project, any nice-looking, responsive site about anything, which I can deploy, to prove my newly gained skills. But somehow I couldn't come up with any idea what kind of data I wanna present. In mid-February I accidentally discovered that Yelp.com has a public API which I can use for free. So I decided to go for it. I struggled with CORS a lot, almost quit the whole enterprise trying to figure out how to combine serverless function with fetching from useEffect hook. But here I am, with my modest demo:

https://fetching-yelp-api.netlify.app/

This so-called “tutorial” will be divided into a few parts, I wanna describe step-by-step, as precisely as I can, what I did. I promise to mention any programmer whose article or video was helpful and inspiring. I'll leave links to each lecture or screencast I used in order to move forward with my project. I will successively upload my code to GitHub. I haven't found any profound and comprehensive course on the web, showing from A to Z in a consistent manner, how to build similar app. I was moving in baby steps from one problem to another, reading and watching countless tutorials and pulling hair out of my head. Honestly, I'm surprised I made it this far.

There are three reasons why I want to describe my battle with this project:

  1. To help my fellow novices coders to complete this kind of task.
  2. Repeat the whole process to consolidate what I have learned so far. Review and re-organize my notes, code or comments, if necessary.
  3. I hope to gather some remarks and critique from seasoned programmers. Substantive comments made by people who know their job, and know what they're doing, are priceless.

So, without further ado, let's go!

1. My setup

I work on a 27-inch iMac, currently running macOS Catalina 10.15.7 with Homebrew package manager version 3.1.5 and Command Line Tools for Xcode 4.2.

For CLI, I use Apple Terminal with Zsh shell which is default in Catalina. To manage Zsh configuration I use Oh My Zsh framework with miloshadzic theme. To track changes in my code I use git, version 2.31.1.

I write my code in Visual Studio Code with bunch of extensions (OneDark-Pro, Auto Rename Tag, Bracket Pair Colorizer, indent-rainbow, File Utils, to name a few), I use One Dark Pro Color Theme and Material Icon Theme.

My runtime environment in Node.js, I stick to 15.14.0 version with npm version 7.7.6. A package manager of my choice is yarn, version 1.22.10.

I render my code in Firefox Developer Edition and Google Chrome Canary interchangeably.

2. Installing React.js boilerplate

To avoid complicated and time consuming configuration process (Webpack is my Achilles heel), I use Create React App starter kit, version 4.0.3. All I need to do is open Terminal in directory in which I wanna build my app and use this command:

yarn create react-app .

In my case (download speed up to 500Mbps) this installation takes approximately 1 minute. To make sure the installation was successful, I can launch my boilerplate site...

yarn start

...and my default browser will open this URL:

http://localhost:3000/

Alt Text

React logo should spin around. My app is running in development mode. To stop it, I can use Ctrl + C shortcut.

3. Organizing files and folders

3.1 Checking

To check my default files/folders structure, I can use this command:

tree -a -I 'node_modules|.git'

-a option will return all hidden files/folders,

-I option will exclude 'node_modules' and '.git' directories (a lot of stuff in there, I don't wanna see it).

Alt Text

3.2 Deleting

I prefer to delete both public and src directories with all the files in them.

rm -r public src

-r option will remove content of directories recursively

3.3 Creating

Due to the previous command, I can start from scratch:

mkdir public src && touch public/index.html src/App.jsx src/App.scss src/index.js

To make sure all files and folders are organized as needed, I check again:

tree -a -I 'node_modules|.git'

Alt Text

4. Writing basic React.js code

Before I start, I'd like to recommend two courses that have been very helpful to me:

The first one is Learn React For Beginners by Simo Edwin. This guy is great: funny and entertaining, easygoing. His YouTube channel is called Dev Ed. The following lessons are worth watching right away:

  1. React vs Vanilla Javascript (published 2020-07-31, recording duration: 19:49)
  2. The Power Of JSX (2020-08-05, 14:40)
  3. Setup From Scratch (2020-08-08, 41:59)

The second course is huge: Full Modern React (started on 2020-12-21, includes 32 videos, combined recording duration 3:13:58) by Shaun Pelling. He goes by the name of The Net Ninja. Check him out, tons of good stuff there!

I'd like to mention about very handy extension for VSCode called ES7 React/Redux/GraphQL/React-Native snippets, maintained by Damian Sznajder. Although I started to put the most used code snippets into Clippy.

Just one more remark: I will present all my code as screenshots. It'll give me possibility to highlight a newly typed code if I need to. For those who prefer copy and paste, everything is available on my GitHub.

4.1 Coding some HTML, JS and JSX snippets

So let's open VSCode from Terminal...

code .

...and start coding:

~/public/index.html
Alt Text

~/src/index.js
Alt Text

~/src/App.jsx
Alt Text

4.2 Coding some SCSS

I will deal with SCSS later, in separate blog entry. For here and now, just to make sure everything is working correctly, I need to apply some possibly simplest style to my boilerplate code. To transpile SCSS to CSS, I need to install node-sass package. Version 6.0.0 just came out a few days ago, but for a sake of any possible compatibility issues, I'll install previous version which is 5.0.0:

yarn add node-sass@5.0.0

~/src/App.scss

Alt Text

4.3 Starting app again

In order to launch React app on localhost server, I can use yarn start command which after activating React, opens default browser automatically, all in one step. I don't like that, because I prefer to open browser in separate step. Sometimes Firefox, another time Chrome. So I made up command below:

BROWSER=Any yarn start

Now I can go to browser of my choice and open http://localhost:3000/ URL again:

Alt Text

5. Using components

This section is about creating and importing Components. There are two very informative tutorials on Youtube about it, both created by Chandler Keyes:

  1. Building Our First Component (2020-03-27, 17:49)
  2. Functional Components vs Class Components (2020-04-08, 7:23)

5.1 Creating components

I will begin with creating a new directory called comps in which I will keep all my components. I need three: Nav.jsx for some navigation links, Inputs.jsx for entering and submitting searching criteria, and the last one will be Fetched.jsx for displaying data which I will fetch at some point. comps directory must be created inside of src folder. I can do all those things using one command:

mkdir src/comps && touch src/comps/Nav.jsx src/comps/Inputs.jsx src/comps/Fetched.jsx

5.2 Coding components

~/src/comps/Nav.jsx
Alt Text

Code for Inputs.jsx and Fetched.jsx components can be copied from Nav.jsx file and pasted in them, with using the appropriate names: VSCode has a usefull feature for this action, Edit > Replace (Cmd+Alt+F). All I need to do is enter Nav in Find field, enter Inputs in Replace field and hit Cmd+Enter. When I'm done with Inputs.jsx file, I can repeat all those actions inside Fetched.jsx file, replacing Nav with Fetched:

~/src/comps/Inputs.jsx
Alt Text

~/src/comps/Fetched.jsx
Alt Text

5.3 Importing components into App.jsx

All three components prepared in steps 5.1 and 5.2 are ready to be imported into App.jsx component. I can do it this way:

~/src/App.jsx
Alt Text

Right now I am in a situation where App.jsx is a parent component and imported Nav.jsx, Inputs.jsx and Fetched.jsx are child components. This is exactly what I wanted and I can see that in my browser:

http://localhost:3000/
Alt Text

5.4 Code on GitHub, what's next?

Complete repo from this blog entry is uploaded on my GitHub.

Next part covering steps 6-9 is right here.

Thanks for reading and stay tuned!

Discussion (0)

Forem Open with the Forem app