Friday, October 28, 2022

How to Make a React Web App SEO-Friendly

What is React?

React is an open source library which has been developed and maintained by Facebook for building interactive UI components for both mobile apps and Single Page Applications (SPA). It runs on JavaScript and is popularly used by developers as it boosts productivity during the development process.

SPA problems with SEO

The way these sites are built makes it harder for search engines to crawl their content.

“What happens when you use React without server-side rendering is that the crawler halts on the very first page because it can’t see any hyperlinks to follow. It sends the page to the indexer, which then has to render the page and extracts the hyperlinks, which will then be added to the crawler’s queue. Then the crawler will eventually crawl the next set of pages, and again will stop there because all the links are invisible until the JavaScript is rendered. So it has to wait for the indexer to come back with a new set of URLs to crawl.”

But this can be improved in 2 ways

React Helmet
Isomorphic React Applications

What is a React Helmet?

React Helmet is a library that helps you deal with search engines and social media crawlers by adding meta tags to your pages/components on React so your site gives more valuable information to the crawlers.

React Helmet Usage

Let’s assume we have a React application with a Home Component, which is the landing page of a business which sells products for pets.

Import React from ‘react’;’

Import ProductList from ‘../components/ProductList’;

Const Home = () =>{

Return <ProductList/>

};

Export default Home;

This is a basic component that doesn’t include any Meta data useful for search engines and social media crawlers, so we need React Helmet to do it.

To start using React Helmet we need to install the library as follows:

npm install -save react-helmet

Then we need to modify the Home component to start using Helmet in a way that we can use title tags and Meta tags:

Wednesday, April 6, 2022

How To Managing API Requests In React Native Using Axios

APIs can make your life a whole lot easier. With an API, you can send requests to other services and get responses without having to build those requests and responses yourself. But building an API isn’t as simple as it sounds. It requires careful planning, testing, and debugging. If you’re building an API for the first time, it can feel like an impossible mountain to climb. That’s where APIs like axios come in. It has a great API and lots of helpful features. Here in this article you’ll understand how to use axios to manage API requests in your React Native app.

What is AXIOS?

Axios is one of the easiest HTTP clients to learn and use. Making an API request is as simple as passing a configuration object to Axios or invoking the appropriate method with the necessary arguments. You will learn the basics of Axios in this section.

Configuring Axios

Type following command on terminal window to install Axios:

NPM Install Axios

How to make requests to an API using Axios

Making a call to an API using Axios, you can pass a configuration object to Axios or invoke a method for the corresponding CRUD operations.

For example, you can make a GET request to the /api/users endpoint in one of the following two ways:

import axios from 'axios';

constbaseUrl = 'https://reqres.in';

// Passing configuration object to axios

axios({

method: 'get',

url: `${baseUrl}/api/users/1`,

}).then((response) => {

console.log("<<<<<< Passing configuration object to axios >>>>>>", response.data.data);

});

// Invoking get method to perform a GET request

axios.get(`${baseUrl}/api/users/1`).then((response) => {

console.log("<<<<<< Invoking get method to perform a GET request >>>>>>", response.data.data);

});

There are several other fields such as baseURL, transformRequest, transformResponse, and headers, among others, which you can include in the configuration object you pass to Axios.