Componentes inteligentes nativos de React

En este artículo, aprenderemos sobre los componentes inteligentes en React Native. El componente inteligente es una de las categorías de React Components, así que antes de profundizar en los detalles de los componentes inteligentes. Un componente es uno de los componentes básicos de React y React-Native. El componente es un bloque de código que se puede reutilizar nuevamente, lo que facilita a los desarrolladores la creación de IU. Es más fácil entender el código gracias a los Componentes. Para organizar las aplicaciones nativas de reacción, tenemos que dividir los componentes en componentes tontos e inteligentes para que nos resulte más fácil manejar los cambios de estado y el flujo de datos.

Componentes Inteligentes: Es el componente basado en clases que se encarga de manejar y administrar el estado de la aplicación. Tienen funciones constructor() en las que definen su propio estado. También se les conoce como componentes de contenedores.

Sintaxis: La siguiente es la sintaxis del componente inteligente

class App extends Component {
    constructor(props){
        // Code
    }
}

Características del componente inteligente:

• Se utilizan para pasar los datos de la aplicación a los componentes secundarios.
• Lo saben todo sobre los métodos del ciclo de vida, llamando API o bibliotecas.
• No incluyen estilismo.
• Son con estado. Gestiona el estado de la aplicación.
• Saben cuándo renderizar y volver a renderizar el componente.

Instalación: aquí usaremos la versión Expo CLI que será mucho más fluida para ejecutar sus aplicaciones React Native. Siga los pasos a continuación uno por uno para configurar su entorno nativo de React.

Paso 1: Abra su terminal y ejecute el siguiente comando.

npm install -g expo-cli

Paso 2: ahora expo-cli está instalado globalmente para que pueda crear la carpeta del proyecto ejecutando el siguiente comando.

expo init "projectName"

Paso 3: Ahora ve a la carpeta creada e inicia el servidor usando el siguiente comando.

cd "projectName"
npm start 

Estructura del proyecto: Se verá así.

Ejemplo: En este ejemplo, estamos pasando datos del componente inteligente al componente secundario.

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
  
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: 'Welcome To GFG',
    };
  }
  
  render() {
    const { data } = this.state;
    return (
      <View>
        <Child dataFromParent={data} />
      </View>
    );
  }
}
class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.dataFromParent,
    };
  }
  
  render() {
    const { data } = this.state;
    return <Text style={styles.text}>{data}</Text>;
  }
}
  
const styles = StyleSheet.create({
  text: {
    color: 'green',
    fontSize: 25,
  },
});

Inicie el servidor utilizando el siguiente comando.

npm run android

Producción: