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:
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:
- To help my fellow novices coders to complete this kind of task.
- Repeat the whole process to consolidate what I have learned so far. Review and re-organize my notes, code or comments, if necessary.
- 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!
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.
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...
...and my default browser will open this URL:
React logo should spin around. My app is running in development mode. To stop it, I can use
Ctrl + C shortcut.
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).
I prefer to delete both
src directories with all the files in them.
rm -r public src
-r option will remove content of directories recursively
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'
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:
- The Power Of JSX (2020-08-05, 14:40)
- 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.
So let's open VSCode from Terminal...
...and start coding:
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 email@example.com
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:
This section is about creating and importing Components. There are two very informative tutorials on Youtube about it, both created by Chandler Keyes:
- Building Our First Component (2020-03-27, 17:49)
- Functional Components vs Class Components (2020-04-08, 7:23)
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
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
Find field, enter
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
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:
Right now I am in a situation where
App.jsx is a parent component and imported
Fetched.jsx are child components. This is exactly what I wanted and I can see that in my browser:
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!