State, Props, and Star Wars

I have harped on this before but it is worth mentioning again - React is a library that allows for the rendering of small components. This is wonderful for applications that require a lot of changing data. A great organizational method for React is to piece each of these components in to their own file rather than lumping all code into one difficult to read file. This allows for easier manipulation of individual pieces. Some of those components require something called 'state'.

State is a bit of a confusing concept. What it basically boils down to is a time frame. If you're building an application that requires anything to be remembered or recalled over time than state needs to be set. In Node I did this with a package called Session that handled a lot of the logic for me. In React, which is still JavaScript, then I can use a method called setState. When state isn't being used I still want to pass properties down to that component so I use 'props' in my constructor and super. 

The components of this application are pretty quick to discern. There is the top component that is static, it does not change or take input, so I passed props down to it. The next box with the question 'What is your name?' has an area that is interactive. When a user types their name in that box and clicks the submit button their name is then displayed underneath the button. This requires state because the user's name has to be remembered and displayed after hitting submit. The bottom boxes are all collectively displaying data from an array so I used mapping (from earlier this week) to pass properties into the whole component and then also the unique data from each item into its respective card.

My biggest challenge was learning Bootstrap in a few hours to style this appropriately but now that I have I am super grateful! Bootstrap is a collection of pre-styled CSS that implements a grid-style to a page but makes it responsive very quickly. In other words, I can now quickly apply styling to an entire page without spending a bunch of extra time doing it by hand - as long as I follow the rules of Bootstrap's preset guide.