A React Blog
Project Walk-Through
Introduction
My name is Donaldo, and this is a walk-through on one of my projects, a React Blog. I will be covering from the planning phase to implementing the application.
Planning
Basics
The project goals were simple:
- Create a single page app (no redirects)
- Fetched data from an API
- Used the data to display information on the page
- Have full CRUD operations
- Create clean reusable code.
This project MVP was creating a webpage that displayed blog posts to the user and allow the user to add a new post, edit a post, and delete a post. For features I had a filter posts by category. One last feature was to implement routing using React Router Dom.
Roadmap
Planning out the tasks that needed to be done, and setting deadlines for each major section was important in order to stay on track and completing the project on time. The roadmap was simple:
- Planning / Brainstorming — (1 Day)
- Create a backend mockup using JSON Server — (1 Day)
- Create the file structure — (< 10 Minutes)
- Fetching Data — (1 Day)
- Interactivity (Add, Edit, Delete Posts) — (2 Day)
- Styling (1/2 Day)
- Cleaning Up (1/2 Day)
Design — Data Flow
To practice and understood data flow in react, I created a mockup board of the hierarchy in my project.
Design — Visually
Though not a main criteria for this project, I still wanted to practice wire-framing and mocking up what I wanted to website to look like. This allowed me to know which elements I would need and the layout I wanted.
Coding
I started with using the create-react-app boilerplate, I then created my folder structure to keep things organized.
BlogContainer Component
Within my BlogContainer component, I imported the components alongside the hooks I would need. From there, I created two state variables and used destructuring to grab both the value and the function that would update the value.
From there I fetched the data from my backend and used a function to update the state variable: blogList.
First function was to render the individual BlogPost components. I do want to note that the filtering of posts was a feature and therefor added after MVP was done.
Starting with a null check to make sure I had the blog post array in state, I placed the filter component, passed the function that updates the filterType state as a prop. I then called the renderBlogElements function (which returns an array of BlogPost components) and display that array of elements.
The following functions should be descriptive enough by their name, but if not they are the functions which handle different types of requests to the JSON Server. I then use array methods like filter and map for updating state.
The last few lines of code in BlogContainer are the other routes for adding a new post, and editing one. I also took advantage of dynamic routes for the editing component.
EditPost Component
Since EditPost and NewPost are forms and very similar, I will go over one of them (EditPost). I begin with importing the hooks I needed; useHistory for pushing on the history stack, useParams as I would need the ID to fetch the post’s data, and the usual useState and useEffect.
I declared a state variable called formData which had the text as loading, this is where my blog post data would be once it was fetched as you can see in the useEffect callback function.
Since this was a form, I needed to make it controlled so the handleInputChange made sure as the user was typing in the input boxes (with the exception of the image input) my state would have the latest data.
Both handleSubmit and handleDelete functions called a function passed in as props (submitData and deletePost).
The last thing I needed to add was a function that would handle the image input and displaying a preview image. My instructors recommended an event that when the input box lost its focus, then it would call the function, onBlur. This way only once the user is done typing and clicks out of the input box, will the function try to validate the image. Speaking of which, this validation was simple which only needed the input box to have something in it. I am aware and should look into securing this and actually validating it’s an image, you can leave a comment if you have a good way to do so.
Debugging
Main Issue:
Making a delete request worked, but state didn’t change.
Details:
Once someone deleted a post, the request would go through and I could verify the database but it would still be in state until I refreshed. So I knew I was getting the right ID and deleting it correctly from the server, so my filter method was not working. The only condition I have is comparing IDs so I console logged both the blog.id and the ID (which was passed as an argument).
Both were numbers but the ID was a string and therefor not strictly equal to each other.
Solution:
In my EditPost component, I had to convert params.id to an integer and from there the state would filter out the post correctly.
Styling
As this wasn’t a major criteria, but I did want to make it presentable, I used bootstrap to style this project. I did get to learn more about the grid system and making sure things look nice both on desktop and mobile. This is how it finally ended.
Wrapping Up
This project has taught me a lot in React. From data flow, to props and state. It also shows the power of components and the reusability of them. I really enjoyed this project and react is now a useful tool on my belt. Here are the links to the website and the Github Repo. Thank you for reading!
