ReactJS-JSX

Reactは、通常のJavaScriptではなくJSXをテンプレート化に使用します。使用する必要はありませんが、それに付属するいくつかの長所を次に示します。

コードをJavaScriptにコンパイルしながら最適化を実行するため、高速です。
また、タイプセーフであり、コンパイル中にほとんどのエラーをキャッチできます。 *HTMLに精通していれば、テンプレートを簡単かつ迅速に作成できます。

JSXを使用する

JSXは、ほとんどの場合、通常のHTMLのように見えます。環境設定の章ですでに使用しました。* div を返す *App.jsx のコードを見てください。

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}
export default App;

HTMLに似ていますが、JSXを使用する際に留意すべき点がいくつかあります。

ネストされた要素

さらに要素を返したい場合は、1つのコンテナ要素でラップする必要があります。 div を h1 、 h2 、および p 要素のラッパーとして使用していることに注目してください。

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p>This is the content!!!</p>
         </div>
      );
   }
}
export default App;

React JSX Wrapper

属性

通常のHTMLプロパティと属性に加えて、独自のカスタム属性を使用できます。カスタム属性を追加する場合は、 data- プレフィックスを使用する必要があります。次の例では、 data-myattribute を p 要素の属性として追加しました。

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p data-myattribute = "somevalue">This is the content!!!</p>
         </div>
      );
   }
}
export default App;

JavaScript式

JavaScript式はJSX内で使用できます。中括弧 \ {} で囲むだけです。次の例では、 2 をレンダリングします。

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{1+1}</h1>
         </div>
      );
   }
}
export default App;

React JSX Inline Javascript

JSX内で if else ステートメントを使用することはできませんが、代わりに* conditional（ternary）式を使用できます。次の例では、変数 *i は 1 に等しいため、ブラウザは true をレンダリングします。他の値に変更すると、 false をレンダリングします。

import React from 'react';

class App extends React.Component {
   render() {
      var i = 1;
      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}
export default App;

React JSX Ternary Expression

スタイリング

Reactは、インラインスタイルの使用を推奨しています。インラインスタイルを設定する場合は、 camelCase 構文を使用する必要があります。 Reactは、特定の要素の数値の後に px を自動的に追加します。次の例は、 myStyle インラインを h1 要素に追加する方法を示しています。

import React from 'react';

class App extends React.Component {
   render() {
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      }
      return (
         <div>
            <h1 style = {myStyle}>Header</h1>
         </div>
      );
   }
}
export default App;

React JSXインラインスタイル

命名規則

HTMLタグは常に*小文字*タグ名を使用しますが、Reactコンポーネントは*大文字*で始まります。

注- class および for の代わりに、XML属性名として className および htmlFor を使用する必要があります。

これはReactの公式ページで次のように説明されています-

JSXはJavaScriptであるため、 class や for などの識別子はXML属性名として推奨されません。代わりに、React DOMコンポーネントは、それぞれ className や htmlFor などのDOMプロパティ名を想定しています。

Reactjs-jsx

目次

ReactJS-JSX

JSXを使用する

App.jsx

ネストされた要素

App.jsx

属性

JavaScript式

スタイリング

コメント

命名規則