freeCodeCamp

3.5 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036162	Create a Stateless Functional Component	6	false		Crear un componente funcional sin estado

Description

Los componentes son el núcleo de React. Todo en React es un componente y aquí aprenderás cómo crear uno. Hay dos formas de crear un componente React. La primera forma es usar una función de JavaScript. La definición de un componente de esta manera crea un componente funcional sin estado . El concepto de estado en una aplicación será cubierto en desafíos posteriores. Por ahora, piense en un componente sin estado como uno que puede recibir datos y procesarlos, pero no administra ni rastrea los cambios en esos datos. (Cubriremos la segunda forma de crear un componente React en el próximo desafío). Para crear un componente con una función, simplemente escriba una función de JavaScript que devuelva JSX o 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'
const DemoComponent = function () {
regreso (
<div className = '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.

Instructions

El editor de código tiene una función llamada 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

3.5 KiB Raw Blame History