Aprende los fundamentos de React en 1 día.

Sejas
Sejas
Jul 8, 2018 · 6 min read

Breve introducción a la famosa librería JavaScript de Facebook.

Image for post
Image for post

En este tutorial vamos a aprender a hacer nuestra primera aplicación en React. La intención es tener una visión global de la librería para que puedas ver sus Fortalezas y debilidades, y en última instancia valores aplicarlo en tu stack de programación.

Si este tutorial te abre el apetito, y quieres profundizar más, entonces te aconsejo que me hagas follow y me dejes tu email aquí.

Virtual DOM

Antes de empezar me gustaría destacar la maravilla del Virtual Dom (VDOM). Ya que en mi opinión es la característica más destacable que otros frameworks (Angular, Vue, …) han copiado. Básicamente es una abstracción del HTML DOM donde se almacena una copia ideal o virtual de la Interfaz en memoria y se mantiene sincronizada mediante un proceso que se llama reconciliación.

Es importante destacarlo, porque gracias al VDOM react consigue:

  • Mejor rendimiento, porque solo actualiza las partes del DOM que cambian y solo cuando lo hacen. Cambiar la Interfaz de Usuario es muy costosa computacionalmente .
  • Puede renderizarse en el backend
  • Puede renderizar otras cosas diferentes a páginas HTML. Por ejemplo, aplicaciones móviles nativas.

Puesta en marcha

El mejor camino para arrancar un proyecto de React es utilizar el scaffolder oficial de facebook: create-react-app, sin embargo para nuestra primera aplicación vamos a utilizar React y JavaScript puro, sin otros sabores como webpack, ni otras herramientas.

De este modo a un index.html en blanco incluiremos los tags script necesarios:

  • React: Es la librería frontend basada en componentes que queremos aprender.
  • React Dom: React es una librería frontend agnóstica de dónde se va a renderizar. Dado que vamos a hacer webs, necesitamos apoyarnos en este paquete de React. Pero React es mucho más potente, ya que nos permite renderizar Aplicaciones Móviles Nativas con react-native y aplicaciones de Realidad Virtual con react-360 y todo esto utilizando código Javascript.
  • Babel: Nos permite utilizar el Javascript del futuro hoy. Traduce nuestros ficheros JSX en javascript plano.

Además necesitamos

  • Etiqueta div raíz dentro del que se renderizará toda nuestra aplicación
  • Etiqueta script en el que escribiremos nuestros componentes de React utilizando JSX.
index.html

Componentes

Los componentes son el factor clave de React. Es importante que lo entendamos bien, para cambiar nuestra mentalidad.

Image for post
Image for post

En vez de utilizar Servicios Singletons como en otros Frontend Frameworks, en react “Todo es un componente”.

Un componente es una pieza de código que nos permite aislar de forma independiente y reusable una parte de la Interfaz de Usuario (UI)

Así que vamos a crear nuestro primer componente que nos diga “Hola Mundo”.

Definimos nuestro componente como una clase de Javscript ES6 que extiende de . Dentro de la clase debemos definir un método que será el que defina nuestro componente, devolviendo HTML y/o otros componentes.

A la mezcla de Javscript con HTML lo llamamos JSX, aunque en realidad Babel lo traducirá todo a Javascript plano, siendo el HTML en realidad un objeto JSON.

Por último, debemos llamar a para indicar qué componente es la entrada a nuestra App y dónde debe renderizarse.

Fíjate como llamamos a nuestro componente con la etiqueta , y la etiqueta está autocerrada con el slash .

También es importante fijarse que la llamada hace referencia a nuestra etiqueta en nuestro index.html.

Y aquí puedes ver el resultado:

Image for post
Image for post
Ejemplo Hola Mundo en React: https://rawgit.com/reactspain/curso-introduccion-react/02-primer-componente/index.html

Si inspeccionas el código con el inspector, verás que el JSX se renderiza como HTML. Sin embargo si abres el código fuente de la página, verás solo el div vacío

Hasta aquí hemos aprendido a renderizar un componente. ¡Hurra! 🎉💪😎

Pero, ¿Que pasa si queremos renderizar algo más que contenido estático?

Entonces tenemos que aprender a utilizar los “parámetros” de los componentes, que se llaman Props.

Props

Las props, nos ayudarán a que nuestros componentes sean reutilizables, porque un componente podrá cambiar en función de las propiedades (props) que reciba.

