開発者ドキュメント

JSXでReact要素を作成する方法

著者は、 Creative Commons を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

このチュートリアルでは、JSXを使用して要素を記述する方法を学習します。 JSXは、 JavaScript コードでHTMLのような構文を記述できるようにする抽象化であり、標準のHTMLマークアップのように見えるReactコンポーネントを構築できるようにします。 JSXは、 React 要素のテンプレート言語であるため、Reactがアプリケーションにレンダリングするマークアップの基盤となります。

JSXではマークアップにJavaScriptも記述できるため、arrayマッピングやconditionalsの短絡評価などのJavaScript関数とメソッドを利用できます。

チュートリアルの一部として、マークアップ内のボタンのクリックイベントを直接キャプチャし、CSSクラスなどの標準HTMLと構文が完全に一致しない場合にインスタンスをキャッチします。 このチュートリアルを終了すると、さまざまなJSX機能を使用して、クリックリスナーが組み込まれている要素のリストを表示する実用的なアプリケーションができあがります。 これは、フレームワークを学習する過程で頻繁に使用するReactアプリケーションの一般的なパターンです。 また、標準のHTML要素をJavaScriptと組み合わせて、Reactがどのように小さくて再利用可能なコードを作成できるかを確認することもできます。

前提条件

モバイルバージョンを終了