チャレンジ：銀行アラートにおける条件付きレンダリングの実装

課題：銀行アラートの作成

銀行口座を使ってみましょう。カードに十分な残高があるかどうかをユーザーに知らせるロジックを開発します。結果に応じて、異なるメッセージをユーザーに表示します。

課題内容：

• 2つのコンポーネント、App（親）とMessage（子）を作成。
• 親コンポーネント（App）は、moneyAvailable、price、nameのpropsを渡します。
  1. moneyAvailable - ユーザーが持っている金額；
  2. price - 支払う必要がある金額；
  3. name - ユーザー名。
• ユーザーが支払いに十分な金額を持っている場合、次のメッセージを表示：Success! The remaining amount of money for <user_name> is: <calculated_amount_of_money_left>. Thank you!。
• ユーザーが支払いに十分な金額を持っていない場合、次のメッセージを表示： Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>.

1. Reactでは、三項演算子 condition ? ... : ... を使って if...else 文のロジックを実装します。
2. 文字列を正しく構築するために、
   • プレースホルダー user_name を実際のユーザー名（name prop）に置き換えます；
   • プレースホルダー calculated_amount_of_money_left を計算した残高（moneyAvailable - price）に置き換えます；
   • プレースホルダー moneyAvailable を実際の残高（moneyAvailable prop）に置き換えます；
   • プレースホルダー price を実際の金額（price prop）に置き換えます。
3. 文字列型以外の値を代入する場合は、中括弧 {...} を使用します。