Blog

Hola a todos, hoy quiero compartir con ustedes un mini tutorial de como comenzar con ReactJs, hay varias formas de hacerlo, en este caso explicare uno de ellos.

He escuchado sobre React desde hace como 2 años, pero admito que le eché un vistazo y me asusté. Vi lo que parecía un montón de HTML mezclado con JavaScript y pensé, ¿no es esto lo que hemos estado tratando de evitar?

Después de indagar un poco me doy cuenta que es una nueva tecnología muy buena para aprender y dejar de usar Jquery entre otras librerías para centrarme más en react. Traté de condensar todo lo que aprendí en una buena introducción para compartir con ustedes, así que aquí está:

Pre-requisitos:

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

Aquí hay 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.

¿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 marco (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 empecemos.

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 la forma menos aterradora de comenzar si no está familiarizado con Webpack, Babel y Node.js.

Vamos a empezar por hacer un index.html archivo básico . Vamos a cargar tres CDN en el head- React, React DOM y Babel. También haremos una div con un id llamado root, y finalmente crearemos una script etiqueta donde vivirá su código personalizado.

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 root, elemento div, que se nombra por convención. También notará el text/babel tipo de script, 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 llamado React App.

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

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

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

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

Ahora, si ves tu index.html en el navegador, verás la h1 etiqueta que creamos renderizada para el DOM.

Ahora que has hecho esto, puedes ver que React no es tan terriblemente aterrador para empezar. Es solo algunas bibliotecas de ayuda de JavaScript que podemos cargar en nuestro HTML.

Hemos hecho esto con fines de demostración, pero a partir de aquí usaremos otro método: Crear una aplicación React.

Hasta pronto...