Misplaced Pages

#47952

72-490: REACT or React may refer to: Computing [ edit ] React (software) , a JavaScript library for building user interfaces from Facebook Inc (now Meta Platforms) React Native , a mobile application framework created by Facebook Inc (now Meta Platforms) ReactOS , an open-source operating system compatible with Microsoft Windows Arts and entertainment [ edit ] React (book) , originally Reacciona ,

144-473: A 2002 album by rapper Erick Sermon "React" (Erick Sermon song) , a song from the album React (Robert Rich and Ian Boddy album) , a 2008 album by electronic musicians Robert Rich and Ian Boddy "React" (Onyx song) , a song by Onyx on their 1998 album Shut 'Em Down "React" (The Pussycat Dolls song) , a 2020 song by the Pussycat Dolls "React" (Switch Disco and Ella Henderson song) ,

216-470: A 2011 Spanish-language book React (media franchise) , a metaseries of web videos created by the Fine Brothers Music [ edit ] React (band) , a 1990s American boys band made of Tim Cruz and Daniel Matrium React Music Limited , a 1990s London based dance record label React (The Fixx album) , a 1987 live album by the band The Fixx React (Erick Sermon album) ,

288-640: A 2023 song by Switch Disco and Ella Henderson Organizations [ edit ] Radio Emergency Associated Communication Teams , a volunteer radio emergency service across the US and Canada Rapid Enforcement Allied Computer Team, a task force of the High Technology Theft Apprehension and Prosecution Program , California, US Other uses [ edit ] REACT (telescope) , a telescope at Fenton Hill Observatory, New Mexico, US Rapid Execution and Combat Targeting System ,

360-416: A SPA will often progressively download more features as they become required, either small fragments of the page, or complete screen modules. In this way an analogy exists between "states" in a SPA and "pages" in a traditional website. Because "state navigation" in the same page is analogous to page navigation, in theory, any page-based web site could be converted to single-page replacing in the same page only

432-462: A bidirectional real-time client-server communication technology that are part of the HTML specification. For real-time communication, their use is superior to Ajax in terms of performance and simplicity. Server-sent events (SSEs) is a technique whereby servers can initiate data transmission to browser clients. Once an initial connection has been established, an event stream remains open until closed by

504-501: A component are called its state. The two primary ways of declaring components in React are through function components and class components. Function components are declared with a function (using JavaScript function syntax or an arrow function expression ) that accepts a single "props" argument and returns JSX. From React v16.8 onwards, function components can use state with the useState Hook. On February 16, 2019, React 16.8

576-429: A full-fledged routing solution out of the box. Third-party libraries can be used to handle routing in React applications. It allows the developer to define routes, manage navigation, and handle URL changes in a React-friendly way. Another notable feature is the use of a virtual Document Object Model , or Virtual DOM . React creates an in-memory data-structure cache, computes the resulting differences, and then updates

648-459: A host of other unique vulnerabilities such as data exposure via API and client-side logic and client-side enforcement of server-side security. In order to effectively scan a single-page application, a DAST scanner must be able to navigate the client-side application in a reliable and repeatable manner to allow discovery of all areas of the application and interception of all requests that the application sends to remote servers (e.g. API requests). It

720-652: A local file using the file URI scheme . This gives users the ability to download the SPA from a server and run the file from a local storage device, without depending on server connectivity. If such a SPA wants to store and update data, it must use browser-based Web Storage . These applications benefit from advances available with HTML . Because the SPA is an evolution away from the stateless page-redraw model that browsers were originally designed for, some new challenges have emerged. Possible solutions (of varying complexity, comprehensiveness, and author control) include: Because of

792-401: A new set of internal algorithms for rendering, as opposed to React's old rendering algorithm, Stack. React Fiber was to become the foundation of any future improvements and feature development of the React library. The actual syntax for programming with React does not change; only the way that the syntax is executed has changed. React's old rendering system, Stack, was developed at a time when

SECTION 10

#1732775958048

864-520: A single store, often called a single source of truth . In February 2019, useReducer was introduced as a React hook in the 16.8 release. It provides an API that is consistent with Redux, enabling developers to create Redux-like stores that are local to component states. Project status can be tracked via the core team discussion forum. However, major changes to React go through the Future of React repository issues and pull requests . This enables

936-403: A user id, a target user id, and the type USER_FOLLOWED_ANOTHER_USER . The stores, which can be thought of as models, can alter themselves in response to actions received from the dispatcher. This pattern is sometimes expressed as "properties flow down, actions flow up". Many implementations of Flux have been created since its inception, perhaps the most well-known being Redux , which features

1008-399: A user's selection or cursor position, where updating only the changed value might not. To avoid these problems, applications can use UI data bindings or granular DOM manipulation to only update the appropriate parts of the page instead of re-rendering entire templates. With a SPA being, by definition, "a single page", the model breaks the browser's design for page history navigation using

1080-464: A variant of the observer pattern . A React component under the Flux architecture should not directly modify any props passed to it, but should be passed callback functions that create actions which are sent by the dispatcher to modify the store. The action is an object whose responsibility is to describe what has taken place: for example, an action describing one user "following" another might contain

1152-446: A web browser, receiving events and performing delta changes in server state which are automatically propagated to client. This approach needs more server memory and server processing, but the advantage is a simplified development model because a) the application is usually fully coded in the server, and b) data and UI state in the server are shared in the same memory space with no need for custom client/server communication bridges. This

1224-429: Is a variant of the stateful server approach. The client page sends data representing its current state to the server, usually through Ajax requests. Using this data, the server is able to reconstruct the client state of the part of the page which needs to be modified and can generate the necessary data or code (for instance, as JSON or JavaScript), which is returned to the client to bring it to a new state, usually modifying

1296-489: Is doing what on the site. Similarly to the problems encountered with search engine crawlers, DAST tools may struggle with these JavaScript-rich applications. Problems can include the lack of hypertext links, memory usage concerns and resources loaded by the SPA typically being made available by an Application Programming Interface or API. Single-page applications are still subject to the same security risks as traditional web pages such as Cross-Site Scripting (XSS) , but also

1368-477: Is either a requirement, or desirable. Use cases include applications that surface private data hidden behind an authentication system. In the cases where these applications are consumer products, often a classic "page redraw" model is used for the applications landing page and marketing site, which provides enough meta data for the application to appear as a hit in a search engine query. Blogs, support forums, and other traditional page redraw artifacts often sit around

1440-535: Is in contrast with imperative programming . React code is made of entities called components . These components are modular and reusable. React applications typically consist of many layers of components. The components are rendered to a root element in the DOM using the React DOM library. When rendering a component, values are passed between components through props (short for "properties") . Values internal to

1512-520: Is only concerned with the user interface and rendering components to the DOM , React applications often rely on libraries for routing and other client-side functionality. A key advantage of React is that it only re-renders those parts of the page that have changed, avoiding unnecessary re-rendering of unchanged DOM elements. React adheres to the declarative programming paradigm . Developers design views for each state of an application, and React updates and renders components when data changes. This

SECTION 20

#1732775958048

1584-472: Is possible to add page load events to a SPA using the HTML History API; this will help integrate analytics. The difficulty comes in managing this and ensuring that everything is being tracked accurately – this involves checking for missing reports and double entries. Some frameworks provide free analytics integrations addressing most of the major analytics providers. Developers can integrate them into

1656-485: Is related to the Software, (ii) by any party if such claim arises in whole or in part from any software, product or service of Facebook or any of its subsidiaries or affiliates, whether or not such claim is related to the Software, or (iii) by any party relating to the Software; or (b) that any right in any patent claim of Facebook is invalid or unenforceable. This unconventional clause caused some controversy and debate in

1728-419: Is similar to another extension syntax created by Facebook for PHP called XHP . An example of JSX code: The basic architecture of React applies beyond rendering HTML in the browser. For example, Facebook has dynamic charts that render to <canvas> tags, and Netflix and PayPal use universal loading to render identical HTML on both the server and client. Server-side rendering (SSR) refers to

