導入反応し、ネイティブスタイル

     リアクトネイティブ

     最初：内部のスタイルタグの使用

      

インポートは「反応」からリアクト。
クラスデモReact.Component {延び
    レンダリング（）{ 
        リターン（
              <div> 
                 < divの
                     スタイル = {{ 
                       ：幅 '100ピクセル' 、
                       高さ： '80px' 、
                       のbackgroundColor： '赤' 、
                       のfontSize： '24ピクセル' 、
                       textAlign：「センター" 
                       }}
                 >デモ</ div>の！
 
               ）。
輸出デフォルトの デモ。

図2に示すように、スタイルは、オブジェクトのように見られ、その後に導入します

      

インポートは「反応」からリアクト。

クラスデモReact.Component {延び
          レンダリング（）{ 
             せMyStyleは = { 
                 ：幅 '200pxの' 、
                 高さ： '80px' 、
                 のbackgroundColor： '黄色' 、
                 のfontSize： '24ピクセル' 、
                 textAlign： '中央' 
              } 
        リターン（
             <DIV>を
                  <divのスタイル= {MyStyleはは}>これはPage1のある</ DIV>！
            </ DIV>           ）;

デフォルトのデモ。

3、外部CSSファイルの導入

#mydiv { 
幅：200pxの。
高さ：80px; 
背景 - 色：黄色; 
フォント - サイズ：は24px; 
テキスト - 整列：センター
}

インポートは「反応」からリアクト。
（必要」./style.css'を）。

DemoクラスはReact.Componentは{拡張
         レンダリング（）{ 
            リターン（
                 の<div> 
                     <div要素のid = 'mydiv'>これはPage1のです。</ divの>！
                 </ DIV>              ）; 
         } 
   } 
輸出デフォルトのデモ。