El nombre Props viene de Properties = Propiedades

Todos los componentes tienen un atributo props, al cual se accede desde .

Siempre que cambien las props , se evaluará el VDOM y si existen se renderizará de nuevo el componente.

Para demostrar cómo utilizar las props, vamos a enseñar Hola + un texto que le pasemos a nuestro componente.

index.jsx

Dentro de las etiquetas JSX para volver a utilizar Javascript, necesitamos utilizar los corchetes , de este modo el texto dinámico que mostrará nuestro componente está lo conseguimos con

Para pasarle un valor, en la invocación/llamada a nuestro componente le pasamos un atributo del mismo nombre. . Dentro del atributo quien, podemos pasar strings, tipos básicos de Javascript e incluso otras variables. Eso sí, recuerda que dentro de las etiquetas JSX, para pasar un valor, tienes que utilizar .

Image for post
Image for post
Ejemplo Hola Universo React: https://rawgit.com/reactspain/curso-introduccion-react/03-props/index.html

¡Muy Bien! , ya podemos mostrar componentes con contenido dinámico.

Composición

React se basa en un modelo de composición, en el que los componentes devuelven otros componentes y el código y los datos se comparten mediante las props.

En React es mejor utilizar composición en vez de herencia

index.jsx

En este ejemplo vemos como nuestro componente App devuelve nuestro componente Hola que devuelve el H1.

State

El estado interno de los componentes nos permiten reaccionar a las interacciones con el usuario y cambiar la interfaz en consecuencia. Siempre que se cambie el estado de un componente, se evaluarán los cambios en el VDOM y si existe alguna diferencia, se renderizará (función ) de ese componente.

Para inicializar el estado, basta con asignar la propiedad correspondiente:

Vemos como es una propiedad de clase Objeto .

Siempre que queramos cambiar el valor del estado, debemos llamar al método y nunca cambiar su valor directamente.

SetState

A continuación crearemos el método , el cual cambiará el estado del componente Hola cada vez que lo invoquemos.

recibe un objecto con la parte del estado que queremos actualizar. Este método heredado de la clase React.Component, encola cambios y avisa a los componentes hijos que sean renderizados en el caso de ser necesario.

setState es el método principal para actualizar la interfaz de usuario

Utilizaremos principalmente este método para actualizar la interfaz ante las interacciones del usuario o las respuestas de las llamadas al servidor.

onClick

onClick no es un método de React, es la llamada clásica de Javascript puro. Esta es una de sus mayores ventajas, react no pone edulcorantes para trabajar con Javascript, por esto nos hará mejores desarrolladores que Angular o Vue.

Se ejecutará el método cada vez que el usuario haga click sobre el botón.

Aquí podemos ver el resultado y como cambia el emoticono cada vez que pinchamos en el botón.

Image for post
Image for post
Ejemplo onClick en React: https://rawgit.com/reactspain/curso-introduccion-react/07-onClick/index.html

¡ Felicidades !

Con esto ya has visto los fundamentos básicos de React y estás listo para probarlo y seguir aprendiendo.

Recuerda que todo el código fuente lo tienes disponible en github.

Muchas gracias por leerme. Soy Antonio Sejas, Founder de Baulen Desarrollo y JS School.

He olvidado algo importante? Te ha gustado? Estoy deseando escuchar tu feedback.

Sígueme en Twitter para más artículos @antoniosejas @jsschool_es— 🙌

JS School

Vídeos, Tutoriales, Noticias y experiencias de JavaScript.

Sejas

Written by

Sejas

Remote Software Engineer & Machine Learning Scientist — Mobile Lead Developer (React Native) @ Woonivers. Writer @ JS School - https://jsschool.es

JS School

JS School

Vídeos, Tutoriales, Noticias y experiencias de JavaScript. El lenguaje más popular para el desarrollo web. Frontend y FullStack. React, Vue, Angular, NodeJS, ES6 …

Sejas

Written by

Sejas

Remote Software Engineer & Machine Learning Scientist — Mobile Lead Developer (React Native) @ Woonivers. Writer @ JS School - https://jsschool.es

JS School

JS School

Vídeos, Tutoriales, Noticias y experiencias de JavaScript. El lenguaje más popular para el desarrollo web. Frontend y FullStack. React, Vue, Angular, NodeJS, ES6 …

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store