リアクトネイティブ

リアクトネイティブ

開発者	メタとコミュニティ
初回リリース	2015年3月26日; 9年前[1] (2015-03-26)
安定リリース	0.76.3 [2]  / 2024年11月21日; 11日前 (21 November 2024)
リポジトリ	github.com/facebook/react-native
書かれた	C++、Java、JavaScript、Objective-C、Kotlin
プラットフォーム	Android、Android TV、iOS、macOS、tvOS、Web、Windows、UWP、VR
タイプ	アプリケーションフレームワーク
ライセンス	MITライセンス
Webサイト	反応ネイティブ

React Nativeは、 Meta Platforms（旧Facebook Inc.）によって開発されたオープンソースの UI ソフトウェアフレームワークです。^[3] Android、^{[4] ：§第1章 [5] [6]} Android TV、^[7] iOS、^{[4] ：§第1章 [6]} macOS、^[8] tvOS、^[9] Web、^[10] Windows ^[8]、UWP ^{[11]向けのアプリケーションの開発に使用され、開発者は}Reactフレームワークをネイティブプラットフォームの機能とともに使用できるようになります。 ^[12] Facebook、Microsoft、Shopifyでは、AndroidおよびiOSアプリケーションの開発に使用されています。^{[13]また、} Oculusではバーチャルリアリティアプリケーションの開発に使用されています。^[14]

2012年にマーク・ザッカーバーグは「会社として私たちが犯した最大の過ちは、ネイティブではなくHTML5に賭けすぎたことだ」とコメントした。 ^{[15] [16]} Facebookのモバイル版にHTML5を使用した結果、データの取得が遅い不安定なアプリケーションが生まれた。^[17]彼はFacebookがすぐにより良いモバイル体験を提供すると約束した。

Facebook社内では、ジョーダン・ウォークがバックグラウンドJavaScriptスレッドからiOSのUI要素を生成する方法を発見し、それがReactウェブフレームワークの基礎となった。彼らはこの技術を使ってネイティブアプリを構築できるように、このプロトタイプを完成させるために社内ハッカソンを開催することを決めた。^[18]

2015年、数ヶ月の開発期間を経て、FacebookはReact JavaScript Configurationの最初のバージョンをリリースしました。技術講演の中で^[19] 、 Christopher Chedeauは、Facebookがグループアプリと広告マネージャーアプリですでにReact Nativeを本番環境で使用していると説明しました。^[20]

React Nativeの動作原理は、 React Nativeが仮想DOMを介してDOMを操作しないことを除けば、Reactと実質的に同一である。^{[4] : §}第2章 バックグラウンドプロセス（開発者が記述したJavaScriptを解釈する）で直接エンドデバイス上で実行され、非同期かつバッチ化されたブリッジを介してシリアル化されたデータを介してネイティブ^{[4] : §第2章}プラットフォームと通信する。^{[21] [22]}

Reactコンポーネントは既存のネイティブコードをラップし、Reactの宣言型UIパラダイムとJavaScriptを介してネイティブAPIと対話します。^[23] TypeScriptは型の安全性が向上しているため、最近のReact NativeアプリケーションではJavaScriptよりもよく使用されます。^[24]

React NativeのスタイリングはCSSに似た構文ですが、 HTMLやCSSは使用しません。^{[4] : §第5章 [25]}代わりに、JavaScriptスレッドからのメッセージを使用してネイティブビューを操作します。

React Native はWindowsとmacOSの両方で利用可能で、現在はMicrosoftによってメンテナンスされています。

React Native のHello , Worldプログラムは次のようになります。

'react-native'から{ AppRegistry 、Text 、View 、Button }をインポートします。        
'react'からReact をインポートします。   

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

  定数増分カウント= () => {     
    setCount ((前のカウント) =>前のカウント+ 1 );    
  };

  戻る（ 
    <表示>
      <テキスト>こんにちは世界！< / テキスト> 
      <テキスト> {カウント} < / テキスト>
      < Button onPress = { incrementCount } title = "カウントを増やす" />   
    < /表示>
  );
};

デフォルトのHelloWorldAppをエクスポートします。  

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

• React (JavaScript ライブラリ)
• 複数の電話のWebベースのアプリケーションフレームワーク
• ネイティブスクリプト
• ザマリン
• チタン SDK
• アパッチコルドバ
• Flutter（ソフトウェア）
• Qt (ソフトウェア)
• コードネームワン
• ジェットパックコンポーズ

• アイゼンマン、ボニー (2016) 。React Nativeを学ぶ。O'Reilly。ISBN 978-1-491-92900-1。