1800-629: The Apache License 2.0 . In October 2014, React 0.12.00 replaced this with the 3-clause BSD license and added a separate PATENTS text file that permits usage of any Facebook patents related to the software: The license granted hereunder will terminate, automatically and without notice, for anyone that makes any claim (including by filing any lawsuit, assertion or other action) alleging (a) direct, indirect, or contributory infringement or inducement to infringe any patent: (i) by Facebook or any of its subsidiaries or affiliates, whether or not such claim

1872-501: The "forward" or "back" buttons. This presents a usability impediment when a user presses the back button, expecting the previous screen state within the SPA, but instead, the application's single page unloads and the previous page in the browser's history is presented. The traditional solution for SPAs has been to change the browser URL's hash fragment identifier in accord with the current screen state. This can be achieved with JavaScript, and causes URL history events to be built up within

1944-478: The 15.x release line with React 15.6.2. React 16.3 (released on March 29, 2018) introduced the Context API, which simplified the passing of data through the component tree without needing to manually pass props at every level. React 16.8 (released on February 6, 2019) was a major milestone, introducing React Hooks. This allowed developers to use state and lifecycle features in function components, eliminating

2016-446: The Flux architecture was developed as an alternative to the popular model–view–controller architecture. Flux features actions which are sent through a central dispatcher to a store , and changes to the store are propagated back to the view. When used with React, this propagation is accomplished through component properties. Since its conception, Flux has been superseded by libraries such as Redux and MobX. Flux can be considered

2088-523: The Hooks API Reference. useState and useEffect , which are the most commonly used, are for controlling state and side effects, respectively. There are two rules of hooks which describe the characteristic code patterns that hooks rely on: Although these rules cannot be enforced at runtime, code analysis tools such as linters can be configured to detect many mistakes during development. The rules apply to both usage of Hooks and

2160-588: The JavaScript to download and execute before rendering the UI. React supports SSR, which allows developers to render React components on the server and send the resulting HTML to the client. This can be useful for improving the performance of the application, as well as for search engine optimization purposes. React does not attempt to provide a complete application library. It is designed specifically for building user interfaces and therefore does not include many of

2232-500: The React community to provide feedback on new potential features, experimental APIs and JavaScript syntax improvements. React was created by Jordan Walke, a software engineer at Meta , who initially developed a prototype called "F-Bolt" before later renaming it to "FaxJS". This early version is documented in Jordan Walke's GitHub repository. Influences for the project included XHP , an HTML component library for PHP . React

React - Misplaced Pages Continue

2304-479: The React user community, because it could be interpreted to empower Facebook to revoke the license in many scenarios, for example, if Facebook sues the licensee prompting them to take "other action" by publishing the action on a blog or elsewhere. Many expressed concerns that Facebook could unfairly exploit the termination clause or that integrating React into a product might complicate a startup company's future acquisition. Based on community feedback, Facebook updated

2376-535: The SPA site to allow extraction of relevant metadata by the search engine's crawler. For search engines that do not support this URL hash scheme, the hashed URLs of the SPA remain invisible. These "hash-bang" URIs have been considered problematic by a number of writers including Jeni Tennison at the W3C because they make pages inaccessible to those who do not have JavaScript activated in their browser. They also break HTTP referer headers as browsers are not allowed to send

2448-444: The SPA that can seed search engines with relevant terms. As of 2021 and Google specifically, SEO compatibility for a plain SPA is straightforward and requires just a few simple conditions to be met. One way to increase the amount of code that can be shared between servers and clients is to use a logic-less template language like Mustache or Handlebars . Such templates can be rendered from different host languages, such as Ruby on

2520-415: The Software. [...] A "Patent Assertion" is any lawsuit or other action alleging direct, indirect, or contributory infringement or inducement to infringe any patent, including a cross-claim or counterclaim. The Apache Software Foundation considered this licensing arrangement to be incompatible with its licensing policies, as it "passes along risk to downstream consumers of our software imbalanced in favor of

2592-645: The Virtual DOM and determines which parts (if any) of the living DOM needs to change. Lifecycle methods for class-based components use a form of hooking that allows the execution of code at set points during a component's lifetime. JSX , or JavaScript XML, is an extension to the JavaScript language syntax. Similar in appearance to HTML, JSX provides a way to structure component rendering using syntax familiar to many developers. React components are typically written using JSX, although they do not have to be (components may also be written in pure JavaScript). JSX

