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

 

 

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 Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.