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

id	title	localeTitle	challengeType	isRequired
5a24c314108439a4d4036160	Define an HTML Class in JSX	Definir una clase de HTML en JSX	6	false

Description

Ahora que se está sintiendo cómodo escribiendo JSX, puede que se esté preguntando en qué se diferencia del HTML. Hasta ahora, puede parecer que HTML y JSX son exactamente iguales. Una diferencia clave en JSX es que ya no se puede usar la class palabra para definir clases de HTML. Esto es porque la class es una palabra reservada en JavaScript. En su lugar, JSX utiliza className . De hecho, la convención de nomenclatura para todos los atributos HTML y referencias de eventos en JSX se convierte en camelCase. Por ejemplo, un evento de clic en JSX es onClick , en lugar de onclick . Del mismo modo, onchange convierte en onChange . Si bien esta es una diferencia sutil, es importante tener en cuenta seguir avanzando.

Instructions

Aplique una clase de myDiv al div provisto en el código JSX.

Tests

tests:
  - text: La constante <code>JSX</code> debe devolver un elemento <code>div</code> .
    testString: 'assert.strictEqual(JSX.type, "div", "The constant <code>JSX</code> should return a <code>div</code> element.");'
  - text: El <code>div</code> tiene una clase 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

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