Build a Web Scraper with React and JSON to Excel API

2 min read · Mar 9, 2025

Build a web scraper with a React frontend that uses the JSON to Excel API to convert scraped data from Books to scrape into an excel file.

Step 1: Set Up Your React App

Use Create React App to set up your frontend:

npx create-react-app scraper-app
cd scraper-app

Step 2: Install Axios and Cheerio

You'll use Axios to make HTTP requests and Cheerio to scrape data from the website:

npm install axios cheerio

Step 3: Create the Scraper Component

Create a component to scrape data from Books to Scrape and send it to the API:

import logo from './logo.svg';
import './App.css';
import React from 'react';
import axios from 'axios';
import * as cheerio from 'cheerio';

function App() {
  const handleScrape = async () => {
    const { data } = await axios.get('https://books.toscrape.com');
    const $ = cheerio.load(data);
    const books = [];

    $('.product_pod').each((index, element) => {
      const title = $(element).find('h3 a').attr('title');
      const price = $(element).find('.price_color').text();
      books.push({ title, price });
    });

    const response = await axios.post('https://json-to-excel.p.rapidapi.com', {
      rows: books,
      order: {
       title: 0,
       price: 1
      }
    }, {
      headers: {
        'content-type': 'application/json',
        'X-RapidAPI-Key': 'YOUR_RAPID_API_KEY',
        'X-RapidAPI-Host': 'json-to-excel.p.rapidapi.com'
      }
    });

    window.location = response.data.url;
  };

  return (
    <div className="App">
      <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" /
        <a
          onClick={handleScrape}
          className="App-link"
          style={{ cursor: 'pointer', textDecoration: 'underline' }}
        >
           Scrape books and download Excel
        </a>
      </header>
    </div>
  );
}

export default App;

Step 4: Run Your Application

Now you can run your application and test the scraping-to-Excel feature:

npm run start

Conclusion

The JSON to Excel API is a fast and convenient way to convert JSON data into Excel files. Combined with a simple web scraper, you can automate data collection from websites like Books to Scrape and export it into structured Excel files effortlessly.

Get started today by visiting the API page on RapidAPI and integrate it into your project effortlessly!