React Native#Hello World example

In 2012 Mark Zuckerberg commented, "The biggest mistake we made as a company was betting too much on HTML5 as opposed to native".{{cite web|title=Zuckerberg's Biggest Mistake? 'Betting on HTML5'|url=https://mashable.com/2012/09/11/html5-biggest-mistake|publisher=Mashable|access-date=7 April 2018}}{{Cite web|last=Zuckerberg|first=Mark|date=2012-09-12|title=Fireside Chat With Facebook Founder and CEO Mark Zuckerberg|url=https://techcrunch.com/video/fireside-chat-with-facebook-founder-and-ceo-mark-zuckerberg/|access-date=2021-08-16|website=TechCrunch|type=interview}} Using HTML5 for Facebook's mobile version resulted in an unstable application that retrieved data slowly.{{Cite web|last=Warren|first=Christina|title=Zuckerberg's Biggest Mistake? 'Betting on HTML5'|url=https://mashable.com/2012/09/11/html5-biggest-mistake/|access-date=2020-10-29|website=Mashable|language=en}} 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.{{cite web|title=A short Story about React Native|url=https://jobninja.com/blog/short-story-react-native/|access-date=16 January 2018}}

In 2015, after months of development, Facebook released the first version for the React JavaScript Configuration. During a technical talk,{{cite web|last1=Christopher|first1=Chedeau|title=A Deep Dive into React Native|url=https://www.youtube.com/watch?v=7rDsRXj9-cU|website=YouTube|access-date=16 January 2018}} Christopher Chedeau explained that Facebook was already using React Native in production for its Group App and its Ads Manager App.{{cite web|url=https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/|title=React Native: Bringing modern web techniques to mobile|date=26 March 2015}}

The working principles of React Native are virtually identical to React except that React Native does not manipulate the DOM via the Virtual DOM.{{sfn|Eisenman|2016}}{{rp|loc=§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{{sfn|Eisenman|2016}}{{rp|loc=§Chapter 2}} platform via serialized data over an asynchronous and batched bridge.{{cite web|title=Bridging in React Native|url=https://tadeuzagallo.com/blog/react-native-bridge/|access-date=16 January 2018|date=14 October 2015}}{{cite web| url=https://blog.uptech.team/how-we-build-apps-on-react-native-part-2-7-things-you-should-know-to-save-your-development-time-944533f81c03|title=How we build React Native app: 7 things which save your development time. Part 2|access-date=2019-11-06}}

React components wrap existing native code and interact with native APIs via React's declarative UI paradigm and JavaScript.{{cite web |title=How to Create a React Native Document Scanner |url=https://sdk.docutain.com/blogartikel/how-to-create-a-react-native-document-scanner |website=sdk.docutain.com |publisher=INFOSOFT |access-date=6 September 2024}} TypeScript is often used over JavaScript in modern React Native applications due to its increased type safety.{{cite web |title=Using TypeScript |url=https://reactnative.dev/docs/typescript |website=reactnative.dev |publisher=Meta Platforms, Inc. |access-date=14 July 2023}}

While React Native styling has a similar syntax to CSS, it does not use HTML or CSS.{{sfn|Eisenman|2016}}{{rp|loc=§Chapter 5}}{{cite web|title=React Native Style|url=https://reactnative.dev/docs/style|access-date=24 February 2021}} Instead, messages from the JavaScript thread are used to manipulate native views. Using plugins, Tailwind can also be used with React Native.

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

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 (

Hello world!

{count}

);

};

export default HelloWorldApp;

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

In TypeScript, a counter component looks like this:

import { Button, Text, View } from "react-native";

import React from "react";

interface CounterProps {

title: string; // Required prop

baseNumber?: number; // Optional prop

}

const Counter: React.FC = ({ title, baseNumber }) => {

const [count, setCount] = React.useState(baseNumber || 0);

const incrementCount = (): void => setCount((prevCount) => prevCount + 1);

return (

{count}

);

};

{{Portal|Free and open-source software}}

• React (JavaScript library)
• NativeScript
• Xamarin
• Titanium SDK
• Apache Cordova
• Flutter (software)
• Qt (software)
• Codename One
• Jetpack Compose

{{reflist}}

• {{cite book |last=Eisenman|first=Bonnie|title=Learning React Native |year= 2016|publisher= O'Reilly |isbn= 978-1-491-92900-1}}

{{Facebook navbox}}

Category:Cross-platform software

Category:Facebook software

Category:Mobile software development

Category:Software development

Category:Software using the MIT license