The Journey to My Second Project

Another month, another project! This time, we strayed away from regular JavaScript and dove into React! And my REACTion to that was pure bliss! From the first introduction to components, I was hooked.

With React, we are creating components in which we can nest other components in like Russian dolls. We then can pass "props" from a parent to a child.

The type-A persona in me was so happy to be able to have a way to organize my code into sections and then to be able to reuse it multiple times. And lets not forget how much cleaner the code looks. Take the following example of creating a button the normal way:

const createButton = (name, id) => {
    const btn = document.createElement('button')
    btn.id = id
    btn.innerText = name
    return btn
}

Now, in React:

function Button({ id, text }) {
    return(
        <button id={ id }>{ text }</button>
    )
}

Simpler to read and understand the end result. Bonus, less to write out too. And don't get me started on the redundancy of creating an element and assigning attributes to lets say a form! I really loved the process of using React!

Now this time around, with the idea of having a hierarchy for which my components resided in, I felt I had a little more control in organizing my thoughts and ideas. With this new control, I decided to actually map out my brainstorming ideas. Which led me to...

An introduction to the world of mind mapping. Of course I have always brainstormed, but most of that never actually made it onto page. It was all in my head which I would say "I'll remember for later"... Yeah, I never remembered. So, as I initiated the thought process into my project this time around, I decided I should first sit down and download a mind mapping software. That turned out to be XMind. Once in, I started just writing away my ideas. And boy did this process help. It aided tremendously to visualize my idea and see how everything worked, separately and together. I loved seeing how my app hierarchy branched out and to see how each of my components worked together. It made figuring out where my state lived, where my requests to my API were being handled, and where my props needed to be passed down to. To also gave me a bit more confidence into exploring external APIs, which being the superhero fanatic that I am, I chose to use the Marvel API.

With the help of mind mapping, figuring out how to incorporate an external API was easier. I was able to pinpoint where I needed to pull requests and how to integrate it into my own RESTful API.

From this map, I was able to start up a mock editor and just play around and see what worked and what didn't. I troubleshooted how to work with an external API, how my components worked with each other, and how I wanted the general style to look.

Once I felt ready with my ideas and had a clearer understanding of how the whole thing was put together, I opened up my command line and...

npx create-react-app