Sign in

Software engineer, Artist and Spiritual enthusiast!

This is the last part of this Blog mock-up project. Today we learn how to do redirects after we add a new blog and how to delete the blogs as well.

Start it up like this:

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

&

npm start or yarn start

So we start with redirecting. We will be using a hook called “useHistory.”

That allows us to go back and forth in history, and it also allows us to redirect people after submitting:

OK, first thing we need to do is import “useHistory” hook on the top of the page…


Today we talk about controlled inputs, forms and how to do a POST requests in our blog project!

OK, first things first, start up your JSON info like so:

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

&

npm start or yarn start

Let's hop over to the create.Js it should look like this:

Nothing useful in there yet, now we need to add a “form tag” to add all the information needed for the new blogs to be added by the user.

I'm going to paste it here, Then explain after:


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

and

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

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