Entendiendo React vs React Native

Los humanos nos confundiremos con un montón de cosas. La confusión puede surgir en función de diferentes características de las cosas. La forma más común de confundirse con diferentes cosas son sus nombres.

La gente primero conocerá los nombres de algo nuevo. Ya sea otra persona, animal, producto, software, etc., buscarán con sus nombres y luego llegarán a conocer diferentes características, aplicaciones, historial, etc.,

¿Por qué se trata todo esto?

Sí, la gente a menudo se confunde con los términos (nombres) React y React Native. Si los que no son técnicos ven los nombres React y React Native, en la mayoría de los casos asumirán que Reactive Native es una extensión de React. Incluso algunos técnicos pueden pensar de la misma manera si tienen 0% de conocimiento en estas áreas.

¿Qué son esas cosas en realidad? ¿Por qué la gente a menudo se confunde con ellos y no con otros?

Reaccionar y reaccionar nativo son dos marcos. Los nombres se ven similares con una palabra adicional entre ellos. Entonces, las personas a menudo se confunden debido a sus nombres a primera vista. Si tiene la misma confusión, entonces está en el lugar correcto para desenvolver el misterio detrás de ellos.

Vamos a averiguar.

Reaccionar

React es una biblioteca de JavaScript que se utiliza para crear aplicaciones web de una sola página. Es una de las bibliotecas más populares para crear interfaces de usuario (frontend) para la web. Tal vez podamos decir que es la biblioteca más popular por ahora. Es creado y mantenido por Facebook. También se conoce como ReactJS.

Como tengo experiencia con React, puedo decir que es hermoso y fácil de aprender y construir. es una biblioteca Entonces, podemos construir lo que queramos y como queramos utilizando sus características. No hay reglas estrictas que deban seguirse al desarrollar aplicaciones con React. Entonces, tendremos libertad.

React tiene tantas características geniales. Mirémoslos.

#1. Componentes

En React, todo es un componente. Es como un componente básico de la aplicación web. Podemos formar componentes grandes combinando los componentes pequeños. Cada componente tiene su propio estado y control. Los componentes controlan la interfaz de usuario y deciden qué mostrar a los usuarios en función de su estado.

Los componentes lo son todo en React. Y son reutilizables. Escribe una vez y úsalo en todas partes.

Necesitamos escribir los componentes con sumo cuidado. Hace que las cosas sean fáciles de mantener cuando nuestra aplicación crece. Si escribimos mucho código en un solo componente, eventualmente se convertirá en una carga para nosotros. Los componentes de React deben ser pequeños y dulces. Hacen que la vida de los desarrolladores sea un paraíso y un infierno.

#2. DOM virtuales

Deberías haber visto algo como un cargador dentro de un botón. Y en las plataformas de redes sociales, el conteo de Me gusta aumenta tan pronto como lo presionas. En los primeros días de la web, teníamos que recargar todo para obtener la información. Pero, ahora un solo que necesita ser actualizado se actualizará para nosotros sin tocar otras cosas. ¿De qué se trata todo esto?

Como vemos antes, todo en React es un componente. Los navegadores mantienen la estructura DOM para los elementos de una aplicación web. Cuando una parte de la aplicación web necesita actualizarse, debemos actualizarla usando las manipulaciones DOM. React hace lo mismo de manera eficiente.

React crea un DOM virtual (copia de DOM) para todos sus componentes. Para actualizar algo en una aplicación web, React compara el DOM real con el DOM virtual. Si hay algún cambio, React activa la actualización del componente.

#3. Flujo de datos unidireccional

No podemos dividir el gran conjunto de componentes en componentes más pequeños sin flujo de datos. Tiene que haber alguna forma para el flujo de datos entre los componentes.

React nos permite pasar los datos de un componente a otro componente en una sola dirección. Los datos fluyen desde los componentes principales a los componentes secundarios. Y los componentes secundarios no pueden actualizar los datos. No hay forma de devolver los datos al componente principal ya que el flujo de datos es unidireccional.

Primero puede pensar que no fluyen datos multidireccionales. Pero, un flujo de datos de una sola dirección nos da más control sobre el flujo de datos de varias direcciones.

Visión general

Hay muchas otras funciones como JSX, representación condicional, etc.; son secundarios. Hemos visto las características principales de la biblioteca React. Cuando se trata de las aplicaciones de React, podemos construir casi cualquier tipo de aplicación web con él. La comunidad de React es enorme. Puedes encontrar muchos paquetes para trabajar con React.

reaccionar nativo

React Native es un marco de JavaScript utilizado para desarrollar aplicaciones móviles multiplataforma. También es creado y mantenido por Facebook.

La mayoría de ustedes quedarán asombrados por la declaración anterior.

¿Podemos crear aplicaciones móviles para Android e IOS con un solo framework?

Si no está siguiendo las actualizaciones en el mundo de la tecnología, entonces no hay posibilidad de que lo sepa. Sí, podemos crear aplicaciones multiplataforma (tanto Android como IOS) usando React Native. Y existen otros marcos para el desarrollo de aplicaciones multiplataforma.

React Native es uno de los más populares de su tipo. No es el más popular debido a las limitaciones de JavaScript en las aplicaciones nativas. Pero, brilla en sus áreas de desarrollo. Incluso grandes empresas como Facebook, Instagram, Flipkart, etc., lo utilizan. No significa que debas usarlo. Significa que podemos crear aplicaciones de nivel de producción multiplataforma con React Native.

He usado un grupo de palabras llamadas aplicaciones nativas en el párrafo anterior. ¿Qué son? No es un nuevo tipo de aplicación. Una aplicación nativa se crea específicamente para una plataforma específica. Aplicaciones de Android para móviles Android, aplicaciones de IOS para móviles iPhone, aplicaciones de Windows para Windows, etc.,

¿Qué pasa con Native en React Native? Al llegar a eso, React Native crea una aplicación nativa que se adapta tanto a Android como a IOS según nuestro deseo. Las aplicaciones desarrolladas con React Native son nativas al igual que Android Studio para Android y de manera similar para iOS.

Tal vez los creadores lo llamaron React Native por eso. No es un hecho.

Cuando se trata de las características de React Native, hay un montón de ellas esperándonos. Veamos algunas de las características principales de ellos.

#1. multiplataforma

Podemos crear aplicaciones móviles para Android e IOS al mismo tiempo con una única base de código. Ahorra mucho tiempo y dinero a las empresas.

#2. Recarga en caliente o en vivo

Si tiene experiencia en aplicaciones React o React Native, entonces probablemente lo sepa. Esta característica recarga toda la aplicación con nuevas actualizaciones cuando cambiamos el código. No tenemos que presionar el botón de recarga cada vez que cambiamos el código. Actualice el código y vea los cambios. Eso es todo. No tenemos que esperar nada a menos que haya un error.

Puede parecerte una característica secundaria. Pero, si viene del desarrollo de Android sin ningún marco, comprenderá el valor de esta función en React Native.

#3. Bibliotecas y comunidad de la interfaz de usuario

Hay muchos componentes nativos integrados en React Native. Podemos usarlos directamente sin ninguna configuración o instalación adicional. Los componentes nativos parecen nativos en las respectivas plataformas. La interfaz de usuario de las aplicaciones React Native coincide con la interfaz de usuario nativa de IOS y con la interfaz de usuario nativa de Android. React Native tiene componentes similares a React.

Y cuando se trata de comunidad. Es grande y sigue aumentando. Puede obtener ayuda sin ninguna dificultad de la comunidad cuando está atrapado en ella.

Visión general

Puede encontrar muchas otras características de React Native en Internet. Explórelos también si se dedica al desarrollo de aplicaciones móviles. Un desarrollador frontend también puede desarrollar aplicaciones nativas usando React Native. Facilita el desarrollo de aplicaciones móviles multiplataforma.

Reaccionar vs. reaccionar nativo

Hay algunas similitudes y diferencias entre React y React Native. Mirémoslos.

Cuando se trata de aplicaciones de React y React Native, son totalmente diferentes entre sí. Pero, cuando se trata de los principios, se ven similares. Tanto React como React Native tienen componentes. Y siguen los mismos principios en el respectivo desarrollo.

Ambos utilizan el lenguaje JavaScript para el desarrollo. Veamos una aplicación Hello, World simple en ambos.

Reaccionar

import React, { Component } from 'react';
import './App.css';
 
class App extends Component {
  render() {
    return (
      <div className="container">
        <h1>Hello, Wolrd!</h1>
      </div>
    );
  }
}
 
export default App;

reaccionar nativo

import React from 'react';
import { Text, View } from 'react-native';

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}
export default App;

Como puede ver, ambos usan el paquete React. La sintaxis es similar en ambas aplicaciones, ya que usan un marcado especial llamado JSX. Pero cuando se trata de la parte de renderizado, ambos usan cosas diferentes. React usa Virtual DOM y React Native usa Native API para la representación de la interfaz de usuario.

Existen algunos paquetes externos como Redux, MobX, etc., para la gestión de declaraciones de aplicaciones React. Los mismos paquetes también se pueden usar en las aplicaciones React Native.

Tanto React como React Native usan JavaScript. Entonces, podemos usar casi todos los paquetes de JavaScript con ambos. Esto agrega muchos paquetes a sus dos bibliotecas de paquetes.

React y React Native están relacionados entre sí. Pero, se utilizan para diferentes propósitos.

Conclusión

React y React Native son diferentes en cuanto al producto final y las plataformas de aplicación. Pero, siguen principios similares en el desarrollo de la respectiva aplicación. Si puede aprender uno de los dos marcos, React o React Native, puede acelerar el aprendizaje de otro. Sin embargo, se requiere conocimiento de React para el desarrollo de aplicaciones React Native. Pero, no es suficiente para ello. Necesitamos saber más sobre el desarrollo de aplicaciones nativas ya que el soporte es limitado en React Native.

Esperemos que eventualmente evolucione para brindar soporte completo en el futuro.

Si está buscando comenzar con el desarrollo de aplicaciones web o móviles, seleccionar React o React Native definitivamente lo beneficiará en el futuro. Pero no es obligatorio, sin embargo.

Aprender los conceptos de React es pan comido si conocer javascript. Los documentos oficiales serán un gran recurso para comenzar con React o React Native.

Feliz de saber 🙂