Resuelto: Cómo instalar reaccionar ganchos nativos con

Por cierto, aquí va el artículo:

React Native es una tecnología innovadora, impulsada por Facebook, que permite a los desarrolladores crear aplicaciones móviles utilizando JavaScript y al mismo tiempo ofrecer una interfaz de usuario nativa real. Esto se consigue incorporando componentes nativos controlados por JavaScript. Una característica importante es el uso de componentes funcionales en lugar de componentes basados ​​en clases a través de React Native Hooks, una poderosa adición a React.

React Native Hooks puede hacer que su base de código sea más pequeña, más simple y más fácil de entender. Este artículo lo guiará sobre cómo instalar e implementar React Native Hooks en su aplicación.

Instalación de ganchos nativos de React

Para comenzar a usar Hooks, necesita una versión particular de React y React Native. La versión de React debe ser 16.8 o posterior, y la versión de React Native debe ser 0.59 o más reciente.

npm install react@^16.8.3 react-native@^0.59.8 --save

El comando anterior instalará las versiones requeridas de React y React Native y las guardará como dependencias en su proyecto.

Presentación de ganchos en el proyecto React Native

Los React Native Hooks son funciones que te permiten usar el estado y otras características de React sin escribir una clase. Fueron agregados en la versión React 16.8. Echemos un vistazo a cómo se pueden incorporar en su proyecto React Native.

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

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>You clicked {count} times</Text>
      <Button onPress={() => setCount(count + 1)} title="Click me!" />
    </View>
  );
}
export default App;

usoEstado es un Hook que agrega el estado React a sus componentes funcionales. En el ejemplo anterior, estamos inicializando una nueva variable de estado llamada recuento.

Explorando otros ganchos populares

React Native ofrece una multitud de Hooks como useState, useEffect, useContext, useReducer y useCallback. Exploremos aquí el uso de useEffect, que gestiona los efectos secundarios en los componentes funcionales.

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

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <View>
      <Text>You clicked {count} times</Text>
      <Button onPress={() => setCount(count + 1)} title="Click me!" />
    </View>
  );
}
export default App;

efecto de uso Tiene el mismo propósito que componenteDidMount, componenteDidUpdate y componenteWillUnmount en las clases de React, pero unificado en una única API. Se ejecuta después de cada renderizado.

React Native Hooks puede simplificar su código y facilitar la gestión del estado y los efectos secundarios, lo que puede conducir a códigos y aplicaciones más sencillos de mantener y depurar.