React

React
Name	React
Developer	Facebook (Meta)
Initial release	May 2013
Programming language	JavaScript
License	MIT License
Website	reactjs.org

React React is a JavaScript library for building user interfaces, originally developed by Facebook (now Meta) and released publicly in 2013. It emphasizes a component-based model for constructing interactive views and is widely adopted across technology companies, startups, and open-source projects. React's influence spans web and native application ecosystems, shaping development practices at companies such as Facebook, Instagram, Netflix, Airbnb, Dropbox, Twitter, Yahoo! and integrating with platforms like Node.js, Electron, Cordova, WordPress and Shopify.

History

React originated inside Facebook to address complexity in building dynamic user interfaces for applications like Facebook Messenger and Instagram. Its public release followed internal use and precedents from libraries such as XHP at Facebook and academic ideas from the Model–view–controller lineage and virtual DOM research at institutions including MIT and Stanford University. Early milestones include the 2013 open-source release and subsequent adoption by projects at Airbnb and Netflix, while community events such as JSConf and ReactEurope accelerated ecosystem growth. Major platform shifts included the introduction of React Native in 2015, the licensing change to the MIT License in 2017 amid discussions involving WordPress and MongoDB, and the addition of Hooks in 2019, influenced by developer patterns pioneered at companies like Pinterest and Twitter.

Design and Architecture

React's architecture centers on a component model inspired by earlier component systems used at Facebook and in frameworks like Backbone.js and AngularJS. Components encapsulate structure, behavior, and styling, enabling composition patterns used by teams at Microsoft and GitHub. The virtual DOM diffing algorithm—related conceptually to techniques researched at University of Cambridge and Carnegie Mellon University—reduces direct manipulations of browser APIs provided by WHATWG and W3C standards. React's unidirectional data flow aligns with patterns from Flux and influenced state management libraries such as Redux, MobX, Recoil, and Zustand. Renderers adapt the core reconciliation to targets like WebKit, Blink (via browsers such as Chrome, Safari), as well as native platforms via iOS and Android through React Native.

Core Concepts

React builds on several core concepts that guided engineering at Facebook and are taught in courses at University of California, Berkeley and Harvard University: - Components: modular units similar to UI primitives used in Apple's Cocoa and Microsoft's Win32 frameworks; implemented as function or class constructs influenced by ECMAScript proposals at TC39. - JSX: a syntactic extension combining JavaScript with XML-like markup, shaped by ideas from XHP and influenced by templating approaches in Ruby on Rails and Django. - Props and State: mechanisms for passing data and managing local changes, paralleling patterns in Flux architecture and stateful UI in Smalltalk systems. - Lifecycle and Hooks: lifecycle methods and the Hook API (useState, useEffect, useContext) reflect patterns from reactive programming research at Bell Labs and libraries such as RxJS. - Reconciliation: the algorithm for updating the virtual tree uses heuristics to minimize updates to DOM implementations defined by WHATWG and browser vendors like Google and Apple.

Ecosystem and Tooling

React's ecosystem includes developer tools, UI libraries, and build systems adopted by organizations such as Google and Microsoft: - Tooling: bundlers and build tools like Webpack, Babel, Vite, and package managers like npm and Yarn. - State and Data: integrations with GraphQL and servers like Apollo and Relay (the latter developed at Facebook) for data fetching patterns used at companies such as Shopify. - Component Libraries: design systems and libraries including Material Design implementations, Ant Design, Bootstrap, and corporate systems at IBM and Airbnb. - Testing and CI: test frameworks like Jest and Mocha, end-to-end tools like Cypress and Selenium, and continuous integration services such as Travis CI and GitHub Actions. - Native and Rendering Targets: React Native, integrations with Electron for desktop apps, and server-side rendering solutions used by platforms like Next.js and Gatsby.

Performance and Optimization

Performance techniques in React are practiced by engineering teams at Facebook and Google and draw on computer science research from Stanford University: - Memoization and Pure Components: patterns similar to optimizations used in Lisp and Haskell functional programming communities. - Code-splitting and Lazy Loading: strategies implemented via bundlers like Webpack and runtime solutions used by Netflix and LinkedIn to reduce initial payloads. - Server-Side Rendering and Hydration: approaches used by Next.js and Gatsby to improve perceived performance and search engine indexing practiced by Shopify and WordPress sites. - Concurrent Mode and Suspense: experimental features influenced by scheduling work from Google's research and runtime systems like V8, enabling asynchronous rendering patterns used in interactive apps at Instagram.

Adoption and Use Cases

React is used across consumer platforms, enterprise applications, and developer tools at organizations such as Facebook, Instagram, WhatsApp, Netflix, Uber, Airbnb, Salesforce, Adobe, Microsoft and Amazon: - Web Applications: single-page applications, progressive web apps, and content platforms built for browsers like Chrome, Firefox, Safari. - Mobile Applications: cross-platform apps using React Native deployed to Apple App Store and Google Play. - Desktop and Embedded: desktop clients via Electron and embedded interfaces in products by Samsung and Sony. - Design Systems and Internal Tools: corporate UI libraries and dashboards at IBM, Capital One, Target, and The New York Times.

Category:JavaScript libraries