React Native

この記事の文章は日本語として不自然な表現、または文意がつかみづらい状態になっています。 文意をわかりやすくするよう、修正が必要とされています。（2023年3月）

React Nativeの動作原理は、React Nativeが仮想DOMを介してDOMを操作しないことを除いて、Reactとほぼ同じである。バックグラウンドプロセス（開発者によって記述されたJavaScriptを解釈する）においてエンドデバイス上で直接実行され、シリアライゼーション、非同期、およびバッチブリッジを介してネイティブプラットフォームと通信する^[13][14][15]。

Reactコンポーネントは、既存のネイティブコードをラップし、Reactの宣言的なUIパラダイムとJavaScriptを介してネイティブAPIを操作する。これにより、非ネイティブアプリ開発者であるウェブエンジニアの投入やiOSとAndroid間などでのクロスプラットフォーム開発が可能になり開発の高速化が期待される。

React NativeはHTMLを使用しない。代わりに、JavaScriptスレッドからのメッセージがネイティブビューの操作に使用される。

React NativeのHello worldプログラムの一例を以下に示す。

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

const HelloWorldApp = () => {
  return <Text>Hello world!</Text>;
}

export default HelloWorldApp;

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

次のコードで別のコンポーネントにHelloWorldAppをインポートして使うこともできる。

import HelloWorldApp from './HelloWorldApp';