¿Qué es React?

React es una biblioteca de JavaScript para la construcción de interfaces de usuario. React es una herramienta popular y fácil de aprender, diseñada para funcionar en cualquier lugar.

Con algunos conocimientos básicos de desarrollo web, como JavaScript, HMTL y CSS, puedes crear interfaces de usuario de aspecto profesional de forma rápida y sencilla.

Hoy, te ayudaremos a empezar con React comparando las aplicaciones nativas e híbridas y explorando algunas sintaxis básicas.

Introducción al desarrollo de aplicaciones web

Las aplicaciones web son software desarrollado para mostrar páginas web en un navegador. La tecnología más básica es JavaScript, HTML y CSS. Aquí hay un rápido desglose de cómo se utilizan estas tres tecnologías:

La pila tecnológica básica de las aplicaciones web es

• HTML : DOM - Modelo de Objetos del Documento y para la estructura de la página web
• CSS: Para el estilo
• JavaScript: Para programar, al igual que para la obtención de datos de un servidor, procesamiento de entradas y generación de salidas.
  Las páginas web son servidas por un servidor y luego modificadas por el navegador mediante JavaScript.

via GIPHY

Estas pilas tecnológicas que los desarrolladores utilizan para crear aplicaciones web suelen denominarse marcos web o marcos de aplicaciones web. React.js es un marco moderno para JavaScript. Añadir React a la pila básica de HTML/CSS/JavaScript hace que sea mucho más fácil crear interfaces de usuario más robustas.

En el desarrollo de aplicaciones web, como desarrollador tienes que preocuparte de:

• La compatibilidad del navegador
• Las extensiones
• Velocidad
• Seguridad
• Protocolos web - HTTP
• Reglas de la arquitectura del navegador
  Dentro de tu aplicación web, también tendrá niveles que se explican a continuación.

Niveles de la aplicación web
Para este rápido resumen, asumiremos una arquitectura de 3 niveles: navegador, motor y base de datos.

¿Qué son los niveles?

Las aplicaciones se segmentan en trozos lógicos llamados niveles. La aplicación de tres niveles es la estructura más común - es lo que está diagramado arriba. React es una librería que se ocupa del nivel del navegador web, ya que React es una librería para crear UIs. Así es como la aplicación web utiliza la arquitectura de tres niveles para actualizar una página web:

Aplicaciones nativas

El ejemplo más fácil de aplicaciones nativas para entender cuando eres nuevo en el desarrollo de software son las aplicaciones móviles para tu teléfono celular. Las aplicaciones móviles son las que usas en tu teléfono todos los días, como Instagram o Spotify.

Las aplicaciones móviles tienen dos estilos de desarrollo:

• Nativa:  se construye para un Sistema Operativo (SO) específico
• Híbrida: Creada para ejecutarse en cualquier lugar

¿Qué es el desarrollo de aplicaciones nativas?

Para abreviar: El desarrollo de aplicaciones nativas suele ser la creación de aplicaciones para iPhone o teléfonos Android.

El desarrollo de aplicaciones nativas es la creación de programas de software que se ejecutan en dispositivos y plataformas específicas. Se pueden crear aplicaciones nativas para ordenadores de mesa, televisores inteligentes y todo tipo de aparatos.

Los teléfonos inteligentes son las plataformas de desarrollo de aplicaciones móviles nativas más populares.

Las empresas crean sistemas operativos para que los desarrolladores creen aplicaciones para sus dispositivos, lo que permite a los desarrolladores acceder a las herramientas y funciones de ese dispositivo, como la cámara de un teléfono. En concreto, los dos sistemas operativos móviles más populares son:

• Android de Google
• iOS de Apple

Las aplicaciones móviles nativas no se ejecutan en el navegador, a diferencia de las aplicaciones web que se crean para los navegadores. Como usuario, se descargan las aplicaciones móviles nativas de las tiendas específicas de la plataforma, como la App Store de Apple o Google Play.

Esto significa que, como desarrollador que crea aplicaciones nativas, no tienes que preocuparte por la compatibilidad del navegador, pero sí por la compatibilidad del sistema operativo de tu aplicación nativa.

El gran beneficio de las aplicaciones nativas es el acceso gratuito a las herramientas y características de ese sistema operativo.

Ventajas del desarrollo de aplicaciones nativas

• Utilizar las características y herramientas del dispositivo: Ejemplo: La cámara del teléfono.
• Más rápido: Las aplicaciones nativas están optimizadas para ese sistema operativo específico, ese dispositivo específico.
• Cumple con los requisitos: Las aplicaciones nativas se crean teniendo en cuenta los requisitos de seguridad y programación del sistema operativo nativo. Por lo tanto, es menos probable que las aplicaciones nativas se rompan cuando el fabricante del sistema operativo saca una actualización porque presumiblemente, los desarrolladores nativos han construido a las especificaciones y fortalezas de ese sistema operativo.
• Asegura: Pueden utilizar funciones de seguridad integradas para verificar que un usuario ha iniciado sesión, por ejemplo, el Face ID en un iPhone.
  Las aplicaciones nativas a menudo pueden acceder al método de autenticación de 2 factores de los dispositivos, como recibir un código por mensaje de texto en el teléfono y hacer que el código se rellene automáticamente en la aplicación.

Aplicaciones híbridas

Las aplicaciones híbridas están diseñadas para funcionar en cualquier lugar. Las aplicaciones híbridas funcionan como aplicaciones web y aplicaciones móviles nativas.

Las aplicaciones híbridas se desarrollan para ser compatibles con diferentes navegadores y sistemas operativos.

Las aplicaciones híbridas se construyen utilizando tecnologías web: HTML, CSS y JavaScript, pero el desarrollador tiene que ser muy cuidadoso a la hora de seleccionar una de estas tecnologías por encima de eso.

Muchas características de diferentes bibliotecas de código o herramientas sólo funcionan con determinados navegadores o sistemas operativos.

La versatilidad de la plataforma de React la convierte en una de las favoritas para eludir estos problemas.

Las aplicaciones híbridas son:

• Portátiles
• Desarrollo sencillo
• Se ejecutan en diferentes navegadores y sistemas operativos

¿Cuáles son las desventajas de las aplicaciones híbridas?

via GIPHY

Pérdida de velocidad: Las aplicaciones nativas están optimizadas para ese sistema operativo específico. Las aplicaciones híbridas tienen que ser diseñadas para funcionar en todas partes.
Herramientas tecnológicas limitadas

Hay muchos lenguajes, bibliotecas de código y paquetes para situaciones específicas que no funcionan en todas partes. Como desarrollador, tienes que ser muy cuidadoso a la hora de elegir un techstack cuando diseñas un híbrido.
Duplicación/complicación del código

Algunas cosas en tu aplicación tienen que ser escritas para manejar diferentes casos en los navegadores frente a los sistemas operativos nativos
Pérdida de potentes funciones

Hay grandes características en tu smartphone, como la cámara. Mi iPhone tiene fotos en directo, filtros y panorámicas. Al codificar una aplicación híbrida tienes que rebajar un poco el diseño para asegurarte de que es compatible en todas partes.

React como etiqueta de script

Aquí hay un 101 para construir un botón usando React.

1. Añade un título en HTML

• La legibilidad es una parte importante de un buen código, así que pon un título.

<h> React component Example <br>
Button<br><br></h>

2. Añadir un container DOM a la página web HTML dentro del cuerpo
<body></body>

• Dentro del cuerpo, añade <div id="click_button_container"></div>

Nota: Puede haber varios container DOM en el HTML.
Los containers DOM actúan independientemente de otros containers, pero normalmente para las aplicaciones centradas en React, sólo hay un contenedor DOM. Los containers están vacíos: React reemplaza el contenido existente dentro de los containers DOM.

<h> React component Example <br>
Button<br><br></h>

<body>
    <div id=" click_button_container"></div>
    <!-- Load React. -->
    <script src="http://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="http://unpkg.com/react@16/umd/react-dom.development.js" crossorigin></script>
    <!-- Load React - button created in JS -->
     <script src="click_button.js"></script>
</body>
    

3. Script Tags

• Añade 3 etiquetas de script después del container DOM, justo antes de la etiqueta final </body>.
• Estas etiquetas cargan React, y luego cargan el código del componente

4. Crear un componente React en JavaScript

• El código JavaScript define el componente React
• En la sección de JavaScript de nuestro código base, introduce el siguiente código:

const e = React.createElement; 

class ClickButton extends React.Component {
    constructor(props) {
        super(props); 
        this.state = { clicked: false };
    }
render() {
    if (this.state.clicked) {
        return "You clicked this.";
    }
    return e(
        "button",
        { onclick: () => this.setState({ clicked: true })},
        "click here"
    );
}
} 

5. El código que has introducido:

• Crea un nuevo elemento React
• Crea una clase llamada ClickButton que extiende React.Component

El botón clic inicializa una variable de estado llamada "clicked" false

6. Ahora tenemos la estructura definida en HTML, el vacío click_button_container.

HTML root node está listo para que algo lo rellene. También tenemos el nodo ClickButton en JavaScript definiendo la lógica de nuestro componente de botón. El siguiente paso, es render() el ClickButton y el click_button_container.

Añade este código al final del archivo JavaScript, que hará que el ClickButton y el click_button_container.

const domContainer = document.querySelector('#click_button_container'); 
ReactDOM.render(e(ClickButton), domContainer); 

Ahora puedes ver el "Botón de clic" en el lado derecho. Sigue adelante y haz clic en eso y ve lo que sucede.

¡Has creado un componente React! ¡Enhorabuena! Hay mucho más que aprender sobre React. A continuación tenemos algunas explicaciones sobre la sintaxis del código que has creado.

Sintaxis de React

Hay mucho más sobre la sintaxis de React en la página de React, pero vamos a repasar los fundamentos básicos del botón que acabamos de construir:

• React está basado en componentes
• Elementos
• Método Render()
• Componente con estado

Basado en componentes

React está basado en componentes. ¿Qué son los componentes? Los componentes son pequeñas piezas aisladas de código que el desarrollador utiliza para construir UIs. Lo mejor de los componentes es que son reutilizables.

Ejemplos de componentes React:

• Botón que acabamos de construir
  ¿Qué hacen los componentes React?
• Toma props
• Propiedades, parámetros pasados al componente
• Devuelve la visualización
• Jerarquía de vistas a través del método render()

Elementos

Los elementos son una descripción ligera de lo que hay que renderizar. Los elementos son nuestro primer bloque de construcción para aprender la sintaxis de React - los elementos describen lo que se ve en la pantalla.

A partir de nuestro ejemplo de código, así es como React interactúa desde la creación de un elemento en JavaScript, la creación de un nodo DOM raíz en HTML, y el uso del método render() para poner la lógica del elemento a mostrar en la página web.

¿Qué es render?

El método render() devuelve una descripción de lo que se debe mostrar en la pantalla.

Render() devuelve un elemento React - recuerda que un elemento React es una descripción ligera de lo que debe renderizar().

Componente de estado

¿Cómo sabe el navegador cuándo debe volver a renderizar una página? Cuando el estado del componente cambia. Un componente mantiene datos de estado internos (this.state) como se ve en nuestro  ClickButton clase de ejemplo donde this.state = { clicked: false }.

Cuando this.state cambia, el método render() se reinvoca, y la marca renderizada se actualiza con la información más reciente. En nuestro ejemplo, cuando this.state.clicked cambia a True, el botón desaparece, y en su lugar se muestra un método "You clicked this".

Próximos pasos
¡Enhorabuena! Has superado una introducción a React. Hay más cosas que aprender. Los siguientes pasos incluyen:

• JSX
• Cadenas de herramientas
• Estado vs. Props
• Los props son inmutables
• API de componentes
• Formularios
• Eventos