---
id: 5a24c314108439a4d4036162
title: Create a Stateless Functional Component
challengeType: 6
isRequired: false
videoUrl: ''
localeTitle: 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
```yml
tests:
- text: MyComponent debe devolver JSX.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.length === 1; })(), "MyComponent should return JSX.");'
- text: MyComponent debería devolver un elemento div .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.children().type() === "div" })(), "MyComponent should return a div element.");'
- text: El elemento div debe contener una cadena de texto.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("div").text() !== ""; })(), "The div element should contain a string of text.");'
```
## Challenge Seed
```jsx
const MyComponent = function() {
// change code below this line
// change code above this line
}
```
### After Test
```js
console.info('after the test');
```
## Solution
```js
// solution required
```