React - Parte 2

 

React cuenta con unos elementos denominados Hooks, estos son nuevas APIs de libreria que permiten tener estado y otras características de React en los componenetes creados con funciones. Esta API cuenta con dos elementos importantes useState y useEffect. 

Cuando se llama la función useState se declara una nueva variable de estado y el único parámetro que necesita es el estado inicial que no tiene que ser necesariamente un objeto como en versiones pasadas, pueden ser números o strings según se requiera. El useState devuelve una pareja de valores, el estado actual y una función para actualizarlo. 

Al usar useEffect React entiende que el componente que se está creando tiene que hacer algo después de la renderización. Esta función es útil ya que puede ser utilizada para hacer peticiones de datos o invocar alguna API imperativa.  Al llamar este método dentro de los componentes permite acceder a todas las variables de estado o cualquier prop directamente desde el efecto. 

Uso de Feltch en React: 

La API Fetch proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, tales como peticiones y respuestas. También provee un método global fetch()  que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red.

A continuación se muestra una petición básica usando feltch(): 

fetch('http://example.com/movies.json')

  .then(response => response.json())

  .then(data => console.log(data));

En este código se recupera un archivo JSON a través de red y se imprime en la consola. El uso de fetch() más simple toma un argumento (la ruta del recurso que quieres obtener) y devuelve un objeto Promise conteniendo la respuesta, un objeto Response. Esto es una respuesta HTTP no el archivo JSON. Para extraer el contenido en el cuerpo del JSON desde la respuesta, se usa el método json(). 

Navegación en React: 

La navegación consiste en definir rutas, para que un componente sea visualizado al dirigirse a la ruta en el navegador. También se puede navegar entre rutas, a través de enlaces y hooks, para enviarle un estado asociado al componente navegado.

Mediante la librería react-router-dom, se pueden crear rutas fijas, por ejemplo, para mostrar formularios, listas o tablas de datos, entre otros. También se pueden crear rutas dinámicas, para mostrar los datos de un cliente específico, un producto identificado, alguna orden o contrato, etc.

Primero se debe crear el contexto usando el proveedor BrowserRouter asignado como Router simplemente. Para permitir aislar la navegación y sus rutas.

import { BrowserRouter as Router } from "react-router-dom" 

<Router>

  ... rutas e interfaz

</Router>

Para definir una ruta, es decir, lo que se verá al dirigirnos a la ruta, debemos colocar el componente Switch y dentro de él, un componente Route por cada ruta.

import { Switch, Route } from "react-router-dom"

<Switch>

  <Route path="/demo">

    ... interfaz para la ruta /demo

  </Route>

  ...

  <Route path="/">

    ... interfaz para la ruta /

  </Route>

</Switch>