My First Dance With React
A trip down memory lane.
I started learning React a year ago. My learning process involved reading through fullstackreact.com’s 30 Days of React and going through freeCodeCamp’s react module. I went through the materials casually and they gave me a feel of the ideas react brought to the table, or did they?
I then followed through Dan Abramov’s tutorial on the React Documentation page where we made a tic-tac-toe game. Wow! I made something with React. Mama, look at me now, I’m in the big leagues. It felt good to have something that kinda worked but I wasn’t gonna share a bare-boned HTML page of tic-tac-toe with artificial stupidity with anybody. So it was time to make something of my own. React take cover cos I’m about to rip you apart, or so I thought.
This project from fullstackeact.com caught my interest and I thought to myself “time to dance” or was it “challenge accepted!”? I don’t remember. I decided to build a clone of the project. Good idea, right? 😃. But, why build a static project? I can’t show my friends a page with a photo and some buttons that change the appearance. So I thought of what questions they’d ask:
Me: “Take a look at what I built”
Friend: “Nice. It’s sleek”
Me (smiling, feeling cool and smug)
Friend: “Can I upload my own image?”
Me: No, you can’t
Friend: “Can I save the image when I’m done applying the filters?”
Me: Sorry, no you can’t do that.
Friend: “What then can I do?”
Me: You can play with the filters. Change them. Move the sliders
Friend: “So it’s not really useful”
Me: Huh… 😢
No way I’m doing that. I’m gonna build the bestest, awesomest, coolest app 😎.
I’d take the this tutorial, sprinkle some ES6 pixie dust on it and it would be super-duper awesome. How hard can it be with magic involved? My friends are gonna be wowed. Intended expression below:
To achieve this height of awesomeness, I decided to render the image using the HTML5 canvas api and allow users upload images or capture from camera, do their edits and even save a copy of the image afterward. I had learned about this a few months earlier while reading Eloquent Javascript by the awesomest Marijn Haverbeke 😎.
I had to resize the uploaded image and canvas on the fly to accommodate different image sizes while fitting the screen real estate. I wasn’t going to start learning some new package’s API so I wrote a naive and buggy implementation that sort of worked 😃.
Since the app had no interaction with a backend server, it’d be nice if worked offline, right? Oh Yeah! Besides, that’d score me some extra wow points from my friends. Have you seen a website that works offline? It even installs on your phone like it’s an app. Ultimate wow factor! 🔥
My biggest shock was the sheer number of package suggestions on googling how to do something with canvas and react. I wasn’t prepared for that. I thought developers built everything they needed. All my todo-list tutorials built every part. I had been lied to. I was hurt 🤕
After a few weeks of tinkering, scouring the react documentation, troubling my developer friends, googling, snooping through Stack Overflow, and overflowing my stack, pulling my eye lashes when UI updates lag behind state changes, lifting up state, drilling props down multiple components (This was React v15.x — Context api was a bad idea left to smarts like Dan Abramov. Besides, I barely understood it anyway), I finally shipped my app. 🎊 🎊 🎊
This is the link to the awesome app and the repo. I have left all the code as it was. It’s fun to look back and see the ridiculousness of my old code.
That was about 18 months ago. I was a hobbyist developer taking a break from the world of medicine. I have since gone on to take a full-time role as a software developer and built many more cool stuff and contributed to real projects. And yes, I’m enjoying it.
And yeah, lest I forget, my friends were wowed. Intended expression achieved with a bang‼️
