freeCodeCamp

3.3 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036163	Create a React Component	6	false		Crear un componente React

Description

La otra forma de definir un componente React es con la sintaxis de class ES6. En el siguiente ejemplo, Kitten extiende React.Component :

clase gatito extiende React.Component {
constructor (accesorios) {
super (accesorios);
}

render () {
regreso (
<h1> Hola </h1>
);
}
}

Esto crea un 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

3.3 KiB Raw Blame History