Day 2 of #100daysofcode: An exercise in React Modularity

Life happens, so today will be a short post following a relatively short time period of practice today.

Today's Progress

Following yesterdays post, I used my time today to focus on learning more about how to be more modular in React and Javascript. You might recall that this project is the very first time I have been exposed to JS, let alone React... So my code was extremely ugly.

I spent some free time today watching bits and pieces of the React JS Crash Course by Traversy Media. I would be shocked if you haven't seen or heard of it by now, but the tutorial lives up to its reputation. One of the best tutorials for any language or framework I have ever seen.

I used what I learned to help shrink down and simplify the code in my project. I reduced the monstrous, main return statement of my App.js from around 70 lines to just under 10. I also was able to move all the state variables from App.js to the relevant components. I still feel like I have too many state variables, but we're still making progress on cleaning up.

Here's the results of my great Fall code-cleaning:

Tomorrow's Plans

I have more open time tomorrow, so barring any extraneous circumstances I will be making much more progress. Here's what is on the docket:

Re-review my components and see if any further simplification/modularization can be done
Re-review my states, see if any states can be cleverly merged (I suspect that they can)
Start digging on React-bootstrap and get to styling! Step 1 of this process will be finding a good way to split up the information into at least 2 columns

Recommendations?

As usual, I want to ask you for your recommendations. I see that a lot you are very skilled at React and JS and I'd love to hear from you! If you have any suggested readings, tutorials, ideas for my project or journey, I'd love to hear about it!