React Native

2012-ci ildə Mark Zukerberq, "Bir şirkət olaraq etdiyimiz ən böyük səhv, doğma dil yerinə HTML-ə fokuslanmağımız idi" dedi.^[16][17] Facebook-un mobil versiyası üçün HTML5-dən istifadə edildi, lakin proqram məlumatları çox yavaş əldə edən qeyri-sabit bir proqrama çevrildi.^[18] O, Facebook-un tezliklə daha yaxşı mobil təcrübə təqdim edəcəyinə söz verdi.

Facebook-da Cordan Uok, React freymvorku üçün əsas olan arxaplandakı JavaScript tredində iOS üçün UI elementlərini yaratmağın bir yolunu tapdı. Bu texnologiya ilə doğma proqramlar yarada bilmək üçün bu prototipi təkmilləşdirmək üçün daxili hakaton təşkil etmək qərarına gəldilər.^[19]

2015-ci ildə, aylarla davam edən işdən sonra Facebook React JavaScript Configuration-nun ilk versiyasını buraxdı. Texniki söhbət^[20] zamanı Kristofer Çedo izah etdi ki, Facebook artıq öz Qrup və Reklam Meneceri proqramında React Native istifadə edir.^[21]

React Native-in iş prinsipləri React ilə faktiki olaraq eynidir, ancaq React Native Virtual DOM vasitəsilə DOM-u dəyişdirmir.^{[22]:§Chapter 2} O, birbaşa son cihazda fon emalında işləyir, asinxron və toplu körpü üzərində ardıcıllaşdırılmış məlumatlar vasitəsilə doğma platforma^{[23]:§Chapter 2} ilə əlaqə saxlayır.^[24][25]

React komponentləri mövcud kodu əhatə edir və React-in deklarativ UI paradiqması və JavaScript vasitəsilə doğma API-lərlə qarşılıqlı əlaqə qurur. TypeScript gücləndirilmiş tip təhlükəsizliyinə görə müasir React Native proqramlarında tez-tez JavaScript-in yerinə istifadə olunur.^[26]

React Native CSS ilə oxşar sintaksisə malik olsa da, HTML və ya CSS istifadə etmir.^{[27]:§Chapter 5[28]} Bunun əvəzinə, JavaScript tredindən gələn mesajlar doğma görünüşləri göstərmək üçün istifadə olunur.

React Native həm Windows, həm də macOS üçün mövcuddur, hansı ki Microsoft tərəfindən inkişaf etdirilir.

React Native-də yazılan Hello, World! proqram nümunəsi belə görünür:

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);

• React
• NativeScript
• Xamarin
• Titanium SDK
• Apache Cordova
• Flutter
• Qt
• Codename One

• Eisenman, Bonnie. Learning React Native. O'Reilly. 2016. ISBN 978-1-491-92900-1.