freeCodeCamp/curriculum/challenges/japanese/03-front-end-development-libraries/react/define-an-html-class-in-jsx.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036160	JSX で HTML クラスを定義する	6	301393	define-an-html-class-in-jsx

--description--

JSX の記述に慣れてくると、HTML とどう違うのかと不思議に思うかもしれません。

ここまで、HTML と JSX はまったく同じもののように思えるかもしれません。

JSX の重要な違いの一つは、単語 class を使用して HTML クラスを定義することができなくなったことです。 これは、class が JavaScript で予約語となっているからです。 代わりに、JSX では className を使用します。

実際、JSX での HTML 属性とイベント参照の命名規則はすべて、キャメルケースになります。 たとえば、JSX の click イベントは onClick であり、onclick ではありません。 同様に、onchange は onChange になります。 微妙な違いですが、今後重要になりますので覚えておいてください。

--instructions--

myDiv というクラスを、JSX コードで提供された div に適用してください。

--hints--

定数 JSX から div 要素を返します。

assert.strictEqual(JSX.type, 'div');

div に myDiv というクラスを持たせます。

assert.strictEqual(JSX.props.className, 'myDiv');

--seed--

--after-user-code--

ReactDOM.render(JSX, document.getElementById('root'))

--seed-contents--

const JSX = (
  <div>
    <h1>Add a class to this div</h1>
  </div>
);

--solutions--

const JSX = (
<div className = 'myDiv'>
  <h1>Add a class to this div</h1>
</div>);