The Finish Line
Read Part 1: Diving Into React or check out My Weather App.
A few days ago I set out to use React for the first time by creating a small weather app. It has now reached minimal viable product specs, so I’m concluding this exercise.
Being a MVP there is definitely a lot of features and extra goodness that could go into this. But considering the minimal time investment, I’m very happy with how this came out.
How It Started
Final Design
Not Without Hiccups
My first post about this project mostly talked about the planning phase - What I wanted the app to do, the scope of the project, etc etc. I didn’t get too much into the specific implementations of the project, but there were quite a few little issues that came up. I want to write a small guide on how to setup a weather application, because I feel like it could help others who run into the same issues. I’m going to note them here for later reference:
- Not being able to render HTML with the return below. This is an issue that can happen when using the CDN version of React, which does not seem to be too popular as I could not find much on this issue.
return (
<span className="material-symbols-outlined md-60 md-light">sunny</span>
);
I resolved this by adding babel as an external JS file, and as a type for my web application. It gives me a warning about using this in production, so I guess I need to precompile it with babel? Something to look into later.
<!-- BABEL. Needed to help react render HTML -->
<script src="https://unpkg.com/[email protected]/babel.js"></script>
<script type="text/babel" src="app.js"></script>
- Using navigator.geolocation and the API caused some issues.
To get the user’s location for the weather app, I need to access their longitude and latitude. I did this by using the navigator Web API, provided conveniently from the browser. Unfortunately, by the time this API has returned my longitude and latitude, my secondary call to OpenWeather had already came and went.
I had to make a function to handle the call so I could make it asynchonous. The function returned a promise, which I don’t quite understand right now. I need to take more looks into promises.
If I did this project over again…
I decided the fastest way to see what React was about was to design a small application, and I still find this is what works best for me when learning a new framework or language. But I could have hard some more concrete goal than “Make a thang”. I knew I wanted some usage of an API because that would more closely resemble a typical work scenario, but I didn’t have much other then that.
I learned a ton about how React works with this project, but I think I could have boosted my learning even more with some concrete goals. For example:
- How does React handle HTML templating?
- Are the lifecycle components similar to VUEjs?
- What are the advantages of using NPM over a CDN?
I also, randomly, decided I didn’t want to use a CSS framework. That I would do all the CSS myself. And while it was kind of cool to throw together my own classes, it was entirely just reinventing the wheel. Making my own flex containers, creating my own utility classes for margins and padding…I think this actually made the project take longer without teaching me anything new. I already know CSS, but I didn’t think this through. A more thought out approach may have had me compile CSS using SASS, something I haven’t done in a very long time.
This project was my one rep max
After being a professional programmer for three years, it was actually exciting to revisit React. I remember it thoroughly humbling me many years ago, and highlighted that I really didn’t know anything back then. Part of being a developer is the ability to quickly absorb and use new information. I sort of used this project to test my metal in a short period of time. Can I dive into a framework I’ve never used, and produce a clean-looking application without any use of CSS in a few days?
The answer was: A resounding yes. In some ways, this project’s main goal as to alleviate some feelings of imposter syndrome as I re-enter the job search. Not having a degree in computer science, I think I’ll always carry some sort of mental scarlet letter. Still, I was very happy that I not only understood how React was put together, but that I enjoyed using it! It had been a long time since I’ve been able to sit with a framework and learn it at a reasonable pace, and not at a do-or-die this thing is going into production in 2 hours kind of way.
Next Steps
I want to do a small how to guide on this application. I want to learn React well enough to confidently speak to it, and I think creating guides is a logical step to make that goal a reality.
I am going to create a new React application, with the following goals:
- Write a How To Create a Weather App guide in React
- Learn how to setup reactjs in a docker environment
- Learn how to use SASS to create CSS react app
- Learn the difference between React Components and React Hooks
- Learn what the fuss is about useState and useEffect.
In other news, I recently created a wiki! It can be found at Snow Wiki. Right now it’s completely bare, but the tech behind it is pretty cool. I’d like to write about that some day as well.