React ~基礎編~ JSX

react

React学習記録

前回のReact ~基礎編~ コンポーネントでは、コンポーネントについて学習しました。今回は、JSXについて学びましょう。

JSXとは

JSX(javaScript syntax extension) は、JavaScript の拡張構文です。Reactコードを書きやすくしたり、厳格なルールの元、プログラムの実装ができます。

JSXのルール

JSXは、HTMLよりも厳しいルールが設けられています。

  • タグは必ず閉じる必要がある 「<b>…</b>」
  • / で、明示的にタグを閉じる必要がある 「<input name=”name” />」

閉じることを忘れるとシンタックスエラーになるので注意してください。

サンプルコード

言葉だけではわかりずらいと思うので、サンプルコードを書いてみましょう。

JSXを深く理解する」には、「JSXは、React.createElement(component, props, ...children) の糖衣構文にすぎません。」とあります。

つまり、複雑な構文をよりシンプルに記述できるようにしたものが、JSXというわけですね。

Babel is a JavaScript compiler」の Try It Out を押下して、先ほどindex.jsに記述したHTML文を貼り付けてみましょう。

本来、Reactとして動作させるには変換後のコードで記述しなければなりませんが、JSXで記述すると自動で変換されます。

変換後のコードを貼り付けて動かしてみましょう。

画面が表示されましたね。JSXを使わないと複雑な構文になることがわかります。

JSX内で、javaScriptを扱う

JSXの機能はまだまだあります。例えば、HTMLタグ内で、計算式を書くことができます。

関数を指定することも可能です。

JSXで条件判定

条件判定もできます。

Reactのレイアウト

最後にReactのレイアウトをみていきましょう。

コンポーネントは、1ファイルにつき、1つがよいとされています。

例えば、Helloコンポーネントを作成した場合は、Hello.jsでファイルを作成します。

Goodbyeコンポーネントの場合は、Goodbye.jsファイルを作成します。

次に、コンポーネントを読み込むトップレベルのコンポーネントであるAppを作成します。

index.html に追加したコンポーネントを記述することを忘れてはいけません。

次回

次回は、Propsについて学びましょう^^

コメントを残す