¿Cómo crear una broma aleatoria usando la aplicación React a través de la obtención de API?

En este tutorial, crearemos un sitio web que obtenga datos (broma) de una API externa y los muestre en la pantalla. Usaremos React completamente para basar este sitio web. Cada vez que recargamos la página y hacemos clic en el botón, React obtiene y muestra una nueva broma en la pantalla. Como estamos usando React para este proyecto, no necesitamos recargar la página para mostrar los datos obtenidos.

El componente «Botón». El archivo de la «aplicación» es un componente funcional y contiene una variable de estado Joke, que inicialmente se establece en una string vacía y, según el estado de la broma, se procesa la salida. El componente genera el componente «Botón» si el chiste contiene una string vacía o el valor del chiste si no está vacío. El componente «Botón» que se está procesando también es un componente funcional importado que genera un elemento de botón. También estamos pasando algunos accesorios al componente «Botón», que es un método llamado callAPI. 

Prerrequisito: Los prerrequisitos para este proyecto son:

• Reaccionar
• Componentes de funciones
• ReactJS AJAX y API
• ES6

Razón para crear esta aplicación: el propósito de crear un sitio web tan simple es obtener algo de experiencia trabajando con API, ya que todas son más o menos iguales. El sitio web utiliza una interfaz simple en la que tenemos un botón, cuando se desplaza el cursor cambia de color y cuando se hace clic realiza una solicitud a alguna API externa y obtiene datos.

Ejemplo: Cree un nuevo proyecto React usando el comando npx create-react-app . En el mismo directorio, tenemos un archivo index.js que administra todos nuestros componentes y muestra el componente de la aplicación en la pantalla.

• Paso 1 (Creación de Button.js): antes de comenzar con la parte de ReactJS, cree el componente Button.js. que se utilizará para devolver el botón y el componente de la aplicación, respectivamente.

  El componente Button acepta accesorios y representa un botón. Hemos agregado un detector de eventos al botón que, cuando se hace clic, llama a la función callAPI(). La función callAPI() se analiza en detalle en la siguiente sección. El componente Botón es muy simple y no requiere mucha explicación. Solo devuelve un elemento de botón. 

  Botón.js:

  JavaScript

  // Import React (Mandatory Step). import React from "react";        // Create a functional component     const Button = (props) => {         return <button onClick={props.callApi}>          Hello Geek!!          </button>;     }    // Export Button Component export default Button;

• App.js: este archivo devolverá la aplicación principal que funciona como un contenedor para todos los demás componentes. En este proyecto, hemos usado solo componentes funcionales, pero se puede hacer lo mismo usando componentes de clase. El componente de la aplicación es el padre de todos los demás componentes. Devuelve un div que tiene una declaración condicional, que devuelve el componente Button si el valor de la variable Joke es la string vacía («»), de lo contrario, devuelve la string almacenada en Joke con etiquetas de párrafo.

  Al principio, hemos definido una variable de estado que se inicializa como «». Ha sido desestructurado para que tengamos acceso directo a la variable Joke y setJoke() que puede usarse para cambiar el estado de Joke.

  También tenemos una callAPI() que llama a la API, toma la respuesta y la pasa a json() que toma una secuencia de respuesta y la lee hasta completarla. Devuelve una promesa que se resuelve con el resultado de analizar el texto del cuerpo como JSON, que es un valor JavaScript de objeto de tipo de datos, string, etc. Devuelve un objeto que tiene una propiedad llamada broma a la que se puede acceder usando data.joke y puede iniciar sesión en la consola usando console.log(data.joke) . Y luego cambiamos el estado de la variable Joke usando setJoke como data.joke .

  En el momento en que establecemos el estado como data.joke, react vuelve a renderizar todo el componente. Y la string almacenada en Joke se muestra en la string.

  JavaScript

  // Import React (Mandatory Step). import React from "react"; // Import ReactDOM (Mandatory Step). import ReactDOM from "react-dom";    // Import The Button Component from Button.js  import Button from "./Component/Button";    const rootElement = document.getElementById("root");    // Create a functional component const App =() => {     // Declare a state variable     const [Joke, setJoke] = React.useState("");        const fetchApi =() => {         // Fetching data from the API             fetch("https://sv443.net/jokeapi/v2/joke/Programming?type=single")             .then((res) => res.json())             .then((data) => setJoke(data.joke));       };        return (         // Return the Button Component with a conditional statement         <div>{Joke === "" ? <Button callApi={fetchApi} /> :  <p>{Joke}</p> }</div>       ); }    // Rendering the App Component. ReactDOM.render(     <App />,   rootElement ); export default App

Salida: nuestra aplicación ahora está completa y funcionando, aunque la aplicación es simple, ayuda mucho a comprender cómo hacer llamadas a la API para reaccionar y manipular la respuesta recibida para usarla en la aplicación.