JSX に反応する

React は通常の JavaScript の代わりに JSX を使用します。

JSX は、XML によく似た JavaScript 構文拡張機能です。

必ずしも JSX を使用する必要はありませんが、次のような利点があります:

JSX は JavaScript コードにコンパイルされた後に最適化されるため、より高速に実行されます。
これはタイプセーフであり、コンパイルプロセス中にエラーが見つかる可能性があります。
JSX を使用してテンプレートを作成する方が簡単かつ高速です。

JSX を使用します

JSX は HTML に似ています。例を見てみましょう:

ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);

上記のコードでは複数の HTML タグをネストできます。div 要素、p 要素でそれをラップする必要があります。例カスタム属性 data-myattribute を追加するには、data- プレフィックスを使用する必要があります。

インスタンス

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
      	<h1>php中文网</h1>
      	<h2>欢迎学习 React</h2>
        <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

独立したファイル

React JSX コードは独立したファイルに配置できます。たとえば、 helloworld_react.js ファイルのコードは次のとおりです:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

次に、HTML ファイルに JS ファイルを導入します:

Instance

Run Instance»
[Run Instance] ボタンをクリックしてオンライン例を表示します。

JavaScript 式

JSX では JavaScript 式を使用できます。式は中括弧

{}

で記述されます。例は次のとおりです。

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
  <script type="text/babel" src="helloworld_react.js"></script>
  </body>
</html>

Run Example»
オンラインの例を表示するには、[Run Example] ボタンをクリックしてください

if else

ステートメントは JSX では使用できません。 条件付き(三項演算)を使用して置き換えることができます)式。次の例では、変数 i が 1 に等しい場合、ブラウザは true を出力します。i の値が変更されると、オンラインインスタンスを表示するための false ボタンが出力されます。

スタイル

React はインラインスタイルの使用を推奨します。

camelCase

構文を使用してインラインスタイルを設定できます。React は要素番号を指定した後、自動的に
px を追加します。次の例は、myStyle

インラインスタイルを

要素に追加する方法を示しています。
インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

コメントは中括弧で記述する必要があります。例は次のとおりです:

インスタンス

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
      	  <h1>{1+1}</h1>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

配列

JSXではテンプレートに配列を挿入でき、配列はすべてのメンバーを自動的に展開します:

インスタンス

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
	  var i = 1;
      ReactDOM.render(
      	<div>
      	  <h1>{i == 1 ? 'True!' : 'False'}</h1>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

インスタンスの実行»

[インスタンスの実行] をクリックしますボタンをクリックしてオンラインの例を表示します

HTML タグと React コンポーネント

React は、HTML タグ (文字列) または React コンポーネント (クラス) をレンダリングできます。

HTML タグをレンダリングするには、JSX で小文字のタグ名を使用するだけです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      };
      ReactDOM.render(
      	<h1 style = {myStyle}>php中文网</h1>,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

React コンポーネントをレンダリングするには、大文字で始まるローカル変数を作成するだけです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
            <h1>php中文网</h1>
            {/*注释...*/}
         </div>,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

React の JSX は、大文字と小文字の規則を使用して、ローカルコンポーネントクラスと HTML タグを区別します。

注:
JSX は JavaScript であるため、class 和 for のような一部の識別子は XML として推奨されませんプロパティ名。代わりに、React DOM は対応するプロパティに className 和 htmlFor を使用します。

JSX に反応する

JSX を使用します

インスタンス

独立したファイル

Instance

JSX では JavaScript 式を使用できます。式は中括弧

コメント

インスタンス

配列

インスタンス

HTML タグと React コンポーネント

PHP中国語ウェブサイト