So, with module 4, and the introduction of JavaScript in the curriculum, came this idea of the Single Page Application. This opened up a lot of doors in my ability to program, by giving me tools to create some Twitter-ish, Reddit-ish, and Giphy-ish type sites. Of course, these would all be using fetch() with outside API’s (hence the “-ish” at the end of each of them), but you can imagine the leap from module 3 (for me was a hiking location tracker) to module 4 (for me was a ToDo list tracker.)
React
Now, with the introduction of React and Redux (and a TON of ongoing practice) the doors open a little bit wider as far as my confidence in writing code. React helps break down the user interface into smaller and reusable components that can move data around amonst each other. The biggest application I’ve made in Vanilla JS is a simple ToDo Tracker, but I can imagine how challenging an app would be to maintain as it gets larger and as the page needs to change more frequently. With React, changing the state and UI can be synchronized with each other.
Consequently, with the addition of React comes the added complexity of keeping track of state within the different components. Similarly to above, I can imagine the struggle to write enough code to maintain state throughout different components, containers, and routes. I will give the disclaimer here, that because we learned Redux so closely to learning React, I don’t necessarily entirely know complications with React without having Redux as a solution. While looking to outside sources to gather a better understanding of Redux, I found this site and this picture from multiple searches. I’ve found it extremely helpful, and I think demonstrates a good visual of why Redux is so popular and in the curriculum to begin with.
Routing
This site and this also really helped me further my understanding of routing with react-router-dom and how it gives the user a seamless feel with the browser.
CSS
Lastly, I took another great step forward with my understanding of CSS by learning (a little) how to use react-bootstrap. It allowed me to import different functionality such as import { Button, FormGroup, FormControl, FormLabel } from 'react-bootstrap';. Though it was another new format of code to learn while I was working on my project, it’s a format that just makes sense to me. Importing the components of Bootstrap I need for each component is a very intuitive way to add styling to my page.
