問題一覧に戻る
初級JSX基礎
問題3: JSXの属性設定

JSXで要素に属性を設定する方法を学びます。ReactではHTMLのclass属性はclassNameとなり、style属性はオブジェクトで指定するなど、いくつかの違いがあります。

function Card() {
  const buttonStyle = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px 20px'
  };
  
  return (
    {/* CSSクラスを適用 */}
    <div ="card-container">
      <h2>Welcome Card</h2>
      {/* インラインスタイルを適用 */}
      <button ={buttonStyle}>
        Click Me
      </button>
      <img 
        src="/logo.png" 
        {/* 画像の代替テキストを設定 */}
        ="React Logo"
      />
    </div>
  );
}

export default Card;
···