Portfolio Manager Build Out


Not CompletedPortfolio Manager Feature Overview

This is gonna be a really fun section to go through.

Not CompletedBuilding a Secure Class Component for the Portfolio Manager Page

Now that we have a good idea on the features we're gonna build out, let's actually get into the code.

Not CompletedPortfolio Manager Grid Layout Implementation

With our PortfolioManager component in place, in this guide, we're gonna build out the two-column grid that we can see right here in the prototype application.

Not CompletedPopulating the Portfolio Manager State with API Call Data

In this guide, we're gonna walk through how we can pull in our portfolio items and then we will eventually add them into the sidebar.

Not CompletedBuilding the Portfolio Sidebar List Component

Now that we have all of our data residing inside of our portfolio managers state, what we need to do is create a component.

Not CompletedFinalizing Portfolio Manager Sidebar List Styles

Now that we're pulling in all the relevant data let's wrap this up and add some styling.

Not CompletedCreating the Portfolio Form and Calling it from the Parent Component

In order to build out our portfolio manager form, we're gonna have to perform a number of steps.

Not CompletedBuilding the Initial Portfolio Form Elements

In this guide, we're gonna start building out our portfolio form component, and we're gonna take a very staged approach to it.

Not CompletedImplementing Portfolio Form Handlers

With our form in place now we can start building out the handlers that are gonna connect the form in each one of those input elements into state.

Not CompletedIntroduction to Building JavaScript FormData Objects

In this guide we're gonna talk about a very cool feature in JavaScript. This is not specific to React, this is available in all of JavaScript and it is called the FormData Object.

Not CompletedFixing Multiple Key Prop Warnings in React

Before we continue on in the course and building out our portfolio item form, I wanna take a step back and I wanna take care of these warnings.

Not CompletedCreating Portfolio Items from React Form

Okay, I think we are ready to start building out our form so that it actually can connect to the API, and create records in the database.

Not CompletedGuide to Select Dropdowns in React

Now that we know that we can create portfolio items using the API, let's now move into updating the form so that each one of these fields matches what the end-goal is.

Not CompletedGuide to the Textarea Tag in React

This might be the shortest guide of the entire course, and there are a couple reasons why I'm actually dedicating an entire guide to the textarea.

Not CompletedImplementing a Base State Value for a React Select Tag

Our application has a small bug in it. That bug is that even though our form begins with a default value for the category, when we hit save, no category is getting pushed up.

Not CompletedPopulating Parent Component Data in React

Now that we have each one of our data fields in our PortfolioForm configured and working properly, I think it's now time for us to connect the PortfolioForm with the Portfolio Manager so that when we create a new record, it will go and it'll actually update on the screen.

Not CompletedInstalling React Dropzone Component and Performing a Security Audit Fix

Our portfolio manager is coming along nicely and hopefully you're learning quite a bit about every stage of the React development lifecycle.

Not CompletedIntegrating React Dropzone Component into the Portfolio Form

Now that we have Dropzone installed on our system, we can start integrating it into the portfolio form component.

Not CompletedUploading Thumbnail Images to the API in React

This is gonna be a really fun guide because in this lesson we're gonna walk through and actually finish the image upload component.

Not CompletedAdding the Banner and Logo Image Uploaders

Welcome back and we are going to now start populating the behavior that we've implemented already with our image uploader to the other two types of images.

Unsupported Browser

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