Magic The Gathering Library Database (Phase 2 Project)

I have just completed my programming for the final Project of our Phase 2, the React Phase at Flatiron. This was quite a challenge for me, as most of my prior experience stems from C++11 or regular Javascript, so learning how to use react was New and taught me a great many things. One of the biggest hurdles I encountered was that I was using an internal Database API, called db.json, and that I needed to have a terminal open watching that Database in order to modify anything in it. That was probably my biggest hurdle and took me most of the week to realize that and how to fix it.

The second biggest challenge I faced was getting the components and data from my API to display on the page in an interactive way. I had, over my week of struggling, forgotten that I needed to create a state for some of my classes in order to properly store and maintain variables, and once I realized how to do that properly, I made one. Getting them to display, however, was another issue. In order to make a state display you need to write it out as:

this.state.<state name>

Whereas I just kept typing:

this.<state name>

That error caused quite a few mistakes for me, but once I figured it out I got them all fixed up.

Prior to this project, I had only ever fetched data from an external API for the purposes of display, but this project also had me learn the POST and DELETE abilities of fetch.

An example of each directly from my code are below:

fetch('http://localhost:4000/cards')
.then(resp => resp.json())
.catch(eventZ => console.error(eventZ))
.then((cardBase) => {
console.log(cardBase)
this.setState({
yourCards: cardBase
})
console.log(this.state.yourCards)
console.log('hi')
})
fetch(`http://localhost:4000/cards/${deleter.target.value}`, {
method: 'DELETE',
})
.then(res => res.text())
.then(res => console.log(res))

The rest of my coding time was just making sure that everything was interconnected with import and export, and to make it look pretty.

Overall, I am glad I learned React, but still prefer base Javascrip. I am looking forward to whatever it is we learn next!

Thank you for reading!

-TJ Hawes