React: Photo by Ferenc Almasi

Diving Into React

I first started seriously web designing sites in 2015, when I got my first big boy job as an online marketer. I remember reading about frameworks and looking into React. And it was way over my head.

Later, while working as a front end developer for a start up, I got to choose between using VueJS and React. I had been working there for roughly three months, and while I had a bit more programming experience, React still looked intimidating. I opted for Vue, which felt much more comfortable for someone with a mostly web designer background.

It’s been three years since I’ve been coding professionally now, so I wanted to take another look at it.

The Project Specs

Traditionally, there are two types of apps programmers first write when testing out a a shiny new framework or technology:

  1. “Hello World”
  2. To-do Lists

Before I started with this project, I outlined a few project objectives:

  1. The project will use react via a CDN and not NPM
  2. The project must make use of some API
  3. The scope should be small.
  4. And as a spicy challenge, no CSS frameworks!

I wanted to remove as much possible friction I had about getting started, so I decided I would keep it simple for now and just use the CDN for react. I know “npm create-react-app” is a pretty easy command to type, but to me using a CDN for prototyping was quicker.

In the “real world”, so many interfaces I have designed revolved around API calls. For that reason, I wanted this project to incorporate API calls. This lead me to deciding to make this a weather app, using OpenWeatherApi.

First Impressions

Immediately upon using React, I can see why I had trouble with this. Two years ago, before I began working with Python as I transitioned into a full stack developer, I had no concept of classes. There were a lot of things I didn’t know.

But coming in with experience, I have to say it’s been pretty smooth sailing. React is pretty easy to work with. In fact, I’m really enjoying working with it.

In roughly a day, I more or less finished the small weather application. There’s a few more data points I want to see if I can add in (I just saw that I have access to a 5 day weather forecast through the api!), more or less I just need to make it look pretty now.

Here’s the progression of how it’s looking:

Version 0.1

Prototype One:

This is what the app looked liked after the first few hours. Most of the spent resolving some quirks related to using React as a CDN and reading docs for OpenWeatherApi.

A hideous creature, but fully functional. You had to press a button to call the API. The background looks a little sad to me for some reason.

Version 0.2

Prototype Two:

The style is coming along, but it still lacks polish. There is no longer a button you need to press, the API call is made after React mounts.

I still want to do something about the background. I think a brighter/bluer cloud photo could look nice, but I have not found one I’ve liked yet. For now, I’ll keep it as a gradient until I can get something that works.

Also, right now it can only look up your own weather. A stretch feature would be to allow the user to search for other locations weather. The only issue I see with this is that OpenWeatherApi works off of longitude and latitude…I would need some way to convert a location to longitude and latitude, which sounds like using another API…it would let me mess around with forms though.