Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de Ionic 5 React: Cree una aplicación móvil con Ionic 5, Axios y React

 En este tutorial usaremos Ionic 5, Axios y React para crear una aplicación de noticias. Usaremos NewsAPI.org para obtener datos de noticias y usaremos el cliente Axios para enviar llamadas API a la API REST de noticias.

Prerrequisitos

Debe tener algunos requisitos previos antes de abordar este tutorial:

  • Conocimiento de JavaScript,
  • Es necesario tener conocimientos básicos de React ya que usaremos React como biblioteca de interfaz,
  • Necesita tener Node.js y NPM instalados en su máquina de desarrollo. Es requerido por la create-react-appherramienta que se utilizará para generar un proyecto React e iniciar el servidor de desarrollo local.

Instalando create-react-app

Si ha npminstalado en su máquina. Abra una terminal y ejecute el siguiente comando para instalar create-react-appglobalmente en su sistema:

$ npm install -g create-react-app

En el momento de escribir este artículo, se instalará create-react-app v2.1.8 .

Crear un proyecto de React

A continuación, usemos create-react-apppara generar un proyecto React. Regrese a su terminal y ejecute el siguiente comando:

$ create-react-app react-ionic-app

A continuación, navegue hasta la carpeta raíz de su proyecto e inicie el servidor de desarrollo local con los siguientes comandos:

$ cd react-ionic-app
$ npm start

Su servidor se ejecutará desde la http://localhost:3000/dirección.

Añadiendo Ionic a nuestra aplicación React

Ahora necesitamos instalar Ionic para React disponible en el @ionic/reactpaquete. También instalaremos el react-routerpaquete ya que Ionic para React depende de él. Abra una nueva terminal, navegue hasta su proyecto React y ejecute los siguientes comandos:

$ npm install @ionic/react react-router react-router-dom --save 

Nota : En el momento de escribir este artículo, se @ionic/react instalarán v0.0.5 (beta), react-router v5.0.0 y react-router-dom v5.0.0 .

Cómo usar componentes Ionic 5 en React

Abra el src/App.jsarchivo e importe los estilos de Ionic 5:

import React, { Component } from 'react';

// Import Ionic 5 styles
import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';

import './App.css';

En este punto, simplemente puede importar el componente Ionic 4 deseado y usarlo en su aplicación.

Importemos los siguientes componentes:

import {
  IonApp,
  IonContent,
  IonHeader,
  IonTitle,
  IonToolbar,
  IonCard,
  IonCardContent,
  IonCardHeader,
  IonCardSubtitle,
  IonCardTitle,
  IonButton
} from '@ionic/react';

A continuación, cambie el render()método a crear para crear una interfaz de usuario de Ionic 5 con una tarjeta:

class App extends Component {
  render() {
    return (
      <IonApp>
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>News App v1.0</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonCard>
          <IonCardHeader>
            <IonCardTitle>
              News title
            </IonCardTitle>
            <IonCardSubtitle>
              News subtitle
            </IonCardSubtitle>

          </IonCardHeader>
          <IonCardContent>
            <IonButton >Read</IonButton>
          </IonCardContent>
        </IonCard>
      </IonContent>
    </IonApp>

    );
  }
}
export default App;

Esta es una captura de pantalla de nuestra interfaz de usuario en este punto:

Ionic 4 y React UI

Instalación de Axios en su proyecto React

Usaremos el cliente Axios para enviar solicitudes Ajax a la API de REST de noticias.

Regrese a su terminal e instale Axios desde npm usando el siguiente comando:

$ npm install axios --save

A partir de este escrito, la axios v0.18.0 se instalará en su proyecto.

Obtener datos de noticias

Dirígete a la API de noticias, registra una nueva cuenta y toma nota de tu clave API. A continuación, abra el src/App.jsarchivo y agregue las siguientes variables que contienen la clave API y la URL:

class App extends Component {
  API_KEY = 'YOUR_API_KEY';
  API_URL = `https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${this.API_KEY}`;

A continuación, importe axiosy agregue el componentDidMount()método donde puede enviar una llamada a la API a la API de noticias:

import axios from 'axios';


class App extends Component {
  API_KEY = 'YOUR_API_KEY';
  API_URL = `https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${this.API_KEY}`

  state = {
    items: []
  }

  componentDidMount() {
    axios.get(this.API_URL).then(response => response.data)
    .then((data) => {
      this.setState({ items: data.articles })
      console.log(this.state.items)
     })
  }
  render() {
    return (
      <IonApp>
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>News App v1.0</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
      {this.state.items.map((item) => (
                <IonCard>
                  <img src={item.urlToImage}/>
                <IonCardHeader>

                <IonCardTitle>
                {item.title}

                </IonCardTitle>
                 <IonCardSubtitle>
                    {item.author}
                  </IonCardSubtitle>

                </IonCardHeader>
                <IonCardContent>
                  <p>{item.content}</p>
                  <IonButton href={item.url}> Read</IonButton>
                </IonCardContent>
                </IonCard>

      ))}

      </IonContent>
    </IonApp>

    );
  }
}

export default App;

Almacenamos los artículos en la itemsvariable de estado después de buscarlos con Axios. En el render()método, recorremos el estado de los elementos y mostramos información relacionada con cada artículo de noticias utilizando un componente de tarjeta Ionic 5.

Esta es una captura de pantalla de nuestra aplicación en este momento:

Aplicación Ionic 4 / React

Conclusión

En este tutorial usamos Ionic 5 con React y Axios para crear una aplicación de noticias simple con una interfaz de usuario móvil. En este momento, Ionic / React todavía está en versión beta, agregaremos más tutoriales más adelante cuando alcance una versión estable.


Publicar un comentario

0 Comentarios