Jump to content

React Native

From Wikipedia, the free encyclopedia
This is an old revision of this page, as edited by FaisalKarimAf (talk | contribs) at 11:43, 9 October 2024 (Added Cost Efficiency of React Native). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.
React Native
Developer(s)Meta and community
Initial releaseMarch 26, 2015; 10 years ago (2015-03-26)[1]
Stable release
0.79.1[2] Edit this on Wikidata / 15 April 2025; 41 days ago (15 April 2025)
Repositoryhttps://github.com/facebook/react-native
Written inC++, Java, JavaScript, Objective-C, Kotlin
PlatformAndroid, Android TV, iOS, macOS, tvOS, Web, Windows, UWP, and VR
TypeApplication framework
LicenseMIT License
Websitereactnative.dev

React Native is an open-source UI software framework created by Facebook Inc. (now Meta Platforms).[3] It is used to develop applications for Android,[4]: §Chapter 1 [5][6] Android TV,[7] iOS,[4]: §Chapter 1 [6] macOS,[8] tvOS,[9] Web,[10] Windows[8] and UWP[11] by enabling developers to use the React framework along with native platform capabilities.[12] It is used to develop Android and iOS applications at Facebook, Microsoft, and Shopify.[13] It is also being used to develop virtual reality applications at Oculus.[14]

History

In 2012 Mark Zuckerberg commented, "The biggest mistake we made as a company was betting too much on HTML5 as opposed to native".[15][16] Using HTML5 for Facebook's mobile version resulted in an unstable application that retrieved data slowly.[17] He promised Facebook would soon deliver a better mobile experience.

Inside Facebook, Jordan Walke found a way to generate UI elements for iOS from a background JavaScript thread, which became the basis for the React web framework. They decided to organize an internal Hackathon to perfect this prototype in order to be able to build native apps with this technology.[18]

In 2015, after months of development, Facebook released the first version for the React JavaScript Configuration. During a technical talk,[19] Christopher Chedeau explained that Facebook was already using React Native in production for its Group App and its Ads Manager App.[20]

Implementation

The working principles of React Native are virtually identical to React except that React Native does not manipulate the DOM via the Virtual DOM.[4]: §Chapter 2  It runs in a background process (which interprets the JavaScript written by the developers) directly on the end-device and communicates with the native[4]: §Chapter 2  platform via serialized data over an asynchronous and batched bridge.[21][22]

React components wrap existing native code and interact with native APIs via React's declarative UI paradigm and JavaScript.[23] TypeScript is often used over JavaScript in modern React Native applications due to its increased type safety.[24]

While React Native styling has a similar syntax to CSS, it does not use HTML or CSS.[4]: §Chapter 5 [25] Instead, messages from the JavaScript thread are used to manipulate native views.

React Native is also available for both Windows and macOS, which is currently maintained by Microsoft.

Hello World example

A Hello, World program in React Native looks like this:

import { AppRegistry, Text, View, Button } from 'react-native';
import React from 'react';

const HelloWorldApp = () => {
  const [count, setCount] = React.useState(0);

  const incrementCount = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <View>
      <Text>Hello world!</Text>
      <Text>{count}</Text>
      <Button onPress={incrementCount} title="Increase Count" />
    </View>
  );
};

export default HelloWorldApp;

AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);

Cost Efficiency of React Native

Overview

React Native is celebrated not only for its cross-platform capabilities but also for its potential to significantly reduce app development costs. This makes it an appealing choice for businesses looking to optimize their mobile development process.

1. Code Reusability

One of React Native's most significant advantages is its ability to enable developers to write a single codebase that can be deployed on both iOS and Android platforms. This reusability minimizes the need for separate teams for each platform, thus significantly lowering development costs.

2. Pre-Built Components and Libraries

The framework comes with a rich set of pre-built components and libraries, which streamline the development process. By utilizing these resources, developers can save time and reduce costs that would typically be associated with building components from scratch.

3. Accelerated Development Process

React Native enhances the speed of development through its efficient architecture. This allows businesses to launch applications more quickly, ultimately lowering costs linked to lengthy development cycles.

4. Productivity Improvements

With its developer-friendly environment, React Native improves overall productivity. Developers can achieve more in less time, contributing to reduced project costs.

5. Global Talent Pool

Utilizing React Native enables companies to tap into a global talent pool, allowing them to hire developers from regions with lower wage expectations, further driving down overall costs.

6. Case Studies

Prominent companies, such as Facebook, Instagram, and Airbnb, have reported reduced development costs and time efficiencies after adopting React Native. For instance, Airbnb indicated a 30% reduction in development time, demonstrating the framework’s cost-effectiveness in real-world applications. [26]

See also

Citations

  1. ^ "React Native: Bringing modern web techniques to mobile". 26 March 2015.
  2. ^ "Release 0.79.1". 15 April 2025. Retrieved 27 April 2025.
  3. ^ "Chapter 1. What Is React Native?". oreilly.com. O’Reilly Media, Inc. Retrieved 30 July 2020.
  4. ^ a b c d e Eisenman 2016.
  5. ^ "Android Release for React Native". 14 September 2015.
  6. ^ a b Shankland, Stephen (March 29, 2018). "Mozilla's radical open-source move helped rewrite rules of tech". CNET. Retrieved May 11, 2022.
  7. ^ "Building For TV Devices · React Native". reactnative.dev. Retrieved 2020-10-02.
  8. ^ a b "React Native for Windows + macOS · Build native Windows & macOS apps with Javascript and React". microsoft.github.io. Retrieved 2020-10-02.
  9. ^ "React Native for Apple TV". React Native for Apple TV. Retrieved 2020-10-02.
  10. ^ "React Native for Web". GitHub. Retrieved 2019-11-06.
  11. ^ Windows Apps Team (April 13, 2016). "React Native on the Universal Windows Platform". blogs.windows.com. Retrieved 2016-11-06.
  12. ^ "Out-of-Tree Platforms". reactnative.dev. Facebook, Inc. Retrieved 30 July 2020.
  13. ^ "React Native Showcase". react.native.dev. Retrieved 2023-04-04.
  14. ^ "React Native in H2 2021 · React Native". reactnative.dev. Retrieved 2021-08-20.
  15. ^ "Zuckerberg's Biggest Mistake? 'Betting on HTML5'". Mashable. Retrieved 7 April 2018.
  16. ^ Zuckerberg, Mark (2012-09-12). "Fireside Chat With Facebook Founder and CEO Mark Zuckerberg". TechCrunch (interview). Retrieved 2021-08-16.
  17. ^ Warren, Christina. "Zuckerberg's Biggest Mistake? 'Betting on HTML5'". Mashable. Retrieved 2020-10-29.
  18. ^ "A short Story about React Native". Retrieved 16 January 2018.
  19. ^ Christopher, Chedeau. "A Deep Dive into React Native". YouTube. Retrieved 16 January 2018.
  20. ^ "React Native: Bringing modern web techniques to mobile". 26 March 2015.
  21. ^ "Bridging in React Native". 14 October 2015. Retrieved 16 January 2018.
  22. ^ "How we build React Native app: 7 things which save your development time. Part 2". Retrieved 2019-11-06.
  23. ^ "How to Create a React Native Document Scanner". sdk.docutain.com. INFOSOFT. Retrieved 6 September 2024.
  24. ^ "Using TypeScript". reactnative.dev. Meta Platforms, Inc. Retrieved 14 July 2023.
  25. ^ "React Native Style". Retrieved 24 February 2021.
  26. ^ "How React Native Can Reduce Your App Development Costs". www.zetaton.com. Retrieved 2024-10-09.

References