Build a News Mobile App with Ionic 5 & React

In this Blog Series, I am going to show you that how can you Build a News Mobile App with Ionic5 and React JS. we are using here Ionic 5, Axios and React to build a basic news application. We are using a dummy of NewsAPI.org for getting news data in the same way you can just replace your API URL with it. and we are also using the Axios client to send API calls to the News REST API.

Prerequisites

You need to have some prerequsisites before tackling this tutorial:

• Knowledge of JavaScript,
• Basic knowledge of React is necessary since we’ll be using React as the frontend library,
• You need to have Node.js and NPM installed on your development machine. It’s required by the create-react-app tool that will be used to generate a React project and start the local development server.

Installing create-react-app

If you have npm installed on your machine. Open a terminal and run the following command to install create-react-app globally on your system:

$ npm install -g create-react-app

As the time of this writing, create-react-app v2.1.8 will be installed.

Creating a React Project

Next, let’s use create-react-app to generate a React project. Head back to your terminal and run the following command:

$ create-react-app react-ionic-app

Next, navigate to your project’s root folder and start the local development server using the following commands:

$ cd react-ionic-app
$ npm start

You server will be running from the http://localhost:3000/ address.

Adding Ionic to our React app

Now we need to install Ionic for React available from the @ionic/react package. We’ll also install the react-router package since Ionic for React depends on it. Open a new terminal, navigate to your React project and run the following commands:

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

How to Use Ionic 5 Components in React

Open the src/App.js file and import Ionic 5 styles:

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';

At this point, you can simply import the desired Ionic 4 component and use it in your application.

Let’s import the following commponents:

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

Next, change the render() method to create to create an Ionic 5 UI with a card:

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;

Installing Axios in Your React Project

We’ll be using the Axios client to send Ajax requests to the News REST API.

Head back to your terminal and install Axios from npm using the following command:

$ npm install axios --save

As of this writing axios v0.18.0 will be installed on your project.

Getting News Data

Head over to the news API, register a new account a take note of your API key. Next, open the src/App.js file and add the following variables which hold the API key and URL:

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

Next, import axios and add the componentDidMount() method where you can send an API call to the News API:

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;

We store the articles in the items state variable after we fetch them with Axios. In the render() method we loop through the items state and display information related to each news article using an Ionic 5 card component.

Conclusion

In this Blog Series, we have used Ionic 5 with React and Axios to build a simple news application with a mobile UI. At this time, Ionic/React is still on the beta version, we’ll be adding more tutorials later when it reaches a stable release.

if you find any difficulties in the above-written program or somewhere else you can simply ping me info@appfinz.com.

Read This Also

website designing company in rohini