Crear un componente con React

Hace un tiempo hablábamos sobre React, una de las librerías JavaScript más populares de la actualidad. En esta ocasión aprenderemos como realizar una de sus funciones más importante: crear un componente con React.

Antes de introducirnos en el código, ¿qué necesitamos?  En primer lugar debemos agregar React y React-DOM. Lo podemos hacer vía NPM o Yarn e importando. Si deseamos, podemos probar con la opción de incorporar estas librerías vía CDN. En el siguiente link se explica como hacerlo: CDN Links. Por razones de compatibilidad, también debemos tener Babel para este ejemplo.

Ahora sí podemos centrarnos en el código. Para aprovechar las ventajas de ECMScript 6 podremos trabajar con clases para crear un componente que heredará característica de una clase padre React.Component, como podemos observar en el inicio del código:

class MiComponente extends React.Component{}
Luego, dentro del método render() escribimos el componente a crear con sintaxis JSX. En este caso es un buscador (un input de tipo search y un input del tipo button).
Con reactDOM.render() indicamos primero el nombre del componente que definimos anteriormente y luego utilizamos document.getElementById() para indicar dentro de que elemento se visualizará el resultado.

A continuación veremos el script y el resultado obtenido en el navegador:

React Componente

Vale la pena mencionar que si no trabajamos con CDN y optamos por crear nuestro proyecto con NPM, por ejemplo con npx creact-react-app, el código es similar, pero en nuestro script (por ejemplo index.js de la carpeta src) deberíamos incluir la clase completa y la línea de ReactDOM.render (líneas 13 a 21 del código).

Para aprender a crear un proyecto vía NPM podemos leer el artículo: Cómo crear un proyecto React.

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes y herramientas para Desarrollo Web y móvil en modalidad online y presencial.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

*



Encontrame en las redes sociales. Contactame.