Componentes tontos en React Native

En este artículo, vamos a aprender sobre los componentes tontos en reaccionar nativo. El componente tonto es una de las categorías de React Component, así que antes de sumergirse en los detalles de los componentes tontos. Conozcamos un poco sobre los componentes. Un componente es uno de los componentes básicos de React. El componente es una pieza de código que es de naturaleza reutilizable. Cada aplicación en react o react-native se compone de componentes. Con la ayuda de los componentes, la tarea de crear interfaces de usuario se vuelve mucho más fácil. Trabajamos en cada componente de forma independiente y los fusionamos todos en un componente principal para crear nuestra interfaz de usuario final.

 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. 

Ahora aprendamos sobre el componente tonto.

Componentes tontos:Los componentes tontos son los componentes más reutilizables cuyo único trabajo es representar algo en la vista o puede decir DOM. Los componentes tontos se centran principalmente en una presentación, por eso también se denominan componentes de presentación. Una vez hecha la presentación, el componente está hecho con ella. Básicamente, solo les preocupa cómo se ven las cosas. Podemos escribir un componente tonto en un lugar y usarlo varias veces en la aplicación. Si lo hace, ahorrará mucho tiempo. Si queremos cambiar algo, necesitamos actualizar el código en un solo lugar y todas las pantallas que usan ese componente tonto también se actualizarán. Este componente no contiene ninguna lógica empresarial. Solo tiene el método render(). El componente tonto tampoco sabe nada sobre el estado o los ganchos del ciclo de vida. Puede recibir datos y devolución de llamada de los padres a través de accesorios. Abajo,

Sintaxis:

const Function = (props) => {
 return(
   ...code of creating any element
 )
}

Características de los componentes tontos:

• Centrarse en la interfaz de usuario : los componentes tontos se centran principalmente en cómo se ven las cosas. Por lo tanto, casi todos los componentes de la interfaz de usuario, como botones, entradas, modales, etc., deben considerarse componentes tontos.
• Aceptar accesorios: los componentes tontos aceptan accesorios para recibir datos y la función de devolución de llamada del componente principal. Esto los hace dinámicos y reutilizables.
• El estado rara vez se incluye: el componente tonto no incluye el estado, la única vez que incluye el estado es para manipular la interfaz de usuario en sí, no los datos.
• Sin dependencias: los componentes tontos no requieren ninguna dependencia en el resto de la aplicación.
• Pruebas fáciles:  es fácil probar componentes tontos, ya que solo toma accesorios y devuelve la interfaz de usuario. No tiene ninguna lógica o estado complejo para los datos.

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 

Ejemplo: En este ejemplo, hemos creado el componente tonto llamado GFG y lo usamos tres veces en la función APP. 

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
  
const GFG=()=>{
return (
  <View style={styles.container}>
    <Text style={styles.text}>
        Geeksforgeeks
    </Text>
  </View>
);
}
const styles=StyleSheet.create({
  container:{
    backgroundColor:"green",
alignItems:"center",
  },
  text:{
    fontSize:25,
    backgroundColor:"white",
    margin:10,
     borderRadius:5
  }
});
export default function App() {
  return (
    <View>
          <GFG/>
          <GFG/>
          <GFG/>
    </View>
  );
}

Producción:

GFG