Blog

Comenzando con React - Una descripción general y un tutorial

React es una biblioteca de JavaScript para construir interfaces de usuario. Aprende de qué se trata React en este pequeño tutorial escrito por Tania Rascia y Traducido al español por el Ing. Alejandro Villegas para los lectores latinoamericanos:

He estado escuchando acerca de React desde que empecé a aprender JavaScript, pero admito que le eché un vistazo y me asusté. Vi que parecía un montón de HTML mezclado con JavaScript y pensé: ¿no es esto lo que hemos estado tratando de evitar? ¿Cuál es el problema con React?

En cambio, me centré en aprender Vainilla de JavaScript y trabajar con jQuery en un entorno profesional. Después de algunos intentos frustrados y fallidos de comenzar con React, finalmente comencé a entenderlo, y comencé a ver por qué podría querer usar React en lugar de vanilla JS o jQuery.

Traté de condensar todo lo que aprendí en una buena introducción para compartir con ustedes, así que aquí está.

Prerrequisitos:

Hay algunas cosas que debes saber antes de comenzar a jugar con React. Si nunca has usado JavaScript o el DOM en absoluto antes, por ejemplo, me familiarizaría con ellos antes de tratar de abordar React.

Aquí están lo que considero que son los requisitos previos de React:

  • Familiaridad básica con HTML y CSS.
  • Conocimientos básicos de JavaScript y programación.
  • Comprensión básica del DOM.
  • Familiaridad con la sintaxis y características de ES6.
  • Node.js y npm instalados globalmente.

Metas:

  • Aprender sobre los conceptos esenciales de React y los términos relacionados, como Babel, Webpack, JSX, componentes, accesorios, estados y ciclo de vida.
  • Crear una aplicación React muy simple que demuestre los conceptos anteriores.

¿Qué es React?

  • React es una biblioteca de JavaScript, una de las más populares, con más de 100,000 estrellas en GitHub.
  • React no es un Freamework (a diferencia de Angular, que es más criticado).
  • React es un proyecto de código abierto creado por Facebook.
  • React se utiliza para crear interfaces de usuario (IU) en el extremo frontal.
  • React es la capa de vista de una aplicación MVC (Controlador de Vista Modelo)

Uno de los aspectos más importantes de React es el hecho de que puede crear componentes, que son como elementos HTML reutilizables y personalizados, para crear interfaces de usuario de manera rápida y eficiente. React también simplifica la forma en que los datos se almacenan y manejan, utilizando el estado y las propiedades.

Repasaremos todo esto y más a lo largo del artículo, así que comencemos:

Configuración e Instalación

Hay algunas formas de configurar React, y te mostraré dos para que tengas una buena idea de cómo funciona.

Archivo HTML estático

Este primer método no es una forma popular de configurar React y no es la forma en que haremos el resto de nuestro tutorial, pero será familiar y fácil de entender si alguna vez ha utilizado una biblioteca como jQuery, y es la forma menos aterradora de comenzar si no estás familiarizado con Webpack, Babel y Node.js.

Comencemos por hacer un archivo index.html básico. Vamos a cargar tres CDN en la cabeza: React, React DOM y Babel. También vamos a hacer un div con una identificación llamada root, y finalmente crearemos una etiqueta de script donde vivirá su código personalizado.

Estoy cargando las últimas versiones estables de las bibliotecas en el momento de escribir este artículo.

React - la API de nivel superior React

React DOM - agrega métodos específicos de DOM

Babel - un compilador de JavaScript que nos permite usar ES6 + en navegadores antiguos

El punto de entrada para nuestra aplicación será el elemento de div root, que se nombra por convención. También notará el tipo de script text / babel, que es obligatorio para usar Babel.

Ahora, vamos a escribir nuestro primer bloque de código de React. Vamos a utilizar las clases de ES6 para crear un componente React llamado App.

Ahora agregaremos el método render(), el único método requerido en un componente de clase, que se utiliza para representar los nodos DOM.

Dentro de la declaración, vamos a poner lo que parece un simple elemento HTML. Ten en cuenta que no estamos devolviendo una cadena aquí, así que no uses comillas alrededor del elemento. Esto se llama JSX, y aprenderemos más sobre esto pronto.

Finalmente, vamos a utilizar el método React DOM render() para representar la clase de aplicación que creamos en el div root en nuestro HTML.

Aquí está el código completo de nuestro index.html.

Ahora, si ve su index.html en el navegador, verá la etiqueta h1 que creamos representada para el DOM.

¡Guaoo! Ahora que has hecho esto, puedes ver que React no es tan aterrador para comenzar. Son solo algunas bibliotecas de ayuda de JavaScript que podemos cargar en nuestro HTML.

Hemos hecho esto con fines de demostración, pero en el próximo artículo usaremos otro método: Create React App.

No te lo pierdas, este método es actualmente el mejor para comenzar a crear aplicaciones React. Hasta la próxima edición.

Comentarios potenciados por CComment

  • 0Clientes Satisfechos
  • 0Proyectos Culminados
  • 0Tazas de Café
  • 0Visitas
LOGIN