He estado trabajando con React y React-Native durante los últimos meses. Ya lancé dos aplicaciones en producción, Kiven Aa (React) y Pollen Chat (React Native). Cuando comencé a aprender React, estaba buscando algo (un blog, un video, un curso, lo que sea) que no solo me enseñara a escribir aplicaciones en React. También quería que me preparara para las entrevistas.

La mayor parte del material que encontré, se concentró en uno u otro. Entonces, esta publicación está dirigida a la audiencia que busca una combinación perfecta de teoría y práctica. Te daré un poco de teoría para que comprendas lo que está sucediendo bajo el capó y luego te mostraré cómo escribir código React.js.

Si prefieres el video, también tengo este curso completo en YouTube. Por favor, compruébalo.

Vamos a sumergirnos ...

React.js es una biblioteca de JavaScript para crear interfaces de usuario

Puede crear todo tipo de aplicaciones de una sola página. Por ejemplo, mensajeros de chat y portales de comercio electrónico donde desea mostrar cambios en la interfaz de usuario en tiempo real.

Todo es un componente

Una aplicación React se compone de componentes, muchos de ellos , anidados entre sí. “Pero, ¿qué son los componentes?”, Te preguntarás.

Un componente es un fragmento de código reutilizable, que define cómo deben verse y comportarse determinadas funciones en la interfaz de usuario. Por ejemplo, un botón es un componente.

Veamos la siguiente calculadora, que ves en Google cuando intentas calcular algo como 2 + 2 = 4 –1 = 3 (¡matemáticas rápidas!)

Como puede ver en la imagen de arriba, la calculadora tiene muchas áreas, como la ventana de visualización de resultados y el teclado numérico . Todos estos pueden ser componentes separados o un componente gigante. Depende de lo cómodo que uno se sienta descomponiendo y abstrayendo cosas en React

Escribe el código para todos estos componentes por separado. Luego, combine los que están debajo de un contenedor, que a su vez es un componente de React en sí mismo. De esta manera, puede crear componentes reutilizables y su aplicación final será una colección de componentes separados que trabajarán juntos.

La siguiente es una de las formas en que puede escribir la calculadora, que se muestra arriba, en React:

¡Si! Parece un código HTML, pero no lo es. Exploraremos más sobre esto en las secciones posteriores.

Configurar nuestro patio de juegos

Este tutorial se centra en los fundamentos de React. No está dirigido principalmente a React for Web o React Native (para crear aplicaciones móviles). Por lo tanto, usaremos un editor en línea para evitar configuraciones específicas nativas o web antes incluso de aprender lo que puede hacer React.

Ya configuré un entorno para ti en codepen.io. Simplemente siga el enlace y lea todos los comentarios en las pestañas HTML y JavaScript (JS).

Control de componentes

Hemos aprendido que una aplicación React es una colección de varios componentes, estructurados como un árbol anidado. Por lo tanto, necesitamos algún tipo de mecanismo para pasar datos de un componente a otro.

Ingrese "accesorios"

Podemos pasar datos arbitrarios a nuestro componente usando un propsobjeto. Cada componente de React obtiene este propsobjeto.

Antes de aprender a utilizar este propsobjeto, aprendamos sobre los componentes funcionales.

a) Componente funcional

Un componente funcional en React consume datos arbitrarios que le pasas usando propsobject. Devuelve un objeto que describe lo que debería representar UI React. Los componentes funcionales también se conocen como componentes sin estado.

Escribamos nuestro primer componente funcional:

Es así de simple. Simplemente pasamos propscomo argumento a una función de JavaScript simple y devolvimos, umm, bueno, ¿qué fue eso? Esa {props.name}i v> cosa! Es JSX (JavaScript extendido). Aprenderemos más sobre esto en una sección posterior.

Esta función anterior mostrará el siguiente HTML en el navegador:

Lea la sección a continuación sobre JSX, donde he explicado cómo obtenemos este HTML de nuestro código JSX.

¿Cómo puede utilizar este componente funcional en su aplicación React? ¡Me alegro de que lo hayas preguntado! Es tan simple como lo siguiente:

El atributo nameen el código anterior se convierte props.nameen nuestro Hello componente. El atributo se ageconvierte en props.agey así sucesivamente.

