freeCodeCamp/curriculum/challenges/spanish/03-front-end-libraries/react/write-a-react-component-from-scratch.spanish.md

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036168	Write a React Component from Scratch	6	false		Escribir un componente React desde cero

Description

Ahora que ha aprendido los conceptos básicos de los componentes JSX y React, es hora de escribir un componente por su cuenta. Los componentes de React son los componentes básicos de las aplicaciones de React, por lo que es importante familiarizarse con su escritura. Recuerde, un componente típico de React es una class ES6 que extiende React.Component . Tiene un método de render que devuelve HTML (de JSX) o null . Esta es la forma básica de un componente React. Una vez que entienda esto bien, estará preparado para comenzar a construir proyectos React más complejos.

Instructions

Defina una clase MyComponent que amplíe React.Component . Su método de renderización debe devolver un div que contenga una etiqueta h1 con el texto: My First React Component! en eso. Use este texto exactamente, el caso y la puntuación son importantes. Asegúrese de llamar al constructor para su componente, también. Renderice este componente al DOM usando ReactDOM.render() . Hay un div con id='challenge-node' disponible para que lo uses.

Tests

tests:
  - text: Debe haber un componente React llamado <code>MyComponent</code> .
    testString: 'getUserInput => assert(getUserInput("index").replace(/\s/g, "").includes("classMyComponentextendsReact.Component{"), "There should be a React component called <code>MyComponent</code>.");'
  - text: <code>MyComponent</code> debe contener una etiqueta <code>h1</code> con el texto <code>My First React Component!</code> Caso y puntuacion.
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("h1").text() === "My First React Component!"; })(), "<code>MyComponent</code> should contain an <code>h1</code> tag with text <code>My First React Component!</code> Case and punctuation matter.");'
  - text: <code>MyComponent</code> debe renderizar al DOM.
    testString: 'assert(document.getElementById("challenge-node").childNodes.length === 1, "<code>MyComponent</code> should render to the DOM.");'

Challenge Seed

// change code below this line

Solution

// solution required