Sign in

Software engineer, Artist and Spiritual enthusiast!

This will be a short description of reusing our custom hook!

(since the next topic is so important I don't want to muddy it up with this information.)

we first start off by starting our JSON server

npx json-server — watch data/data.json — port 8000

That will run our JSON file, we also need to run npm start, if everything works out the data will be there.

So, Thus this far in this component (BlogDetail), we have found a way to get data from the “parmas” of the URL, using the useParams() hook, and use them to bring up each…

TODAY, we talk abour Router’s parameter and useEffect cleanup

Router Paramter:

So we can get parameters from a URL with the Route parameters,

localhost:3000/blogs/2 ←this guy

Its kinda like a variable which we can use later.

First, lets make BlogDetail in src folder, and then fill it with simple data like a console.log to make sure it connects. (allways do this forever and ever, once you figure it is connected then move on — ->)

Today we are talking about React Router a very important step in all this.

OK so lets get this going!

we first start off with installing “router dom”, just drop this into your terminal:

npm install react-router-dom

OK once that installs you go to the route component, Most likely the App.js

then you import this on top of your page:

import {BrowserRouter as Router, Route, Switch} from “react-router-dom”

Now we have to surround the whole application with a “Router” like so:

If you see on lines 8 and 18 we wrapped it around the whole component! …

we are going to talk about making a custom hook!

We are going to make the fetch code a bit reusable. To get things starting, you should have this running:

npx JSON-server — watch data/data.json — port 8000


npm start

Then start by creating a file in the src folder call it “useFetch.js.” We need to put the keyword “use” in front of the custom hook, or it won't work.

After you do that, it should look like this:

we are going to want to cut and paste the useEffect (all of it ) into the new useFetch() from…

We talk about how to implement a loading bar and handling fetch errors in React.

Loading Bar:

our “home” component should look like this at this point:

First up, we are going to add a piece of state for the loading text, like so:

we continue with fetching data from useEffect and JSON!

so we left off by running this :

You will need to run npm start (for localhost 3000 to run)

More importantly we need this to run:

npx JSON-server — watch data/data.json — port 8000

(if you copy and paste this, there should be two dashes in front of the watch and port, not just one dash, Medium autocorrects it.)

That starts up the JSON server for us.

Which watches this file:

Ok, so the first thing we need to get rid of is “blog” state in Home.js, …

today we continue with useEffect hook, dependencies with useEffect, and setting up the JSON server to fetch!

OK, to start, we should hop into the Home.js.

It should look like this, and we haven't changed anything since the last post:

lines 31–34 is all we are looking at anyways.

Just a refresher, we use the useEffect hook if we want to fire a function after every re-render(that occurs when entering a sight or when you update state.)

Butttt!!!!! Sometimes you don't always want to continuously fire the useEffect every time it changes in the state. So we can add a…

Today we talk about passing functions as props also stalk about the useEffect hook (basics).

we left off here :

BlogList is inheriting “blogs” from hooks in “Home.js,” and the “title” is what we want it to display as a header.

we commented on outlines 34–37 because the bottom BlogList was just for show/the last lesson. (keep it or delete doesn't matter)

now moving on!

Let's hop over to the BlogList component, and everything looks the same minus the handleDelete on line 3 and the button tag on line 15

We talk about props and how to make a reusable component.

Props are a way to pass data between two components. You can only “drill down,” though, which means you cant pass data upwards. (Hooks come to play in here to make your life easier but we will stick to the topic of props.)I will also show you how to implement props in your code.

OK, let us start with making a new file called “BlogList.js.”

Then, if you have react snippets, type “RAFCE” and press enter! (if you don't go to vscode, go to extensions and type in react snippet. should download the first one that comes up)

Then we…

today we talk about using state with hooks in react (also know as useState) and how to output lists in our blog.

Ok, so useState is a hook from React. It kind of like a place for your data to hang out, inside that specific component, and at that exact point in time.

The data can be an array of values, booleans, strings, objects, if it needs to be changed in our component we use “useState”.

In the old ways, If we wanted to display a variable we would do something like this:

We set a variable on line 4 and then output it in the return on line 11 in a p tag or paragraph tag. …

Jonathan Bleibdrey

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