¡Recuerda! Puede anidar un componente de React dentro de otros componentes de React.

HelloUsemos este componente en nuestro patio de juegos de codepen. Reemplace el divinterior ReactDOM.render()con nuestro Hellocomponente, de la siguiente manera, y vea los cambios en la ventana inferior.

Pero, ¿y si su componente tiene algún estado interno? Por ejemplo, como el siguiente componente del contador, que tiene una variable de conteo interna, que cambia al presionar las teclas + y -.

b) Componente basado en clases

El componente basado en clases tiene una propiedad adicional state, que puede utilizar para almacenar los datos privados de un componente. Podemos reescribir nuestro Hellocomponente usando la notación de clase de la siguiente manera. Dado que estos componentes tienen un estado, también se conocen como componentes con estado .

Extendemos la React.Componentclase de biblioteca React para hacer componentes basados ​​en clases en React. Obtenga más información sobre las clases de JavaScript aquí.

El render()método debe estar presente en su clase, ya que React busca este método para saber qué interfaz de usuario debe mostrar en la pantalla.

Para utilizar este tipo de estado interno, primero tenemos que inicializar el stateobjeto en el constructor de la clase del componente, de la siguiente manera.

De manera similar, propsse puede acceder a dentro de nuestro componente basado en clases usando this.propsobject.

Para establecer el estado, usa React.Component's setState(). Veremos un ejemplo de esto, en la última parte de este tutorial.

Consejo: Nunca llame a la función setState()interna render(), ya que setState()hace que el componente se vuelva a renderizar y esto resultará en un bucle sin fin.

Además state, un componente basado en clases tiene algunos métodos de ciclo de vida como componentWillMount().Estos que puede usar para hacer cosas, como inicializar state y todo, pero eso está fuera del alcance de esta publicación.

JSX

JSX es una forma corta de JavaScript Extended y es una forma de escribir React componentes. Usando JSX, obtiene todo el poder de JavaScript dentro de las etiquetas XML.

Pones expresiones de JavaScript dentro {}. Los siguientes son algunos ejemplos válidos de JSX.

La forma en que funciona es escribir JSX para describir cómo debería verse su interfaz de usuario. Un transpiler como Babelconvierte ese código en un montón de React.createElement()llamadas. La biblioteca React luego usa esas React.createElement()llamadas para construir una estructura en forma de árbol de elementos DOM (en el caso de React para Web) o vistas nativas (en el caso de React Native) y la mantiene en la memoria.

React luego calcula cómo puede imitar efectivamente este árbol en la memoria de la interfaz de usuario que se muestra al usuario. Este proceso se conoce como reconciliación. Una vez realizado ese cálculo, React realiza los cambios en la interfaz de usuario real en la pantalla.

Puede usar el REPL en línea de Babel para ver lo que realmente produce React cuando escribe algo de JSX.

Dado que JSX es solo un azúcar sintáctico sobre React.createElement()llamadas simples , React se puede usar sin JSX

Ahora tenemos todos los conceptos en su lugar, por lo que estamos bien posicionados para escribir un countercomponente que vimos anteriormente como GIF.

El código es el siguiente y espero que ya sepa cómo renderizarlo en nuestro patio de juegos.

Los siguientes son algunos puntos destacados sobre el código anterior.

1. JSX usa, por lo camelCasingtanto button, el atributo es onClick, no onclick, como usamos en HTML.
2. El enlace es necesario para thistrabajar en devoluciones de llamada. Vea la línea # 8 y 9 en el código anterior.

El código interactivo final se encuentra aquí.

Con eso, llegamos a la conclusión de nuestro curso intensivo de React. Espero haber arrojado algo de luz sobre cómo funciona React y cómo puedes usar React para crear aplicaciones más grandes, utilizando componentes más pequeños y reutilizables.

Si tienes alguna consulta o duda, contáctame en Twitter @ rajat1saxena o escríbeme a [email protected]

Recomiende esta publicación, si le gustó, y compártala con su red. Sígueme para obtener más publicaciones relacionadas con la tecnología y considera suscribirte a mi canal Rayn Studios en YouTube. Muchas gracias.