A developer's journey through React

So, I'm very new to coding and the software developer's world and after starting a software immersion course at General Assembly this summer, I was feeling pretty confident that I could actually do this.

Our first project was simply JavaScript, HTML and CSS, and I created a Spider-Man trivia game that really made me feel confident about this new venture I was on.

Then, we started React, and suddenly my confidence waned.

It was Components, state, and props that went from here to there and everywhere and made me question whether I would ever get any of it. Fortunately, our instructors are super patient and super knowledgeable and I was able to begin creating something that I'm hopeful will turn into something pretty great.

In our coursework and homework we were spending a lot of time creating functions that allow a user to search through a list of items and pull them up in a browser through some sort of search function paired with links that bring you to various pages or return you to the home page. So, when assigned a project involving React App and an API, I immediately referred to one of my favorite comic book wiki resources, Comic Vine, and discovered their API for all things comic book related, and I knew exactly what I wanted to do.

Here, in my github repo, I explain the gist of my project plans, and the screenshot below explains my MVP and stretch goals for the project:

I am a comic book collector myself, so I appreciate what this API has to offer in terms of exhaustive information about comic books that I have in my collection or comics I would like to add to my collection, so I am hopeful that this app can eventually expand into an actual database resource for maintaining and adding to my own collection and thus anyone else's collection.

Now, I don't know anything about database creation and saving, so I have to start small. In our coursework, we worked on an app that searched a movie API and returned a list based on some filtering options, so I thought that should be the first start, get a search that works by searching a comic book title.

One thing I have gotten fairly good at is CSS design and while I'm no expert, I was able to design the search page relatively quickly with an input bar and search button. (see below)

Once that was in place, I added some navigation links to the header (see below):

The next step was to get the search functionality to work. I watched a video from Scrimba that helped me build the search function for my app. I learned later that the app was using Hooks (a way to use state without using class in React) and I felt pretty good about learning it because it actually helped me understand state a little bit better, and it made my code look a little dryer. So, I was able to get it to load 10 comics based on the search input (see below)

At this point, I wanted to be able to click on an issue and pull up an info page that included all of the information for that individual comic, and here is where the coding went south. I could not figure out how to use Link and Route from the react-router-dom, so I was stuck here with nowhere to go. I created the code to pull the information using props, but I could not seem to figure out how to pass props to this component from the search component when clicking on the specific comic book from the list (see below)

I tried onClick and adding comicBooks as a prop to the Search component under the div that held the API info, but I kept breaking the code, so that is my next step for completing this assignment.

Join me next time for an update on getting the second phase of my app to work!