3.5 KiB
3.5 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036162 | Create a Stateless Functional Component | 6 | false | Criar um componente funcional sem estado |
Description
null
. Uma coisa importante a notar é que React requer que o nome da sua função comece com uma letra maiúscula. Aqui está um exemplo de um componente funcional sem estado que atribui uma classe HTML no JSX: // Depois de ser transpilado, o <div> terá uma classe CSS de 'customClass'Como um componente JSX representa o HTML, você pode colocar vários componentes juntos para criar uma página HTML mais complexa. Essa é uma das principais vantagens da arquitetura de componentes que o React fornece. Ele permite que você componha sua interface do usuário de vários componentes separados e isolados. Isso facilita a criação e manutenção de interfaces de usuário complexas.
const DemoComponent = function () {
Retorna (
<div className = 'customClass' />
);
};
Instructions
MyComponent
. Complete esta função para que ela retorne um único elemento div
que contenha alguma cadeia de texto. Nota: O texto é considerado um filho do elemento div
, portanto, você não poderá usar uma tag de fechamento automático. Tests
tests:
- text: <code>MyComponent</code> deve retornar o 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> deve retornar um 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: O elemento <code>div</code> deve conter uma string 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