Building a Blog in React


Not CompletedAdding the Ability to Upload Featured Images to Blogs

Now that we've added the DropzoneComponent to our blog-form, we only have a few small changes that we need to make in order to update our entire form so that it sends up that media object, that image object, in a way the API can understand it, so let's get started on that.

Not CompletedFinalizing the Blog Form Styles

In this guide we're gonna add some style polish items to our blog modal and so specifically we're going to add a border here and give our text area a little bit more height.

Not CompletedCustomizing the Draft JS Toolbar

In this guide, we are going to start building out the ability to add images into a rich text editor.

Not CompletedConverting Image Files into Base64 Strings

Now that we have customized our icons and we have the structure in place for being able to encode our uploaded images to our text editor, now we are going to start that process.

Not CompletedPositioning Draft JS Icons

That last guide was pretty intense, and it was also pretty long. You know my methodology, I like to follow up the longer, more challenging guides and mix in some things that are hopefully a little bit easier on the cognitive learning side, just so you can relax a little bit.

Not CompletedAdding Click Handler to Render the BlogForm Component

Over the next few guides, we are going to implement the ability to edit our blog posts, and we're gonna do something that I think is pretty cool, which is we're gonna make it possible for us as admins to simply click on a blog post on the blog detail page in order to start editing it.

Not CompletedPassing the Blog Title and Status to the Form to Edit

Now that clicking on the title enables us to trigger the BlogForm, we can start populating it. We're gonna spend a few guides working through this process.

Not CompletedHow to Programmatically Add Content to Draft JS

Now that we're passing our title and our blog status to our form, we can now extend this and we can start working with our rich text editor.

Not CompletedEnabling Dynamic Rendering of the Featured Image in the Blog Form

Now that we have a Rich Text Editor working in Edit mode, it's time to move onto our images. And in the next few guides, we're gonna see how we can remove and work with our featured images with our blogs.

Not CompletedDeleting Featured Blog Images via API and Updating Parent Component State

We're getting pretty close to having this entire portfolio blog completed, and so in this guide, we're going to take what we've built for deleting the image, and we're actually going to take it live, so we can click on that Remove Image, or Remove File link, and it will work.

Not CompletedCommunicating with Blog Update API Endpoint

In this guide we're going to put together everything that we've learned so far and we're going to be able to apply it to build out this portfolio blog and this is gonna be pretty cool because what you are going to do is actually an extension of what we did with the portfolio manager.

Unsupported Browser

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