Journal 47

July 1 - July 7

Through this week's lab and videos, React introduced the idea of building an application out of reusable components that each manage their own functionality. Each component can have its own state while also receiving data from a parent component through props. Learning the difference between state and props was one of the biggest concepts for me, and presented itself in various questions on the quiz, so I'm glad I looked deeper into the topics. State is used to manage data that changes within a component, while props are used to pass information from one component to another and remain immutable.

The lab really helped reinforce these concepts by walking us through the building of several React components that communicated with a Spring Boot backend. The most interesting part of the assignment was creating the new Settings component, because I finally got to apply some hands on work with what I learned in the demo videos. I liked that the component had to make decisions about what data to send to the backend. Instead of always sending every field, we only sent the customer's name if it had actually been changed and only sent a password if the user entered a new one. That helped me better understand how React state can be used to control exactly what information is sent in an API request. I wish I had more time to play around with the CSS and design because I really enjoyed doing that in the web development class, but I had to leave early this morning to head to Vegas, and really don't have time to be tinkering with it on vacation!

Another important topic this week was learning about React hooks. We used useState throughout the project to manage user input, and I learned that updating state causes React to automatically re-render the component with the new values. We also discussed useEffect, which is used to perform actions such as retrieving data after a component first renders. Although our new Settings component primarily relied on useState, other components such as the Order History page demonstrated how useEffect can be used to retrieve data from the backend when the page first loads. Learning when each hook should be used helped me understand the React component lifecycle much better.

One challenge this week was working through version differences between the software used in class and the current versions available through npm. I ran into several issues while setting up Tailwind CSS because newer versions use a different configuration than the one shown in the lab demo videos. Troubleshooting those differences taught me that software development often involves understanding version compatibility in addition to simply writing code. While it was frustrating at first, solving the problem gave me a better understanding of how React, Vite, Tailwind, and the build tools all work together, and helped strengthen my skills in troubleshooting and debugging.

React's component-based structure encourages reusable code, state management makes user interfaces responsive to changes, and its ecosystem provides powerful tools for building modern web applications. However, I can see how React can have a steep learning curve because there are many concepts to understand, including components, props, state, hooks, routing, and project configuration. Keeping up with changes between library versions can also make following tutorials more difficult (as I learned the hard way this week with Tailwind CSS).

From a data science perspective, I can already see how React would be valuable in professional baseball. While much of a baseball data scientist's work involves collecting, cleaning, and modeling data, the results still need to be presented in a way that coaches, scouts, and front office staff can easily understand. React provides an excellent way to build interactive dashboards that display player statistics, pitch tracking data, defensive positioning, and predictive models. Instead of looking at static reports, decision-makers could interact with visualizations and filter data in real time. This week helped me realize that understanding frontend development will complement my data science skills by allowing me to present complex analytical results in a way that is useful for baseball operations.