2664-410: The application and make sure that everything is working correctly, but there is no need to do everything from scratch. There are some ways of speeding up the initial load of a SPA, such as selective prerendering of the SPA landing/index page, caching and various code splitting techniques including lazy-loading modules when needed. But it's not possible to get away from the fact that it needs to download

2736-415: The appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. The origins of the term single-page application are unclear, though the concept was discussed at least as early as 2003 by technology evangelists from Netscape. Stuart Morris, a programming student at Cardiff University, Wales, wrote the self-contained website at slashdotslash.com with

2808-418: The broader industry movement towards functional programming and modular design. As React continues to evolve, it is essential for developers to consider the benefits of functional components and React Hooks when building new applications or refactoring existing ones. React itself does not come with built-in support for routing . React is primarily a library for building user interfaces, and it does not include

2880-413: The browser's displayed DOM efficiently. This process is called reconciliation . This allows the programmer to write code as if the entire page is rendered on each change, while React only renders the components that actually change. This selective rendering provides a major performance boost. When ReactDOM.render is called again for the same component and target, React represents the new UI state in

2952-412: The browser, initiated by a new page load. SPAs do not work this way. After the first page load, all subsequent page and content changes are handled internally by the application, which should simply call a function to update the analytics package. Failing to call such a function, the browser never triggers a new page load, nothing gets added to the browser history, and the analytics package has no idea who

React - Misplaced Pages Continue

3024-486: The browser. As long as the SPA is capable of resurrecting the same screen state from information contained within the URL hash, the expected back-button behavior is retained. To further address this issue, the HTML specification has introduced pushState and replaceState providing programmatic access to the actual URL and browser history. Analytics tools such as Google Analytics rely heavily upon entire new pages loading in

3096-415: The building of a SPA, reducing the amount of JavaScript code developers have to write. There are various techniques available that enable the browser to retain a single page even when the application requires server communication. HTML authors can leverage element IDs to show or hide different sections of the HTML document. Then, using CSS, authors can use the :target pseudo-class selector to only show

3168-459: The case where HTML is returned by the server, JavaScript on the client updates a partial area of the DOM ( Document Object Model ). When raw data is returned, often a client-side JavaScript XML / ( XSL ) process (and in the case of JSON a template ) is used to translate the raw data into HTML, which is then used to update a partial area of the DOM. A SPA moves logic from the server to the client, with

3240-490: The client. SSEs are sent over traditional HTTP and have a variety of features that WebSockets lack by design such as automatic reconnection, event IDs, and the ability to send arbitrary events. Although this method is outdated, asynchronous calls to the server may also be achieved using browser plug-in technologies such as Silverlight , Flash , or Java applets . Requests to the server typically result in either raw data (e.g., XML or JSON ), or new HTML being returned. In

3312-442: The command and control system of the US for nuclear intercontinental ballistic missiles Remote Electronically Activated Control Technology belt (REACT belt), a restraint device See also [ edit ] Reaction (disambiguation) Topics referred to by the same term [REDACTED] This disambiguation page lists articles associated with the title React . If an internal link led you here, you may wish to change

3384-443: The deprecated ActiveX Object . In contrast to the declarative approach of most SPA frameworks, with Ajax the website directly uses JavaScript or a JavaScript library such as jQuery to manipulate the DOM and edit HTML elements. Ajax has further been popularized by libraries like jQuery , which provides a simpler syntax and normalizes Ajax behavior across different browsers which historically had varying behavior. WebSockets are

3456-554: The focus of the system on dynamic change was not understood. Stack was slow to draw complex animation, for example, trying to accomplish all of it in one chunk. Fiber breaks down animation into segments that can be spread out over multiple frames. Likewise, the structure of a page can be broken into segments that may be maintained and updated separately. JavaScript functions and virtual DOM objects are called "fibers", and each can be operated and updated separately, allowing for smoother on-screen rendering. On September 26, 2017, React 16.0

3528-476: The following week, it would re-license Flow, Jest, React, and Immutable.js under a standard MIT License ; the company stated that React was "the foundation of a broad ecosystem of open source software for the web", and that they did not want to "hold back forward progress for nontechnical reasons". On September 26, 2017, React 16.0.0 was released with the MIT license. The MIT license change has also been backported to

