Why React.js Makes Me More Productive

February 25th 2021 ·  By Daniel Karpienia ·  4 min read ·  637 words

My Background

I started my development career in the Microsoft Stack and have over 7 years of experience as a Full Stack .NET (C#) developer. In recent years websites, progressive web applications (PWA) and front end frame works exploded in popularity and definitely peaked my interest to learn more. Having worked in jQuery and Knockout.js I understand the benefits and power of front end frameworks. After learning React.js it reduced my development time almost in half and provided me simple ways to modularize common components. In fact I had such a great experience I started using it in all my projects moving forward.

React Is a Front End Framework

Front end frameworks are becoming increasingly popular for many reasons but mainly because it helps developers build rich user interfaces simply. Less code to get something done means less maintenance, less bugs and of course more time for your developers to work on value adding tasks.

Unlike many other frameworks for example like Angular. React is just a frontend framework not a stack. This means its a great fit anywhere and does not pigeon hole you into a certain technology. With webpack and bundling you can support older browsers using babel compilers. Your site gets built and optimized for production running simple commands and allows you to integrate with many different hosting platforms.

Many of the benefits I am going to list are not specific to React.js but I prefer there style of implementation.

Component Based Architecture

Components Are Build Blocks

Using a component based approach React.js breaks down large complex user interfaces into smaller more manageable components. You first build the individual modules and then put these components together and manage their state. By using states to drive the user interface it makes developing more simple with out extra markup. When the state changes it will re-render the Virtual DOM which then updates your components. You can use Higher Order Components and wrap components with other components which is a easy way to provide additional functionality without changing the components implementation.

Leverage Component Libraries

I use component libraries like Material UI extensively. There is no point to build a button every single time from scratch. I use these components as a baseline and can customize as necessary. There are cases where your client requires a unique style and functionality but you can implement this on a case-by-case basis and not build every component from scratch.

Testing Is Built Into Your Components

Your components and modules will be come more stable over time. These components get tested over and over from the first implementation and into every project you build after. You should always focus on reusability but only when it makes sense. For example any tabular component with data requires columns and the ability to sort. For example you could modularize your component to accept a dynamic array of data and then implement a reuseable header to update sort direction.

React.js and React Native

By learning React.js you can also create mobile applications using React Native. The syntax for React.js and React Native are the same even though the framework and tooling is different. This stream lines your development and allows you to offer both mobile and web applications without hiring or learning an additional skill set. My go to framework is Expo.io which allows you to build mobile applications for Android and iOS devices using a single code base.

Conclusion

React.js is a powerful language that greatly increases my productivity. By learning one language I can create web and mobile applications, and leverage reusable components to build complex user interfaces. I am not stuck in any stack and with that flexibility I can design and implement solutions that match my customers needs without sacrificing development time or performance.