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


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 …


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…


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…


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…


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…


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…


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…


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…

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