If you’re like me, who is an avid fan of PHP, you will naturally hate React for its complexities. At least that’s how I first got started with it. It was in the last quarter of 2018 when the company I used to work for decided to switch technologies – from a monolithic PHP architecture to something that resembles the “modern way of building web apps,” a.k.a. the JamStack Architecture.
The decision was greatly influenced by the fact that our web applications were hosted on AWS, and having NodeJS as the backend code is the most logical way to do it. And I was forced to learn React because it was necessary for my job, before I even knew the benefits that came along with it. So, it was like being pushed into a new architectural paradigm that I wasn’t used to.
I went from being comfortable with the MVC Architecture to switching to the Component-based architecture where colocation is a thing. Colocation is just a fancy way of saying that the code responsible for the user interface also contains the code to compute things or request data from an external resource or a Rest API, so to speak. It was way different from what I have been used to.
I love being comfortable! And I can’t deny the fact that the Model-View-Controller (MVC) Architecture made much more sense for the project we were building back then. All the things that could have been easily done with, let’s say, Laravel, became a nightmare when we switched to using React and Node.js. But little did I know that React was the best thing I never knew I needed, and I’ll tell you why!
High Demand and Job Opportunities
React is extensively utilized within the industry, and there exists significant demand for developers proficient in React. Numerous companies, spanning from startups to prominent tech corporations, are actively seeking React developers to create and manage their web applications.
Yes, that’s true. As much as I hated React, there are lots of companies out there that are willing to pay you for it. So even if you hate React due to somewhat baseless prejudice like mine, you really can’t deny the fact that it helps you make money. At the end of the day, money is always the key ingredient for you to learn a specific job you don’t like.
Component-Based Architecture
React revolves around the idea of components, which serve as reusable and modular foundational elements for user interfaces. This methodology simplifies the management of intricate user interfaces, enables targeted updates to specific UI components without impacting others, and facilitates seamless collaboration among development teams.
While the above notion is true, it’s still easy to fall into the trap of over-engineering things, such as abstracting your components in a way that your code becomes unreadable. So, don’t try to over-engineer things when you don’t need to. You’ll thank your future self!
Reactive Nature
React is different from older ways of making things on screens because it reacts to changes really well. React’s reactive programming model enables efficient and dynamic updates to the UI based on changes in the underlying data.
In other words, when things change in the stuff behind the scenes, React quickly changes what you see on the screen. This is because React works with a way of programming that’s all about reacting to changes, making things move around, and staying efficient. And when React came along, it also brought some brand-new ideas with it. Without React, we might not even know what to call these new ideas! Maybe this is why they call it React, because it reacts. (pun intended)! 😀
In React, the UI updates are driven by changes in the application’s state. States are just variables that you put in your component that stores data (e.g., strings and numbers). These data will drive your applications behavior. When the state changes, React efficiently calculates the minimal set of changes required to update the UI. It does this by using a Virtual DOM, which is a lightweight representation of the actual DOM. This approach minimizes the number of expensive DOM manipulations, leading to better performance.
React also has this concept called One-way Data Flow. This concept defines how React manages where data flows from parent components to child components. When data a.k.a state changes, it triggers a series of updates that flow downward through the component hierarchy. This unidirectional (one direction) flow simplifies debugging and helps prevent unexpected side effects. Imagine a tree with a big trunk and lots of branches and leaves. The trunk is like the main part of your app, and the branches and leaves are the important parts that go inside it. They all work together like a family of parts.
This approach allows you to perform actions, such as clicking a button on the screen, which can rearrange items and display new things on the screen without needing to refresh the entire webpage. As a result, your web application appears smoother and more responsive to the people using it.
Many concepts you learn while working with React, such as component architecture, state management, and the use of APIs, are transferable to other frameworks and libraries. This can make it easier to learn other tools in the future.
Cross-Platform Development
By leveraging libraries like React Native, you have the capability to apply your React expertise not only in constructing web applications but also in developing mobile applications for both iOS and Android platforms. This offers a substantial benefit in terms of reusing code and expediting the development process.
In other words, learning React is not a waste of time. I hate to admit it, but it’s the truth. Most companies wanted to create a mobile application version of their web apps and React Native is the viable choice of building one. The reason is that you don’t have to learn new web technologies when using React Native, as it is only using the syntax you’re familiar with which is HTML, CSS, and JavaScript. This can make the transition to mobile app development smoother for developers who are already experienced with React and reduces the learning curve associated with picking up new programming languages and tools.
Large and Active Community
React boasts a large and lively community of developers. This means you’ll have access to a wide range of helpful materials like guides, tutorials, libraries, and tools to assist you in learning and addressing challenges. This community also plays a role in enhancing React through ongoing improvements and updates.
This is why React has a rich ecosystem of third-party libraries and tools that complement and extend its functionality. These include state management libraries like Redux, routing libraries like React Router, and many UI component libraries. That is because if you have a large community of developers, that means you have many people to help you when you’re stuck with something. Moreover, as a business owner, you can easily find and hire React developers, as they are basically everwhere!
The Verdict
I’m aware that there are lots of React concepts that I was not able to mention. But the key takeaway here is for you to realize the benefits of using React. Of course, it’s not the fastest or always the best solution for every web app. Because at the end of the day, it always depends on what you’re building. It just so happens that React covers a lot of use cases where user experience is one of the major key factors to make your web app successful.
If you ask me, do I still hate React? If I say yes, that would be hypocrisy. Maybe the hate I had for React is partly due to the fact that I was not skilled enough to solve problems when using it as a tool. In fact, I still had to use React for some portions of this website. So, it’s very hard to say that I still hate it. With all the benefits it gives, it just outweighs all the hate I had for it.