¿Cuál es la diferencia entre React Native y React?

Introducción básica de React o ReactJS: es una biblioteca Javascript de código abierto creada por Facebook para un mejor desarrollo de la interfaz de usuario y una manipulación eficiente del DOM. React tiene un concepto DOM virtual. Cuando se recibe cualquier dato del servidor, este DOM virtual se ha modificado en consecuencia, luego este DOM virtual actualizado se compara con el DOM real mediante algún algoritmo y solo se actualiza la parte de DOM real que es diferente de Virtual Dom.

ReaccionarJS

  1. React se utiliza para crear sitios web, aplicaciones web, SPA, etc.
  2. React es una biblioteca de Javascript utilizada para crear una jerarquía de interfaz de usuario.
  3. Es responsable de la representación de los componentes de la interfaz de usuario. Se considera como parte V del marco MVC.
  4. El DOM virtual de React es más rápido que el modelo convencional de actualización completa, ya que el DOM virtual actualiza solo partes de la página, lo que reduce el tiempo de actualización de la página.
  5. React utiliza componentes como unidad básica de interfaz de usuario que se puede reutilizar, lo que ahorra tiempo de codificación.
  6. Simple y fácil de aprender.

Reaccionar código de muestra

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
  
// every component is created by 
// extending the React Component class. 
class Clock extends React.Component { 
  constructor(props) {
    super(props);
    // constructor creates an instance of this class.
    this.state = {date: new Date()};
  }
  
  componentDidMount() {
  // this function is called immediately 
  // after component is mounted on DOM.
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  
  componentWillUnmount() {
  // called before component will unmount from DOM.
    clearInterval(this.timerID);
  }
  
  tick() {
  // this function is used to update the 
  // state of Clock component.
    this.setState({
      date: new Date()
    });
  }
  
  render() {
    return (
      <div>
        <h1>Today Date and Time</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
// code will not run needs specific environment setup
ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

Introducción básica de React Native:
REACT Native lo ayuda a crear aplicaciones móviles reales y emocionantes utilizando solo JavaScript, que es compatible con dispositivos con plataformas Android e iOS. Solo codifique una vez y las aplicaciones REACT Native están disponibles para las plataformas iOS y Android, lo que ayuda a ahorrar mucho tiempo de desarrollo. Encontró una gran popularidad creada por Facebook. REACT Native, tiene un gran apoyo de la comunidad hoy en día. React Native está construido sobre ReactJS, que es una buena alternativa a AngularJS. Aunque hay algunas similitudes y diferencias entre React Native y ReactJS.
reaccionar nativo

  1. React Native es un marco que se utiliza para crear aplicaciones nativas multiplataforma. Significa que puede crear aplicaciones nativas y la misma aplicación se ejecutará en Android e iOS.
  2. React native tiene todos los beneficios de ReactJS
  3. React native permite a los desarrolladores crear aplicaciones nativas con un enfoque de estilo web.
  4. El desarrollador front-end puede convertirse fácilmente en desarrollador móvil.

Ejemplo de código React Native

import React, { Component } from 'react';
import { Text, View } from 'react-native';
  
class ReactNative extends Component {
  render() {
    return (
      // it is a container, layout support with flexbox think 
      // of it like a div with a container class.
      <View>
        <Text>// A react component for displaying text.
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}

Publicación traducida automáticamente

Artículo escrito por Pankaj_Singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *