webscraping using Reactjs

Question

I am trying build a web scraping app using Reactjs. I used nightmare.js in normal JS and I did get the desired output. But when I tried adding in a button and creating functions it did not work well.

I now thought of going straight with ReactJS because that is what I want to end up doing eventually.

Can someone give a tiny example code of using nightmare.js or Casper.js inside ReactJS in the jsx format or any TIPS or Pointers. I know this may sound silly or simple, appreciate any help. I basically want it to kick in when I run node server.js. I can later add in buttons , css , etc .

Mahala

What are you trying to achieve and why would you like to use React? – Dyann

@Dyann I am trying to make a web app to collect data from a website. like a finance website taking data when ever I click a button. After learning JS , ReactJS is what am currently learning and I wanted to get straight into project and learn on the go. They say its easier and better start before other libraries. I hope so. – Mahala

Answer 1

React tends to be used for more presentational purposes i.e. displaying the data you have scraped and not the actual scraping.

If you are going to use javascript for scraping I would suggest using your node backend to do this (assuming you are using node).

Create a route that your React app can call and let your backend code do the work. Take a look at this tutorial, it's a couple of years old but should point you in the right direction.

https://scotch.io/tutorials/scraping-the-web-with-node-js

Dyann

Thx for your response. The link is sure shot for me, I have a another silly question: So in a React App, I place in the node.js code into the JS file and call it in the JSX code ? so as to display them? Am i right ? . ├── components │ ├── App │ │ ├── App.jsx │ │ ├── app.css │ │ ├── app_test.jsx │ │ └── index.js – Mahala

Im not exactly sure about your follow up but I think this can clear it up, your scrapping files should be in your backend directory and all of the associated js files will be there. Your React will be in the client folder(along with your frontend content) and it will only query what you scrapped and display it. – Mousey

But, why? There are a potential benefits of doing the on-demand scraping from the client. For example: Lower latency, decreased risk of rate limiting/IP blocking (because the client's IP is used) – Leukas