An Appreciation of ReactJS
Tags: react, javascript, webdev
Published: 2022-03-08 13:23:38


Web technologies evolve quickly. Before you say: Jack and Jill went... boom, three new JS frameworks have been released. For the web developer, it means that we are currently flooded with options for building web applications. Sometimes, this leads to fatigue. Yes, framework fatigue is a real thing. 

The amount of choice a developer has to make is used as an argument against the JS ecosystem. There is some merit in that. I do believe though that Frameworks have considerable improved the Developer experience.

I will be discussing ReactJS and its ecosystem and how it has made building JS applications easier.

N.B: I am a beginner to ReactJS. I have built a couple of landing pages with it. Right now, I'm working on a fun little country facts app with APIs. I don't purport to know all there is to know about the workings of the framework. Everything I share here is from my personal experiences from using both React and vanilla JS to build apps.

ReactJS component-based architecture isn't unique. Every other framework from Vue and Angular both uses that same type. I am not as experienced in either of those so I won't be talking about them.

I appreciate React. I enjoy using React. That would shock a lot of beginners because the narrative in the JS community is that, React isn't the best for newbies. There is JSX to grapple with, CSS-in-JS, how exactly state and props work, etc. I did face these issues when I first got started but now I recognize why I did.

My Javascript was very low level. I knew what ES6 was but never used it in building. I just couldn't think in React. That therein lied the problem.

You see, thinking in React requires a departure from vanilla JS imperative mode of DOM manipulation. Sure you can write declarative code in vanillaJS but I never tried it, probably because it just seemed unnecessarily complicated. What React offered though was something radically fun. Building and updating the DOM had never been easier.

Let's take one example: I tried building a form for user feedback collection. I generated the HTML elements and CSS both all in JS and well...it was a mess. In my defense, I did leave enough comments to guide whoever was gonna use the codebase later on. It is not an effective way to build apps.

A single change in a property declaration for a button element, caused the whole page to refresh. I can't sufficiently explain my frustration every time it happened. This is where React's shadow DOM spoiled me. 

A single change in one section -- say a component -- needn't rerender the whole app. The shadow DOM just updates the parts of the DOM necessary to see changes. "This is...magic" I uttered. Sure, I could be overreacting. But the thing is, I had never experienced such ease in building apps. It increased my workflow and made sure I spent more time thinking in React.

Let's explore that a bit as well. I think the component-based structure of the react is a major plus. It forces you:
 to think of reusable components,
 what data would be required in my case 
how it all fits into the whole-- the app itself. 

When I got started with a Tweet component I was making, I had to let others know of this joy.

{% embed https://twitter.com/adeleke5140/status/1487492318424928260?s=20&t=0esWiZGlre2hHsE2RwH2jA %}

It was pretty exciting to make.

The final result of that was this:

{% embed https://twitter.com/adeleke5140/status/1487512803946676233?s=20&t=1-X_AwmduQgY9_2QQjM77g %}

I am still learning a lot about ReactJS. I recently just learned about the useState and useEffect hook. They are pretty nifty features react provides to manage state and side effects.

I like React. Sometimes, I get frustrated when stuff doesn't work as I expect it to, I believe it's a web technology I will enjoy as I keep building and using it.

Interested, check out the. They are amazing.[new React docs](https://beta.reactjs.org/)