With this post, I’ve submitted my final project for Flatiron School’s Software Engineering program.
This final project is a culmination of all that I’ve learned until now, and what better way to do it than to present it all in a good looking application.
I’ve learned a lot during the time I spent building this project, especially about how React and Redux works to deliver a project that is modular and DRY.
The project structure when building a React/Redux application can be thought of the separation of concerns concept on steroids. In the end a website is just a bunch of HTML code, and we use JavaScript to dynamically write and render the necessary code to display what we as developers want our users to see. React is a nice library that facilitates writing the JavaScript spaghetti so we can focus on just creating a responsive UI for our project.
By putting our code into dedicated components and managing data manipulation within specific actions, we begin to drift away from the chaotic spaghetti code towards a more structured waffle, where each waffle cell has it’s own job and is only called upon when it’s needed.
A big part of my app is retrieving and displaying lists of shows for the user to browse through. Since this was something that was going to be called upon many times, I’ve encapsulated that into a React component.
My home page has two instances of this component, because they fetch and display two different search results. Because of this, I had to make sure that my AnimeList instances had their own state so that they can hold onto and keep track of the data that they’re displaying separately from each other.
To the left, you can see AnimeList’s state is simply null. So how did we retrieve all of that data? The answer is through component lifecycle methods.
When my component is mounted, it now needs to figure out what to render. Since this information is on my server, it will do this by fetching from an endpoint that is dynamically passed in thru the resource prop. The resulting data is then stored into the component’s state before updating the store.
Now we have an array of iterable data to work with. To get this showing properly, we need to create another array of html/jsx elements for us to actually render.
Finally, we render the that new array.
This completes the walk through of my AnimeList component. It is essentially JavaScript that writes a block of reusable, abstracted html code that we can use over and over again as necessary. It is only concerned about displaying the data it retrieves, and nothing more, and is a great example of how React components facilitate the concept of separation of concerns so we can build modular code and quickly create a functional UI .