JSXの使用を開始する

JSXは、Reactによって導入されたテクノロジーです。それに飛び込みましょう

JSXの概要

JSXは、Reactによって導入されたテクノロジーです。

ReactはJSXを使用しなくても完全に正常に動作しますが、コンポーネントを操作するのに理想的なテクノロジーであるため、ReactはJSXから多くのメリットを享受できます。

最初は、JSXの使用はHTMLとJavaScript(そしてあなたがCSSを見るように)。

しかし、これは真実ではありません。JSX構文を使用するときに実際に行っているのは、コンポーネントUIがどうあるべきかについての宣言型構文を記述しているためです。

そして、そのUIは文字列を使用せず、代わりにJavaScriptを使用して説明しているため、多くの優れた処理を実行できます。

JSX入門書

文字列を含むh1タグを定義する方法は次のとおりです。

const element = <h1>Hello, world!</h1>

JavaScriptとHTMLの奇妙な組み合わせのように見えますが、実際にはすべてJavaScriptです。

HTMLのように見えるのは、実際には、コンポーネントとマークアップ内でのそれらの位置を定義するための構文糖衣です。

JSX式内では、属性を非常に簡単に挿入できます。

const myId = 'test'
const element = <h1 id={myId}>Hello, world!</h1>

属性にダッシュがある場合は注意が必要です(-)代わりにcamelCase構文に変換され、次の2つの特殊なケースがあります。

  • classになりますclassName
  • forになりますhtmlFor

JavaScriptでは予約語だからです。

これは、2つのコンポーネントを1つにラップするJSXスニペットです。div鬼ごっこ:

<div>
  <BlogPostsList />
  <Sidebar />
</div>

これはHTMLよりもXMLであるため、タグは常に閉じる必要があります(XHTMLの時代を覚えていれば、これはおなじみですが、それ以降、HTML5の緩い構文が勝ちました)。この場合、自動終了タグが使用されます。

2つのコンポーネントをどのようにラップしたかに注目してくださいdiv。どうして?なぜならrender()関数は単一のノードのみを返すことができます、したがって、2人の兄弟を返したい場合は、親を追加するだけです。タグだけでなく、どのタグでもかまいませんdiv

JSXのトランスパイル

ブラウザは、JSXコードを含むJavaScriptファイルを実行できません。最初に通常のJSに変換する必要があります。

どうやって?と呼ばれるプロセスを実行することによってトランスパイル

JSXはオプションであると既に述べました。これは、すべてのJSX行で、対応するプレーンなJavaScriptの代替手段が利用可能であり、JSXがトランスパイルされるためです。

たとえば、次の2つの構成は同等です。

プレーンJS

ReactDOM.render(
  React.createElement('div', { id: 'test' },
    React.createElement('h1', null, 'A title'),
    React.createElement('p', null, 'A paragraph')
  ),
  document.getElementById('myapp')
)

JSX

ReactDOM.render(
  <div id="test">
    <h1>A title</h1>
    <p>A paragraph</p>
  </div>,
  document.getElementById('myapp')
)

この非常に基本的な例は出発点にすぎませんが、JSXを使用する場合と比較してプレーンなJS構文がどれほど複雑であるかはすでにわかります。

を実行するための最も一般的な方法を書いている時点でトランスパイル使用することですバベル、実行時のデフォルトオプションですcreate-react-app、だからあなたがそれを使うならあなたは心配する必要はありません、すべてはあなたのために内部で起こります。

使用しない場合create-react-appBabelを自分でセットアップする必要があります。

JSXのJS

JSXは、それに混合されたあらゆる種類のJavaScriptを受け入れます。

JSを追加する必要があるときはいつでも、中括弧の中に入れてください{}。たとえば、他の場所で定義されている定数値を使用する方法は次のとおりです。

const paragraph = 'A paragraph'
ReactDOM.render(
  <div id="test">
    <h1>A title</h1>
    <p>{paragraph}</p>
  </div>,
  document.getElementById('myapp')
)

これは基本的な例です。中括弧は受け入れますどれかJSコード:

const paragraph = 'A paragraph'
ReactDOM.render(
  <table>
    {rows.map((row, i) => {
      return <tr>{row.text}</tr>
    })}
  </table>,
  document.getElementById('myapp')
)

ご覧のようにJSXにネストされたJavaScript内に定義されたJSX内にJavaScriptをネストしました。あなたは必要なだけ深く行くことができます。

JSXのHTML

JSXはHTMLによく似ていますが、実際にはXML構文です。

最終的にはHTMLをレンダリングするので、HTMLでいくつかのものを定義する方法と、JSXでそれらを定義する方法のいくつかの違いを知る必要があります。

すべてのタグを閉じる必要があります

XHTMLの場合と同様に、これまでに使用したことがある場合は、すべてのタグを閉じる必要があります。これ以上は必要ありません。<br>ただし、代わりに自動終了タグを使用してください。<br />(同じことが他のタグにも当てはまります)

キャメルケースは新しい標準です

HTMLでは、大文字と小文字を区別せずに属性を見つけることができます(例:onchange)。 JSXでは、それらは同等のキャメルケースに名前が変更されています。

  • onchange=>onChange
  • onclick=>onClick
  • onsubmit=>onSubmit

classになりますclassName

JSXはJavaScriptであるため、class予約語です、書くことはできません

<p class="description">

しかし、あなたは使用する必要があります

<p className="description">

同じことが当てはまりますforこれはに翻訳されますhtmlFor

style属性はそのセマンティクスを変更します

ザ・styleHTMLの属性を使用すると、インラインスタイルを指定できます。 JSXでは、文字列を受け入れなくなりました。ReactのCSSなぜそれが非常に便利な変更であるかがわかります。

フォーム

