Why use React.js? | A guide to the popular JavaScript library

The story of React starts with Jordan Walke, a former software developer at Facebook. He was highly influenced by a PHP extension called XHP, and functional programming ideas. The goal was to make Facebook’s feed update quicker based on user interaction.

• 2011: To address the challenges Facebook faced with its complex user interfaces, React was initially developed and first deployed on Facebook’s News Feed in 2011. Soon after, in 2012, Instagram also adopted React into their code base.
• 2013: Facebook announced at JSConf US that React continues as an open source project, and since then it has gained immense popularity worldwide.
• 2015: To address issues for mobile development Facebook presented React Native at React Conf. It enables developers to build natively on Android and iOS, and has also been released as an open source project shortly after.
• 2017: Facebook announced React Fiber, which was a complete rewrite of the React core algorithm, focusing on improving performance and responsiveness even more. It would provide the basis for future improvements and further developments of the React library.
• 2018: At React Conf 2018, the React team announced React Hooks, a new stateful primitive that was simpler than a class component, was less confusing than classes and made it easier to colocate and reuse component logic.
• 2019: A new version of the React DevTools package was released with significant performance gains, but more importantly it offered full support for React Hooks.
• 2020: The React team announced their research work on React Server Components, a new concept that allows developers to build applications that span both the client and the server, providing better performance and a more seamless user experience by offloading work to the server where possible.
• 2021: The React team announced a new gradual adoption strategy for concurrent features, allowing developers to adopt new features at their own pace. This approach minimises the need for extensive rewrites of existing code, making the transition to new versions of React smoother.
• 2022: React 18 was launched which introduced several significant enhancements like concurrent rendering, automatic batching, transitions, suspense on the server and a handful of new APIs.
• 2023: The new React documentation was officially launched which emphasised modern React practices while improving clarity and coverage of React topics to enable developers to understand essential aspects of React that were inadequately explained before.

Frontend frameworks ratios over time. Source: State of JavaScript 2023

React is a powerful JavaScript library that excels in building dynamic user interfaces. It’s fast, scalable, and flexible, making it a popular choice for modern web applications. Whether you’re building a single-page application or a complex enterprise system, React’s component-based architecture simplifies development and enhances performance.

React’s modular approach allows to build reusable components, making your code more maintainable and scalable. By breaking down the website into small, reusable components, each of these components contain a specific part of user interface logic that can be (re-)used and incorporated any way possible. It’s important to keep your code structured and well organized. A common mistake is to put too much business logic inside components, which makes the code hard to read. A general rule to follow is that reusable components are the ones which contain markup and styles.

React updates the UI efficiently, ensuring smooth and fast user experiences. When data changes, React checks the differences between the VirtualDOM and the actual DOM, thus being able to only update the parts that have been changed instead of the whole DOM. This greatly reduces how much of the DOM is manipulated and changed, making the render faster and smoother!

React introduced the principle of "Unidirectional data flow", which means that data flows from parent to child components. This makes understanding how your application reacts to state changes more predictable.

Makes writing JavaScript and HTML easier and smoother. JSX (JavaScript Syntax Extension), or also called JavaScript XML, is a syntax that combines HTML and JavaScript in coding. It transforms HTML tags into React elements, and is stored in .jsx files.

When it comes to React it’s not just about the tools; it’s about how you use them. In our experience, this is where many teams encounter difficulties. At Peerigon, we focus on professional web development in the JavaScript landscape, and our experience with React has taught us how to handle React’s special characteristics. To successfully implement React and taking advantage of its features, the team needs the basic technical knowledge, as well as hands-on practical experience. Building your website on JavaScript alone can quickly bring you to a halt as soon as your web application accumulates required, but difficult to maintain code. That’s why we use the component-based architecture, unidirectional data flow, and the virtual DOM to easier produce reusable and simpler code.

As mentioned before, Facebook initially built React for their web applications. It’s a JavaScript library for building efficient and robust user interfaces that require frequent render updates. It shines when used for complex web UIs and single-page applications, especially when combined with suitable frameworks like Next.js. React directly compiles to plain JavaScript, so it runs in every browser!

When the use of mobile devices started to spike, there also was a need to make their mobile application run more smoothly, thus React Native was born. It’s a framework for building native mobile applications using React, and let‘s you build directly on iOS and Android. React Native compiles to iOS and Android code, by utilizing the same platform APIs like Objective-C & Swift, or Java & Kotlin.

Some of the benefits of using React Native are:

• Reducing work by developing cross-platform: write once, deploy anywhere!
• Keeping the performance while building faster code thanks to native capabilities
• Easy onboarding thanks to pre-built UI components and third-party libraries and tools

Popular React.js website examples

React has proven itself to be a powerful and versatile library for building modern web and mobile applications. Its component-based architecture, efficient rendering through the virtual DOM, and unidirectional data flow make it an excellent choice for developers aiming to create scalable and maintainable applications. With a strong community and backing from major companies like Meta, while also being a well trusted library in the JavaScript landscape, the future of React looks bright. Whether you are building single-page applications, dynamic web interfaces, or cross-platform mobile apps, React offers the tools and ecosystem to help you succeed.