3.5 KiB
3.5 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036162 | Create a Stateless Functional Component | 6 | false | Crear un componente funcional sin estado |
Description
null
. Una cosa importante a tener en cuenta es que React requiere que el nombre de su función comience con una letra mayúscula. Aquí hay un ejemplo de un componente funcional sin estado que asigna una clase HTML en JSX: // Después de ser transpilado, el <div> tendrá una clase CSS de 'customClass'Debido a que un componente JSX representa HTML, puede juntar varios componentes para crear una página HTML más compleja. Esta es una de las ventajas clave de la arquitectura de componentes que proporciona React. Le permite componer su IU a partir de muchos componentes separados y aislados. Esto facilita la creación y el mantenimiento de interfaces de usuario complejas.
const DemoComponent = function () {
regreso (
<div className = 'customClass' />
);
};
Instructions
MyComponent
. Complete esta función para que devuelva un único elemento div
que contenga alguna cadena de texto. Nota: el texto se considera un elemento secundario del elemento div
, por lo que no podrá utilizar una etiqueta de cierre automático. Tests
tests:
- text: <code>MyComponent</code> debe devolver JSX.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.length === 1; })(), "<code>MyComponent</code> should return JSX.");'
- text: <code>MyComponent</code> debería devolver un elemento <code>div</code> .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.children().type() === "div" })(), "<code>MyComponent</code> should return a <code>div</code> element.");'
- text: El elemento <code>div</code> debe contener una cadena de texto.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("div").text() !== ""; })(), "The <code>div</code> element should contain a string of text.");'
Challenge Seed
const MyComponent = function() {
// change code below this line
// change code above this line
}
After Test
console.info('after the test');
Solution
// solution required