3600-526: The fragment identifier in the Referer header. In 2015, Google deprecated their hash-bang AJAX crawling proposal. Alternatively, applications may render the first page load on the server and subsequent page updates on the client. This is traditionally difficult, because the rendering code might need to be written in a different language or framework on the server and in the client. Using logic-less templates, cross-compiling from one language to another, or using

3672-463: The framework, at least some of the application code; and will hit an API for data if the page is dynamic. This is a "pay me now, or pay me later" trade-off scenario. The question of performance and wait-times remains a decision that the developer must make. A SPA is fully loaded in the initial page load and then page regions are replaced or updated with new page fragments loaded from the server on demand. To avoid excessive downloading of unused features,

SECTION 50

#1732775958048

3744-661: The implementation of custom Hooks, which may call other Hooks. React server components (RSC) are function components that run exclusively on the server. The concept was first introduced in the talk "Data Fetching with Server Components". Though a similar concept to Server Side Rendering, RSCs do not send corresponding JavaScript to the client as no hydration occurs. As a result, they have no access to hooks. However, they may be asynchronous function , allowing them to directly perform asynchronous operations: Currently, server components are most readily usable with Next.js . Class components are declared using ES6 classes. They behave

3816-460: The lack of JavaScript execution on crawlers of some popular Web search engines , SEO ( search engine optimization ) has historically presented a problem for public facing websites wishing to adopt the SPA model. Between 2009 and 2015, Google Webmaster Central proposed and then recommended an "AJAX crawling scheme" using an initial exclamation mark in fragment identifiers for stateful AJAX pages ( #! ). Special behavior must be implemented by

3888-569: The licensor, not the licensee, thereby violating our Apache legal policy of being a universal donor", and "are not a subset of those found in the [Apache License 2.0], and they cannot be sublicensed as [Apache License 2.0]". In August 2017, Facebook dismissed the Apache Foundation's downstream concerns and refused to reconsider their license. The following month, WordPress decided to switch its Gutenberg and Calypso projects away from React. On September 23, 2017, Facebook announced that

3960-495: The link to point directly to the intended article. Retrieved from " https://en.wikipedia.org/w/index.php?title=React&oldid=1232975010 " Category : Disambiguation pages Hidden categories: Short description is different from Wikidata All article disambiguation pages All disambiguation pages React (software) React can be used to develop single-page , mobile, or server-rendered applications with frameworks like Next.js . Because React

4032-418: The need for class components for most use cases. React 17 (released on October 20, 2020) focused on making upgrades easier and less disruptive. This version included improvements like the new JSX Transform and an updated event handling system, but it did not introduce major new features. Single-page application A single-page application ( SPA ) is a web application or website that interacts with

4104-547: The page DOM tree according to the client action that motivated the request. This approach requires that more data be sent to the server and may require more computational resources per request to partially or fully reconstruct the client page state in the server. At the same time, this approach is more easily scalable because there is no per-client page data kept in the server and, therefore, Ajax requests can be dispatched to different server nodes with no need for session data sharing or server affinity. Some SPAs may be executed from

4176-672: The patent grant in April 2015 to be less ambiguous and more permissive: The license granted hereunder will terminate, automatically and without notice, if you (or any of your subsidiaries, corporate affiliates or agents) initiate directly or indirectly, or take a direct financial interest in, any Patent Assertion: (i) against Facebook or any of its subsidiaries or corporate affiliates, (ii) against any party if such Patent Assertion arises in whole or in part from any software, technology, product or service of Facebook or any of its subsidiaries or corporate affiliates, or (iii) against any party relating to

4248-414: The process of rendering a client-side JavaScript application on the server, rather than in the browser. This can improve the performance of the application, especially for users on slower connections or devices. With SSR, the initial HTML that is sent to the client includes the fully rendered UI of the application. This allows the client's browser to display the UI immediately, rather than having to wait for

4320-502: The role of the web server evolving into a pure data API or web service. This architectural shift has, in some circles, been coined "Thin Server Architecture" to highlight that complexity has been moved from the server to the client, with the argument that this ultimately reduces overall complexity of the system. The server keeps the necessary state in memory of the client state of the page. In this way, when any request hits

4392-500: The same goals and functions in April 2002, and later the same year Lucas Birdeau, Kevin Hakman, Michael Peachey and Clifford Yeh described a single-page application implementation in US patent 8,136,109. Earlier forms were called rich web applications . JavaScript can be used in a web browser to display the user interface (UI), run application logic, and communicate with a web server. Mature free libraries are available that support

SECTION 60

#1732775958048

4464-472: The same language on the server and the client may help to increase the amount of code that can be shared. In 2018, Google introduced dynamic rendering as another option for sites wishing to offer crawlers a non-JavaScript heavy version of a page for indexing purposes. Dynamic rendering switches between a version of a page that is rendered client-side and a pre-rendered version for specific user agents. This approach involves your web server detecting crawlers (via

4536-507: The same way that function components do, but instead of using Hooks to manage state and lifecycle events, they use the lifecycle methods on the React.Component base class . The introduction of React Hooks with React 16.8 in February 2019 allowed developers to manage state and lifecycle behaviors within functional components, reducing the reliance on class components. This trend aligns with

4608-507: The section of the page which the browser navigated to. Web browser JavaScript frameworks and libraries, such as AngularJS , Ember.js , ExtJS , Knockout.js , Meteor.js , React , Vue.js , and Svelte have adopted SPA principles. Aside from ExtJS, all of these are free. As of 2006, the most prominent technique used was Ajax . Ajax involves using asynchronous requests to a server for XML or JSON data, such as with JavaScript's XMLHttpRequest or more modern fetch() (since 2017), or

4680-401: The server (usually user actions), the server sends the appropriate HTML and/or JavaScript with the concrete changes to bring the client to the new desired state (usually adding/deleting/updating a part of the client DOM). At the same time, the state in server is updated. Most of the logic is executed on the server, and HTML is usually also rendered on the server. In some ways, the server simulates

4752-410: The server and JavaScript in the client. However, merely sharing templates typically requires duplication of business logic used to choose the correct templates and populate them with data. Rendering from templates may have negative performance effects when only updating a small portion of the page—such as the value of a text input within a large template. Replacing an entire template might also disturb

4824-406: The tools some developers might consider necessary to build an application. This allows the choice of whichever libraries the developer prefers to accomplish tasks such as performing network access or local data storage. Common patterns of usage have emerged as the library matures. To support React's concept of unidirectional data flow (which might be contrasted with AngularJS 's bidirectional flow),

4896-452: The user agent) and routing them to a renderer, from which they are then served a simpler version of HTML content. As of 2024, Google no longer recommends dynamic rendering, suggesting " server-side rendering , static rendering , or hydration " instead. Because SEO compatibility is not trivial in SPAs, it is worth noting that SPAs are commonly not used in a context where search engine indexing

