3.3 KiB
3.3 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036163 | Create a React Component | 6 | false | Crear un componente React |
Description
class
ES6. En el siguiente ejemplo, Kitten
extiende React.Component
: clase gatito extiende React.Component {Esto crea un
constructor (accesorios) {
super (accesorios);
}
render () {
regreso (
<h1> Hola </h1>
);
}
}
Kitten
clase ES6 que extiende la clase React.Component
. Por lo tanto, la clase Kitten
ahora tiene acceso a muchas características útiles de React, como los enlaces locales de estado y ciclo de vida. No se preocupe si aún no está familiarizado con estos términos, se cubrirán con mayor detalle en los desafíos posteriores. También tenga en cuenta que la clase Kitten
tiene un constructor
definido dentro de él que llama a super()
. Utiliza super()
para llamar al constructor de la clase padre, en este caso React.Component
. El constructor es un método especial utilizado durante la inicialización de objetos que se crean con la palabra clave de class
. Es una práctica recomendada llamar al constructor
un componente con super
y pasarle props
a ambos. Esto asegura que el componente se inicialice correctamente. Por ahora, sepa que es estándar que se incluya este código. Pronto verás otros usos para el constructor, así como props
. Instructions
MyComponent
se define en el editor de código usando la sintaxis de clase. Termine de escribir el método de render
para que devuelva un elemento div
que contenga un h1
con el texto Hello React!
. Tests
tests:
- text: El componente React debe devolver un elemento <code>div</code> .
testString: 'assert(Enzyme.shallow(React.createElement(MyComponent)).type() === "div", "The React component should return a <code>div</code> element.");'
- text: El <code>div</code> devuelto debe representar un encabezado <code>h1</code> dentro de él.
testString: 'assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.shallow(React.createElement(MyComponent)).html()), "The returned <code>div</code> should render an <code>h1</code> header within it.");'
- text: El encabezado <code>h1</code> debe contener la cadena <code>Hello React!</code> .
testString: 'assert(Enzyme.shallow(React.createElement(MyComponent)).html() === "<div><h1>Hello React!</h1></div>", "The <code>h1</code> header should contain the string <code>Hello React!</code>.");'
Challenge Seed
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
// change code below this line
// change code above this line
}
};
After Test
console.info('after the test');
Solution
// solution required