JSXとは
JSX とはなんでしょうか。JSX とは、JavaScript + XML の略で、JavaScript の拡張構文です。UI がどのような見た目かを記述するために、React で JSX を使用することは必須と言って良いでしょう。基本的な形式は、
function コンポーネント名(引数) {
/*
JavaScript
*/
return (
HTML文
)
}
となります。
それでは、簡単な JSX 構文のプログラムを作成してみましょう。プロジェクト名は jsx としましょう。
ターミナルを立ち上げ、react フォルダに戻ります。ここで、\react> npx create-react-app jsx でプロジェクトを作成します。しばらく、コーヒータイムです。
VSCode で、「フォルダを開く」で jsx フォルダを選択して開きます。下記の画面になります。（publicフォルダと、srcフォルダは展開しました）
ここで App.js を開きます。
これが、JSX の雛型です。
コンポーネントを作成します。（6～8行目、呼び出しは25行目）
結果は、
の様に、’Hello!!’ がコンソールに表示されました。
props を使用して引数をコンポーネントに渡す
次の様に、プログラムを変更します。（6 及び 25行目）
props というオブジェクトで引数を受け取っています。25行目で name='Hello!!' を渡していますので、受け側は、props.name という形でそのデータを受け取ることができます。props に渡す変数は、文字列、数字、関数、コンポーネント、オブジェクト何でも引き渡すことが可能です。複数の引数を渡したい場合には、下記の様に呼び出し側をスペースで区切ってください。
一点注意ですが、props は親コンポーネントから、子コンポーネントへ渡される引数であり、逆はありません。また、props という名称は、特に決まった名称ではなく、hikisuu でも hennsuu でも何でも構いませんが、ただ、React では props という名称を使うことが慣例となっていますので、可読性を考慮した場合、props を使用することが良いでしょう（なお、props は properties の略で、財産、資産という意味です）。
また、今更になりますがコンポーネントの名称の頭文字は必ず大文字にして下さい。<hello /> では認識されません。function hello() も同様です。
