📩 😼 🎡 React Nativeアナウンス 👨🏾‍🔧 ✋ 🚵

少し前まで、React.js に関する会議がカリフォルニア州で開催されました（この会議の報告は、YouTubeの開発者のFacebookチャンネルにすでに投稿されています）。レポートは、React.jsとそのアプリケーションの実際のさまざまな可能性に関するものでしたが、2つのレポートは新しいテクノロジーのみを提示し、ベータ版は現在、イベントに参加した開発者のみが利用できます。既にレポートをご覧になっている方は、React Nativeについて話していることをご存じでしょう。この記事では、このテクノロジーで今後私たちを待っているものの簡単な概要と、JavaScriptを使用したモバイルアプリケーションの作成に対する理解がどのように変わるかを説明します。

React Nativeとは何ですか？

それでは、React Nativeの概要と、Facebookエンジニアがこのテクノロジーを発明した目的を見てみましょう。しかしその前に、Apache Cordovaについてどう思いますか？ゆっくり？スムーズなUI-神話？ JSバインディングでWebViewを使用する方が良いですか？はい、はい、それはReact Nativeの発表前でした。次の数か月で、React.jsに基づいたfacebookからハイブリッドシステムがリリースされ、iOS / Androidシステムのネイティブ要素とのやり取りが行われることを想像してください（つまり、PhoneGapのようにWebViewを作成せず、上記のプラットフォーム）。このアプローチにより、React.jsに既に精通している開発者は、同様の方法でネイティブアプリケーションを開発できます。 React NativeはブラウザーもWebViewも使用せず、ネイティブコンポーネントの上にあるJavaScript APIのみを使用します。それがどのように機能するのかを説明しましょう：JavaScriptコード（IMHO、ほとんどの場合JSXコード）を記述し、開発対象のオペレーティングシステムのネイティブコンポーネントと連携して、React.jsの利点と使いやすさをブラウザーからモバイルアプリケーションに移行します。同じPhoneGapとは異なり、ネイティブイベントが発生すると、ストリームをブロックし、制御をJSコードに転送し、その指示を待機します（実際、このために遅延を観察できます）。ReactNativeは、JSとは別のバックグラウンドスレッドで実行し、メインスレッド、つまり非同期 JSスレッドでは、多数のコマンドがメインスレッドに収集され、特定の時点でグループリクエスト（バッチリクエスト）が送信されるため、メインプログラムの実行フローがブロックされることはありません（これが実際にどのように機能するかを見るか、まもなくFacebookグループアプリケーションをダウンロードできます） AppStoreに表示されます）。

スタイルはどうですか？

ここで、facebookはJS（X）ファイルでHTMLに似た構文の使用を停止しなかったとすぐに言わなければなりません。次の解決策は、モバイルアプリケーション内でCSSオブジェクト表記（ブラウザーで使用できる表記に類似）を使用することでした。これには、多くの否定できない利点があります。たとえば、プログラムの実行中にその場ですぐに要素の量的特性（色、厚さ、サイズなど）を計算し、コンポーネントのレベルでスタイルをカプセル化できます。次のようになります。

var styles = { textStyle: { color: 'yellow', fontSize: 14 } }; React.render(<Text style={styles.textStyle}>Test</Text>, document.body);

お気づきかもしれませんが、通常の代わりに

 <Text/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .      iOS  Android .    JSX        (    ,          JSX). 
      

        
        
        
      

     
      

        
        
        
      

         ,   React Native     "Write once, run anywhere" (  ,       ),  "Learn once, write anywhere" ( ,      ). 
      

        
        
        
      

     
      

        
        
        
      

            : 
      

        
        
        
      

     React.js Conf 2015 Keynote - Introducing React Native (  React Native) React.js Conf 2015 Keynote 2 - A Deep Dive into React Native (   React Native)

 <Text/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .      iOS  Android .    JSX        (    ,          JSX). 
      

        
        
        
      

     
      

        
        
        
      

         ,   React Native     "Write once, run anywhere" (  ,       ),  "Learn once, write anywhere" ( ,      ). 
      

        
        
        
      

     
      

        
        
        
      

            : 
      

        
        
        
      

     React.js Conf 2015 Keynote - Introducing React Native (  React Native) React.js Conf 2015 Keynote 2 - A Deep Dive into React Native (   React Native)

<Text/> . iOS Android . JSX ( , JSX). , React Native "Write once, run anywhere" ( , ), "Learn once, write anywhere" ( , ). : React.js Conf 2015 Keynote - Introducing React Native ( React Native) React.js Conf 2015 Keynote 2 - A Deep Dive into React Native ( React Native)
<Text/> . iOS Android . JSX ( , JSX). , React Native "Write once, run anywhere" ( , ), "Learn once, write anywhere" ( , ). : React.js Conf 2015 Keynote - Introducing React Native ( React Native) React.js Conf 2015 Keynote 2 - A Deep Dive into React Native ( React Native)

React Nativeアナウンス

React Nativeとは何ですか？

スタイルはどうですか？

More articles: