Ejercicios prácticos con React. Carlos Santana Roldán

se dirige principalmente a desarrolladores web, y en el momento de escribirlo, se consideraron las siguientes suposiciones en relación con el lector:

      • El lector sabe cómo instalar la última versión de Node.js.

      • Es un desarrollador de tipo medio que puede entender la sintaxis de JavaScript ES6.

      • Tiene poca experiencia con las herramientas CLI y la sintaxis de Node.js.

      El libro también incluye contenido para desarrolladores de móviles (iOS y Android) y usa React Native. Si usted es un principiante debería aprender a instalar Android SDK o el simulador de iOS con Xcode.

      Descarga de los archivos con ejemplos de código

      Para la descarga de los archivos siga los siguientes pasos:

      1. Entre en www.marcombo.info.

      2. Introduzca el código REACT1.

      3. Rellene las casillas con su nombre, email y acepte la política de privacidad.

      4. Busque el código REACT1 en el listado.

      Una vez descargado el archivo, asegúrese de descomprimir o extraer la carpeta utilizando la última versión de:

      • WinRAR/7-Zip para Windows

      • Zipeg/iZip/UnRarX para Mac

      • 7-Zip/PeaZip para Linux

      Los códigos que se utilizan en el libro están también alojados en GitHub, en https://github.com/PacktPublishing/React-Cookbook. Si se produce una actualización de los códigos, estos se actualizarán en el repositorio existente en GitHub.

       Las advertencias o notas importantes se indican así.

       Los consejos y trucos se indican así.

      Contacte con nosotros

      Los comentarios de nuestros lectores son siempre bien recibidos.

      Comentarios generales. Si quiere preguntar sobre algún aspecto del libro, por favor, entre en www.marcombo.com/contacto.

      Erratas. A pesar de que se han tomado todas las precauciones para asegurar la fiabilidad del contenido, puede haber errores. Si ha encontrado algún error en el libro, le agradeceríamos que nos lo comunique. Por favor, envíe un correo a [email protected].

      Piratería. Si se encuentra con copias ilegales de nuestros trabajos en cualquiera de sus formas en Internet, le agradeceríamos que nos proporcione la dirección de la ubicación o el nombre del sitio web.

      Por favor, contacte con nosotros en [email protected] indicando el enlace al material pirateado.

      Si está interesado en convertirse en autor. Si hay un tema en el que es experto y está interesado en escribir o colaborar en la elaboración de un libro, por favor visite www.marcombo.com.

      Reseñas

      Por favor, escriba una reseña. Una vez que haya leído y utilizado este libro, ¿por qué no dejar una reseña en el sitio en el que lo compró? Los lectores potenciales podrán leer su opinión imparcial y tenerla en cuenta a la hora de decidir sobre la compra del libro. A nosotros nos permite saber lo que piensa de nuestros productos, y nuestros autores pueden ver sus comentarios sobre su libro. ¡Gracias!

      1

      Uso de React

      En este capítulo se tratarán las siguientes recetas:

      • Introducción

      • Uso de React con las últimas características de JS

      • ¿Qué hay nuevo en React?

      • Uso de React en Windows

Introducción

      React es una biblioteca JavaScript (con licencia del MIT), desarrollada por Facebook, para crear interfaces de usuario interactivas. Se utiliza para crear componentes dinámicos y reutilizables. Lo mejor de React es que se puede usar en aplicaciones del lado de cliente, del lado de servidor, en aplicaciones para móviles e incluso en aplicaciones de RV.

      En las páginas web modernas, es necesario manipular el DOM constantemente. El problema es que hacerlo a menudo puede afectar seriamente al rendimiento de la aplicación. React utiliza un DOM virtual, lo que significa que todas las actualizaciones ocurren en la memoria (esta operación es más rápida que manipular el DOM real directamente). La curva de aprendizaje de React es corta en comparación con otros frameworks de JavaScript como Angular, Vue o Backbone, principalmente porque el código de React está escrito en su mayoría en JavaScript moderno (clases, funciones flecha, plantillas de cadenas de texto, etc.) y no tiene demasiados patrones para escribir código, como son la inyección de dependencias, o un sistema de plantillas, como en Angular.

      Empresas como Airbnb, Microsoft, Netflix, Disney, Dropbox, Twitter, PayPal, Salesforce, Tesla y Uber utilizan React de forma generalizada en sus proyectos. En este libro, aprenderá a desarrollar sus aplicaciones de React de la misma forma que la utilizan estas empresas, haciendo uso de las mejores prácticas.

Uso de React empleando las últimas características de JS

      Como dije en la introducción, React está escrito principalmente en JavaScript moderno (ES6, ES7 y ES8). Si desea aprovechar las ventajas de React, hay nuevas características de JS que debe dominar para obtener los mejores resultados de las aplicaciones de React. En esta primera receta, va a tratar las características esenciales de JS para que esté preparado y pueda empezar a trabajar en su primera aplicación de React.

Cómo hacerlo...

      En esta sección, verá cómo utilizar en React las características más importantes de JS:

      1. let y const. La nueva forma de declarar variables es mediante let o const. Puede utilizar let para declarar variables que pueden cambiar sus valores pero solo en el ámbito de un bloque del programa. La diferencia entre let y var es que let es una variable en el ámbito de bloque, por lo que no puede ser global, y con var puede declarar una variable global. Por ejemplo:

      2. Para comprender de forma clara el “ámbito de bloque” va a declarar un bucle for con var y let. En primer lugar, va a utilizar var y verá su comportamiento:

      3. Si escribe el mismo código, pero con let, ocurrirá lo siguiente:

      4. Con const, puede declarar constantes, lo que significa que su valor es inalterable (excepto para matrices y objetos):

      5. Si declara una matriz con const, puede manipular los elementos de la misma (añadirlos, eliminarlos, o modificarlos):