Another week goes by, and it is time to reflect on it. This week was full of courses for me, I’ll detail what I’ve learned.

I’ll start with React. First, I finished the last details of the spending manager I had been working on since last week, these details included adding some filtering to separate the costs by year, some conditional rendering for displaying the new expenses form only after a button is pressed, and creating a graphic for each month’s total costs. While none of the things I used during this project were anything new or out of the ordinary, I found that building this app from the ground up and taking care of managing its state helped me solidify the knowledge I had and helped me feel more comfortable applying these concepts in real applications.

Next up, I worked on a little application designed to test out dynamic application of CSS styles using JSX depending on the validity of input, as to give a user an indication that what they are doing may be invalid. This project was quite interesting, as it taught me that the css styles made on a react project are by default not scoped to their component, but rather are global in scope. In this same project 2 solutions to this issue are explored (aside from the obvious one which is not repeating class names): using a library called styled components, or using CSS modules. Of these, the first one is quite a unique alternative, and while I can see its use and advantages, the weird syntax really put me off from using it that much. CSS modules on the other hand offer a solution which is more familiar with the default developer experience, and since using the create-react-app utility supports the use of modules, I feel way more comfortable with that alternative.

Styling

Finally on regards to React, the last section of the course I worked on had us make a simple React app, in which a user could enter the name and age of any given user and said user’s information would appear below on a list. Some verifications would also be needed in order to ensure no useless or wrong information was entered. This project as well was quite simple in nature, but it helped me to practice and feel more comfortable with the basic concepts of React, mainly that of state management. Overall, it has been quite a pleasant experience and I’m looking forward to tackling more complex topics in the future now that I feel more at ease with React’s foundations.

Lastly, this week I decided to pick up a little app I had been working on using the Ionic framework using Angular. First off, it was quite eye opening using Angular after a while of not working on it, and I got the memo that I really shouldn’t take a long time off from either React or Angular, as picking them up right now is quite hard if I’m feeling rusty. Other than that, developing this app (which was a simple to-do list) was quite the experience! First off, I had never developed anything in mobile, so I was expecting it to be a really intimidating experience, but to my surprise it wasn’t much different from programming a regular Angular app with some UI flavor on top, such as using Bootstrap. Developing this app allowed me to get over my fear of trying to do something different with the tools I already know, and it helped me open my eyes to how easy these frameworks make the process of developing quite beautiful interfaces for users to use. In addition, this project allowed me to get a better look into the concept of modules in angular, something I hadn’t given much thought until now: I also learned to pick up elements from the DOM in the typescript file using the ViewChild decorator. Overall, I was very happy with the finished product and all of the things I was able to learn.

That wraps it for this week, hopefully next one will be as productive as this one.