Building a Blog in React


Not CompletedOverview of the Blog Features

Our application is close to being completed. Now that you are familiar with how to implement the full set of CRUD functionality in your application, we're going to move on to the last main feature of our application which is our blog.

Not CompletedConverting the Functional Blog Component into a Class Component

In this guide, we're gonna walk through building out the initial architecture.

Not CompletedCalling the Blog API and Storing the Data in State

Now that we have our class component in place, we're ready to actually call the blog API and then return our data.

Not CompletedRendering Blog Records to the Screen

Now that we have our blog items in our local component state, we can work with 'em and we can render them on the screen.

Not CompletedCreating a Dedicated Blog Item Component

So, now that we're rendering our titles on the screen, in this guide we're gonna create a dedicated item, a dedicated blog item component and it's gonna start off pretty basic.

Not CompletedBuilding the Initial Blog Detail Component

In this guide we're gonna build out the blog detail component and we're gonna connect it both with the routing engine and also with our blog index page.

Not CompletedCalling a Single Blog Item from the API in React

In this guide, we are gonna start building out our blog detail component, and I'm actually filming this on the road from the DeveloperWeek Conference in the San Francisco area, so that's why I'm filming this from a hotel room.

Not CompletedRendering the Blog Details to the Screen

So now that we know that we can properly call the API, and we can get a single blog item back, now let's render it on the screen.

Not CompletedApplying Styles to the Blog Detail Component

Now that we're rendering all of the content we want for right now onto the page, let's spend a little bit of time making this look better.

Not CompletedApplying Styles to the Blog Index Component

Now that we have our basic styles set up, in this guide we're gonna populate those to our blog index view page.

Not CompletedBuilding a JavaScript Event Listener for Scroll Events

These next few guides are going to be very exciting and at the same time very challenging. The topic that we're gonna cover which is how to build a infinite scrolling feature in your application, is not a trivial feature.

Not CompletedDeep Dive: innerHeight, scrollTop, and offsetHeight

In the last guide, we walked through the window object in the browser and also how to add a onscroll event listener to be able to track and see whenever a user is scrolling inside of our application.

Not CompletedGetting the Count of Total Records on the Server and Updating the Component State

Now that we can work with scroll events and we know the dimensions of the document and of the window size and where the user is scrolling, what we can do is connect that with the ability to go and retrieve more blog records.

Not CompletedImplementing an Animated Data Loading Icon in React

The next step in our infinite scroll feature build is to build in the ability to have a little loader.

Not CompletedBuilding the Full Infinite Scroll Functionality in React

This is gonna be a really fun guide, I know that we've taken a number of lectures to get up here and you've written quite a bit of code and in this guide, all of your work is going to come to fruition.

Not CompletedRefactoring the Infinite Scroll Feature to Fix Memory Leak

In this guide we are going to take care of a subtle, but important bug with our infinite scroll feature.

Not CompletedInstalling the React Modal Library

This is gonna be a relatively short guide and we're not gonna write a lot of code. Instead, we are going to plan out the next feature we're gonna build, which is the blog modal.

Not CompletedRendering the React Modal in the Blog Component

In this guide, we are going to call our new modal and we're gonna create a component dedicated to just managing the blog modal. I'm also recording this set of guides from the Bottega offices in Lehi, Utah, so let's get started.

Not CompletedTriggering the React Modal to Open with a Link Click

So, in the last guide, we were able to get our modal working and to have it automatically show up whenever the blog loads, but obviously, that is not our long-term goal.

Not CompletedHow to Close the React Modal

Now that we have the ability to open the Modal by simply clicking on it, we now need the ability to close it.

Unsupported Browser

devCamp does not support ancient browsers.
Install a modern version for best experience.