On learning React

October 8, 2020

LEARNING: the acquisition of knowledge or skills through study, experience, or being taught.

Hello there 👋! It's no secret that I am a big fan of Vue.js and I really love the framework because of it's simplicity and developer love. I have been very much active in the Vue community, writing and maintain open-source Vue plugins, writing articles and even started Nuxt.js Africa in a bid to spread the word about the framework and foster more adoption in Africa(I haven't been really active in this though).

I literally got my first professional software engineering role back in 2018 as a front-end engineer using the Vue framework so you can see clearly I have been Vue for quite a while, so why learn React?

Earlier thoughts about React

I didn't have a lot of acceptance for the React framework for quite a while, I found it cumbersome to learn and the entire thing with JSX was a total show stopper for me. I have literally refused to touch React over the years.

Now you might be thinking "Kelvin, what got you to change your mind then?". What else is responsible for the gross percentage of change my friend - NECESSITY

NECESSITY - the state or fact of being required.

Let me explain what I meant by me learning React being a necessity. I have previously turned down consulting gigs because the client wanted me to use React, which I balked at(the younger me was very emotional about my front-end stack). But a while ago I had to write an article and needed to make the demo in React - my first thought was "Hell no!", but thinking about it; I like the tech I was supposed to write about so why let me not liking React hinder me from writing the article? So I decided to eat the frog and ran npx create-react-app demo, and what happened next was shocking to me...

I liked what I saw, I mean, I have seen a React codebase back then in 2018 and I hated it, the binding to this and the class base component it was just not for me. But what I saw in the demo app boilerplate was friendly. I saw a simple component without this it was a functional component and it made use of the trending React Hooks. For once I understood what was going on in a React codebase and the JSX syntax, wasn't really that confusing anymore!

Also when it came to testing the components, I subscribed immediately to the principle of React Testing Library. It made a whole lot of sense to me to test my component from the prospective of the user and not from my perspective as the developer. It was genius!

Noticing this, I started to feel a bit guilty for liking what I saw because I was(and still am) a Vue believer. I was able to attain closure by analyzing myself and here is what I deduced...

Vue is an awesome framework and it's principles and architecture was able to set me off(as much as other developers new to front-end engineering) as a front-end engineer. Vue made a whole of stuff easy by it's smart use of abstractions that if I had to do it the JavaScript way back in 2018 while I was still learning the ropes of things, I would have been out of my job as fast as I came in!

But I have grown since 2018 and my handle on JavaScript has greatly been sharpened and improved since then. Also I never liked the whole class based component thing and since React has functional components that appeals to me, it was easy to see a reason to give React a try.

In all, I would say React has really grown over the years and it's a brilliant piece of technology with some awesome people I have come to admire(Dan Abramov, Kent C. Dodds, and more) working on it. React really enforces some methodologies that will make a developer solidify their understanding of the JavaScript language. for example, when it comes to iterating over a list/array you wouldn't have a convenient syntax or abstraction like we have in the Vue world but you will be using JavaScript map method and I find more cases where the React philosophy don't try to solve a problem JavaScript is already solving and I totally like it!

My learning strategy

Though I feel hyped about my journey to learn React, I wouldn't want to abandon Vue and since Vue 3 just launched, it will be exciting to learn React and Vue 3 along side. I spent most times these days watching React conference talks like this to imbibe the React philosophy

I always believe understanding the intention of a creator would allow you better understand and utilize a piece of software of programming language.

As far as practice goes, I plan on using React for building the interactive parts of Sailscasts - a platform for learning server-side JavaScript using the Sails.js framework so if you are interested in tuning in to that journey, subscribe to the early access list for Sailscasts. I believe this way I get to solidify my handle of React and see how it plays out in a real-world project. Should be fun 😺

P.S: I am still a Vue guy, I'm just augment my tool set my learning React as well

So that's it! I will be sharing what I find in using React to build Sailscasts(privately first to my email list so go subscribe!) and a bit of the journey might be shared here on this blog as well.

As always, you can tweet at me on Twitter your thoughts on this article.

Code expressively 🎨,
Kelvin