What is React

What is React

React is a JavaScript Library (not a framework) for building user interfaces. Initially developed by Facebook and later Open-Sourced.

·

4 min read

Creating a Modern Web App includes a lot of heavy coding, optimization and designing. For many years developers have found ways to optimize and create robust software that can scale as per modern needs. Over the period, many frameworks and libraries came forefront to make the web more powerful. And today we will learn about one such library named React, a modern JavaScript library for building user interfaces. We will see how and why React was developed and how it is making the modern web development experience faster and easier.

React is a JavaScript Library (not a framework) for building user interfaces. Initially developed by Facebook and later Open-Sourced. It was created by Jordan Walke, a software engineer at Facebook. Initially, React was developed to solve some UI challenges that Facebook was facing on its website.

Why React was born?

The most expensive operation on a browser is Node Changes. When Nodes are changed inside the DOM, it requires a lot of computational power. So if we want to improve the app's performance, we have to reduce the Node Changes. React helps us in reducing the Node Changes.

Before React, updating the UI in web apps often required manually manipulating the DOM, which could be time-consuming and inefficient. React introduced a Virtual DOM, an in-memory representation of the actual DOM.

This Virtual DOM allows React to efficiently update only the necessary parts of UI When changes occur. This reduces the need for direct DOM manipulation and improves performance.

Timeline of React Development

Here I have showcased the Major Events in React's Development Journey. This will help you understand the library and its direction better.

Year of Creation

React was first developed in 2011 by Jordan Walke, but it was not publicly released until 2013.

Motivation and Origins

The idea for React came about due to Facebook's growing need for more efficient and maintainable ways to build complex user interfaces for their web applications, including the Facebook news feed. Some of the key motivations and origins of React include:

  1. Performance Issues: Facebook's dynamic and content-rich web applications were experiencing performance bottlenecks with traditional JavaScript frameworks and libraries. Updating the DOM (Document Object Model) efficiently was a major challenge.

  2. Code Reusability: Facebook wanted a way to create reusable UI components to streamline development and maintenance.

  3. Data Flow: The need for a clear and predictable data flow within the UI became apparent, as managing complex UI states was becoming increasingly difficult.

Early Development Highlights

  1. Inception (2011): Jordan Walke began working on React as a prototype project within Facebook to solve the aforementioned challenges.

  2. Public Release (2013): React was first introduced to the public in May 2013 at Facebook's F8 conference.

  3. React's Virtual DOM (2013): One of React's most revolutionary concepts, the virtual DOM, was introduced to optimize UI updates. It allowed React to efficiently update the actual DOM by minimizing direct manipulation of the DOM.

  4. Component-Based Architecture (2013): React promoted a component-based architecture for building UIs, where developers could create reusable UI components, making it easier to manage and scale complex user interfaces.

  5. Open Sourcing (2013): React was open-sourced on GitHub in May 2013, which played a significant role in its rapid adoption by the developer community outside of Facebook.

  6. JSX (2013): React introduced JSX, a syntax extension for JavaScript that allowed developers to write HTML-like code within JavaScript, making it easier to define component UIs.

  7. Flux Architecture (2014): Although not part of React itself, Facebook introduced the Flux architecture pattern alongside React in 2014 to manage data flow in applications. It complemented React's unidirectional data flow.

  8. React Native (2015): React Native was introduced as an extension of React, enabling developers to build native mobile applications for iOS and Android using React and JavaScript.

  9. Reconciliation Algorithm (2016): React's internal reconciliation algorithm was improved to further optimize UI updates, making React even more efficient.

  10. Fiber (2017): React Fiber, a complete rewrite of React's core algorithm, was introduced to make it more flexible and support asynchronous rendering, enabling better performance and smoother user experiences.

These early developments and highlights played a crucial role in establishing React as a popular and influential library for building web and mobile user interfaces. React's principles and innovations continue to shape the modern landscape of web development.

💡
This is the first post in our React Series. Subscribe and Follow for more such content. Jai Hind, Vande Mataram 🇮🇳

Read more about React & JavaScript

Follow me for more such content.

Did you find this article valuable?

Support Jay Tillu by becoming a sponsor. Any amount is appreciated!