JSXでは、フォームフィールドの定義とイベントが変更され、一貫性とユーティリティが向上しています。

JSXのフォームフォームの詳細について説明します。

ReactのCSS

JSXは、CSSを定義するための優れた方法を提供します。

HTMLインラインスタイルの経験が少しある場合は、一見したところ、インラインCSSが完全に正常であった世界に10年または15年押し戻されていることに気付くでしょう(現在は悪魔化されており、通常は「クイックフィックス」の頼みの綱です。解決)。

JSXスタイルは同じものではありません。まず、CSSプロパティを含む文字列を受け入れる代わりに、JSXを使用します。style属性はオブジェクトのみを受け入れます。これは、オブジェクトにプロパティを定義することを意味します。

var divStyle = {
  color: 'white'
}

ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode)

または

ReactDOM.render(<div style={{ color: 'white' }}>Hello World!</div>, mountNode)

JSXで記述したCSS値は、プレーンCSSとは少し異なります。

  • キーのプロパティ名はキャメルケースです
  • 値は単なる文字列です
  • 各タプルをコンマで区切ります

なぜこれがプレーンなCSS / SASS / LESSよりも好まれるのですか?

CSSは未解決の問題。創業以来、その周りの何十ものツールが上昇し、その後下降しました。 CSSの主な問題は、スコープがなく、強制されないCSSを簡単に記述できることです。したがって、「クイックフィックス」は、触れてはならない要素に影響を与える可能性があります。

JSXを使用すると、コンポーネント(Reactなどで定義)がスタイルを完全にカプセル化できます。

これは頼りになる解決策ですか?

JSXのインラインスタイルは、必要になるまで有効です。

  1. メディアクエリを書く
  2. スタイルのアニメーション
  3. 参照疑似クラス(例::hover
  4. 参照疑似要素(例:::first-letter

要するに、それらは基本をカバーしていますが、それは最終的な解決策ではありません。

JSXのフォーム

JSXは、開発者にとって物事を簡単にすることを目的として、HTMLフォームの動作にいくつかの変更を加えています。

valueそしてdefaultValue

ザ・value属性は常にフィールドの現在の値を保持します。

ザ・defaultValue属性は、フィールドの作成時に設定されたデフォルト値を保持します。

これは、通常のいくつかの奇妙な動作を解決するのに役立ちますDOM検査時の相互作用input.valueそしてinput.getAttribute('value')1つは現在の値、もう1つは元のデフォルト値を返します。

これは、textareaフィールド、例えば

<textarea>Some text</textarea>

代わりに

<textarea defaultValue={'Some text'} />

ためにselect使用する代わりにフィールド

<select>
  <option value="x" selected>
    ...
  </option>
</select>

使用する

<select defaultValue="x">
  <option value="x">...</option>
</select>

より一貫性のあるonChange

関数をに渡すonChangeフォームフィールドのイベントをサブスクライブできる属性。

それは、フィールド間でも一貫して機能しますradioselectそしてcheckbox入力フィールドはonChangeイベント。

onChange文字を入力するときにも発生しますinputまたはtextareaフィールド。

JSX自動エスケープ

XSSエクスプロイトのこれまでに存在するリスクを軽減するために、JSXは式の自動エスケープを強制します。

これは、文字列式でHTMLエンティティを使用するときに問題が発生する可能性があることを意味します。

あなたは以下を印刷することを期待します© 2020

<p>{'&copy; 2020'}</p>

しかし、そうではありません、それは印刷です&copy; 2020文字列がエスケープされているためです。

これを修正するには、エンティティを式の外に移動します。

<p>&copy; 2020</p>

または、印刷する必要のあるHTMLエンティティに対応するUnicode表現を印刷する定数を使用します。

<p>{'\u00A9 2020'}</p>

JSXの空白

JSXに空白を追加するには、次の2つのルールがあります。

Horizontal white space is trimmed to 1

同じ行の要素間に空白がある場合は、すべて1つの空白にトリミングされます。

<p>Something       becomes               this</p>

になります

<p>Something becomes this</p>

垂直方向の空白が削除されます

<p>
  Something
  becomes
  this
</p>

になります

<p>Somethingbecomesthis</p>

この問題を修正するには、次のようなスペース式を追加して、明示的に空白を追加する必要があります。

<p>
  Something
  {' '}becomes
  {' '}this
</p>

または、文字列をスペース式に埋め込むことによって:

<p>
  Something
  {' becomes '}
  this
</p>

JSXにコメントを追加する

式内の通常のJavaScriptコメントを使用して、JSXにコメントを追加できます。

<p>
  {/* a comment */}
  {
    //another comment
  }
</p>

スプレッド属性

JSXでは、一般的な操作は属性に値を割り当てることです。

手動で行う代わりに、例えば

<div>
  <BlogPost title={data.title} date={data.date} />
</div>

あなたは合格することができます

<div>
  <BlogPost {...data} />
</div>

およびのプロパティdataES6のおかげで、オブジェクトは自動的に属性として使用されますスプレッド演算子

JSXでループする方法

JSXパーシャルを生成するためにループする必要のある要素のセットがある場合は、ループを作成してから、JSXを配列に追加できます。

const elements = [] //..some array

const items = []

for (const [index, value] of elements.entries()) { items.push(<Element key={index} />) }

これで、JSXをレンダリングするときに、items中括弧で囲むことによる配列:

const elements = ['one', 'two', 'three'];

const items = []

for (const [index, value] of elements.entries()) { items.push(<li key={index}>{value}</li>) }

return ( <div> {items} </div> )

を使用して、JSXで直接同じことを行うことができますmapfor-ofループの代わりに:

const elements = ['one', 'two', 'three'];
return (
  <ul>
    {elements.map((value, index) => {
      return <li key={index}>{value}</li>
    })}
  </ul>
)

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: