Previous part covering steps 1-5 is right here.
In this part I will:
- install React Developer Tools (as a browser extension and as a project dependency)
- import and initialize
- pass state as prop to child component
- create basic HTML form
- enter searching criteria into input fields
- submit entered data to child component's state
React DevTools extensions allows me to:
- watch child/parent components hierarchy
- monitor data flow through and between state and props
The basic idea behind it is well described in How to use the React Developer Tools tutorial by Flavio Copes. Recently I found an interactive tutorial containing fake ToDo app with React DevTools connected to it. In the next two subsections I'd like to describe two distinct ways of installing and using those tools.
The easiest and fastest way to start using those tools right away, is to install the extension in my browsers. Firefox Add-on can be downloaded from Mozilla Add-on website, same as Chrome Extension from Chrome Web Store.
In order to launch and use these tools, I need to run my app in development mode (I did it in step 2), then, in each of these two browsers, I can open (with my right mouse button) the context menu and choose “inspect”. Alternatively, I can choose in Firefox: Tools > Browser Tools > Web Developer Tools, or in Chrome: View > Developer > Inspect elements. I will work in Components tab.
This approach takes a few extra steps but gives me possibility to pull React DevTools beyond my browser window and keep it in separate GUI. It can be convenient, for example when I wanna keep Component and Console tabs visible simultaneously.
So instead of downloading Add-on or Extension, I can install react-devtools package in the root folder of my project:
yarn add -D react-devtools
-D option will install this package as a dev dependency
Then, I need to open
index.html file and add one line of code:
Next step is to add a script to
After restarting my development server with
Ctrl + C shortcut and
BROWSER=Any yarn start command, I reload my browser which is running at http://localhost:3000/. Then, I open a new tab in Terminal and run this command:
From now on, I can inspect and watch my components, state and props in Electron framework.
- useState & Basic Components Structure (published 2020-09-13, recording duration 25:03)
- Props, Destructuring, and Spreading (2020-09-20, 32:13)
The first two states that I want to initialize in
App component, deal with entering data into a form fields, which don't exist yet (I'll create it in
Inputs component) and with submitting entered data as prop to
Fetched component. My idea works like this:
Before I even hit
Search button, I want to keep
pizza/Berlin already in some state, let's call it
entering. If I change my mind and replace
entering state will change instantly, as I type.
- When I hit the
Searchbutton, data from
enteringstate will be passed into another state, I will name it
enteringstate will be emptied in this very moment:
There is a free and open source project called DevDocs, run and maintained by non-profit organization freeCodeCamp, and there is a pretty neat useState hook documentation: useState, Introducing Hooks, Using the State Hook,
submitting are variables in which I can keep entered and submitted values
setSubmitting are functions I can use to change values in the corresponding variables.
Now I need to make decisions in which component, data from which state is needed.
Inputs component I need
entering variable for obvious reasons, duh. I also need
setEntering function for instant changing of characters I'm entering (when replacing Berlin with Boston). And last but not least I need
setSubmitting function to grab entered values after
submit button is clicked.
I need to pass
submitting variable with submitted values to
Fetched component. Later I will use those values to fetch Yelp API.
So now, when I know what I want, I can do this:
In this section I was working with “imaginary” input fields and “fictitious” submit button. It was only a logic concept, if you will. In the next section I will build actual interface and will assign some events to it, to make state and props useful.
In this section I will scaffold basic form, containing (as I planned) two input fields and submit button. After that I will add some events, to make my form at least a little bit useful.
All I wanted to know about coding forms in React, I learned from those two tutorials: How to Build Basic Forms Using React Hooks (published 2020-08-17, 15 min read) by Chris Blakely and React Forms Tutorial: Access Input Values, Validate, Submit Forms (published 2020-11-10, 12 min read) by Dmitri Pavlutin. His whole blog (dmitripavlutin.com) is worth an every day reading!
To get started with form, I will code inside the
return statement this code:
In this step I will:
import three props (as I planned in step 7.2) from
Appparent component to
declare three event handlers:
enteringTownFxwill capture what I will enter in input fields,
submittingFxwill set new values in
onClickevents to submit entered data and pass in to
I mentioned Simo Edwin in section 4, here is another tutorial created by him: Build A Todo App With REACT | React Project For Beginners (published 2020-08-28, recording duration 1:33:52). Excerpt from 14:02 to 34:14 is exactly about what I wanna accomplish here.
as I type my searching criteria, each subsequent character entered into input field, must be added to
enteringstate, immediately after every keystroke
when I will click
Searchbutton, entered characters must be submitted to
So here is my code:
Now I can check in practice everything I prepared in steps 6, 7 and 8. First things first, I launch my app with
BROWSER=Any yarn start command and open http://localhost:3000/ URL:
Before I type anything, I wanna take a look at each state and prop I declared (right mouse button > context menu > inspect).
Now it is time to enter some searching criteria, so I type
food input field and
town input field. I do NOT click
Search button yet.
Right now I keep my just entered data in
entering state and also in
submitting prop, same as
submitting state, is still empty
And the result is this:
entering state got emptied and data from it was transfered into
entering prop got emptied too, I can see that in my browser: both input fields are empty again
Entered data finally arrived in
Now I can use this data to fetch API.
Complete repo from this blog entry is uploaded on my GitHub.
Next part covering steps 10-14 is right here.
Thanks for reading and stay tuned!