4968-405: The user by dynamically rewriting the current web page with new data from the web server , instead of the default method of loading entire new pages. The goal is faster transitions that make the website feel more like a native app . In a SPA, a page refresh never occurs; instead, all necessary HTML , JavaScript , and CSS code is either retrieved by the browser with a single page load, or

5040-525: Was first deployed on Facebook's News Feed in 2011 and subsequently integrated into Instagram in 2012 . In May 2013, at JSConf US, the project was officially open-sourced, marking a significant turning point in its adoption and growth. React Native , which enables native Android , iOS , and UWP development with React, was announced at Facebook's React Conf in February 2015 and open-sourced in March 2015. On April 18, 2017, Facebook announced React Fiber,

5112-447: Was released to the public, introducing React Hooks. Hooks are functions that let developers "hook into" React state and lifecycle features from function components. Notably, Hooks do not work inside classes — they let developers use more features of React without classes. React provides several built-in hooks such as useState , useContext , useReducer , useMemo and useEffect . Others are documented in

5184-478: Was released to the public. On August 10, 2020, the React team announced the first release candidate for React v17.0, notable as the first major release without major changes to the React developer-facing API. On March 29, 2022, React 18 was released which introduced a new concurrent renderer, automatic batching and support for server side rendering with Suspense. The initial public release of React in May 2013 used

#47952