freeCodeCamp

1.9 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036160	Define an HTML Class in JSX	6	false		Definir uma classe HTML no JSX

Description

Agora que você está se sentindo confortável escrevendo JSX, talvez esteja se perguntando como isso difere do HTML. Até agora, pode parecer que HTML e JSX são exatamente os mesmos. Uma diferença fundamental no JSX é que você não pode mais usar a class word para definir classes HTML. Isso ocorre porque a class é uma palavra reservada em JavaScript. Em vez disso, o JSX usa className . Na verdade, a convenção de nomenclatura para todos os atributos HTML e referências de eventos no JSX se torna camelCase. Por exemplo, um evento de clique no JSX é onClick , em vez de onclick . Da mesma forma, onchange se torna onChange . Embora esta seja uma diferença sutil, é importante ter em mente seguir em frente.

Instructions

Aplique uma classe de myDiv ao div fornecido no código JSX.

Tests

tests:
  - text: A constante <code>JSX</code> deve retornar um elemento <code>div</code> .
    testString: 'assert.strictEqual(JSX.type, "div", "The constant <code>JSX</code> should return a <code>div</code> element.");'
  - text: O <code>div</code> tem uma classe de <code>myDiv</code> .
    testString: 'assert.strictEqual(JSX.props.className, "myDiv", "The <code>div</code> has a class of <code>myDiv</code>.");'

Challenge Seed

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

After Test

console.info('after the test');

Solution

// solution required

1.9 KiB Raw Blame History