webscraping using Reactjs - javascript

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 .

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

Related

Is it worth to use MUI/ChakraUI with NextJS?

I am quite new to NextJS and I were developing apps using React and Django before. So please correct me if I am miss understanding some points. I have some questions about NextJS, however I searched a lot but couldn't find my clear answers and they confused me.
1- Is NextJS really suitable for backend? I searched about this; there are two answers (yes it is full-stack/No, better to use other backend specific frameworks)
2- Doesn't using MUI/ChakraUI breaks the NextJS concept? because when the site is based on MUI every component is a client component right? So, what ever I am going to show the user is a client component that it becomes something like pure react.

Is it possible to use Google Places Autocomplete Service in a managed Expo app?

I've been scouring the web and I've found several posts that almost seem to address my issue, but none that I've found seem to get it quite right. I'm developing an app in Expo using the managed workflow, and all I want is a simple input component that will suggest/autocomplete names of cities/towns as the user types. The Google Places API has their Place Autocomplete, and the AutocompleteServices class seems to be a way to handle this without a prebuild UI component (as their components expect basic HTML elements).
The trouble is: The only way to import this library seems to be with a <script> tag, and it's my understanding (please current my if I'm wrong because I am comploetely new to mobile development), that you can't simply put an HTML script tag on a "page" in React Native/Expo.
I've been looking into solutions via NPM packages, but the best solution I've found - "react-native-google-places-autocomplete" - uses the Autocomplete query request instead of the basic request. The problem here is that the query form of the request doesn't allow you to filter by place type. (I need to list only cities/towns, which can only be done with the bbasic Autocomplete request, as far as I can tell).
So, basically, all I want is access to the library so I can build what I need myself, but every instruction I've found for importing it assumes you can use a <script> tag in an HTML document.
I thought what I wanted to do was simple, but apparently not? Is there something I'm overlooking (i.e. no one has mentioned it because it's so simple)? Should I just go use GeoDB instead? (I'd really like to use Google Maps if possible, as the app will need more complex location-based functionality later down the road).
Any tips would be greatly appreciated!

Is it possible to use Github Pages using React without using create-react-app

I have an app that I would like to serve to Github Pages, It's nothing special just an API fetch APP that displays some data. However, I didn't use create-react-app, I built it from the ground up.
I've been interested in displaying it to some of my friends to help them with their coding and to actually use something that was built, however I've never tackled this problem and wanted to know if it was even possible

Wordpress - Gutenberg - dynamic blocks - Can I completey avoid PHP and go full React?

Recently I've created a Sanity.io - Gatsby.js project. And the current project I'm working on is a Wordpress website. Now, I'm working for the first time on a custom Gutenberg Block and was happy to find out a big part of it is in Javascript.
I was happy to start learning more about this. But soon I found out that Gutenberg, when it comes to dynamic content, immediately jumps back to PHP with a callback. And from there on, it's well, php.
So that got me wondering. Is there a way to avoid PHP in gutenberg blocks? And work with React Functional Components. As a "simple" learning project I want to create the following.
Create a Gutenberg dynamic block Post Grid with front and backend filters
After initializing the block no PHP
In the backend/edit select post items amount and offset (skip first x amount) (when you know this you can filter on more cases)
In the frontend a (dropdown)filter that filters on category (if you know this you can live alter the query on other ways)
Thoughts
I guess WP's REST API would be best to query from.
GraphQL for querying? (Or GROQ?)
Would turning to React make your block more future proof/ready? (future is relative of course)
Would this approach benefit you if you later convert your Frontend to a live or static React web app? Since it's already fully JS.
Are there know downsides on this approach?
Now, I won't expect you guys to write me a block :) But any pointers/ tutorials/ known (git)projects are more than welcome.
As of now, no, you cannot write dynamic Gutenberg blocks purely in React without PHP. The linked issue goes in good detail why you have to use at least some PHP , and various approaches people have taken to minimize making duplicate PHP and JS.

Is there a way to combine angular with existing php/js/html web project?

I'm working with an existing old web project, and want to start using angular 7 in the project from now on, mostly in order to not stay behind with old tech. The server side is php 7, and client is html + javascript (using jQuery). Server is Apache.
I want to continue using php for server side, and start using angular for client side.
I've tried to find information but couldn't find anything useful.
My question is: Is it possible to add angular to the code from now on, while the old pages continue working using their current code (regular js and html pages)? can I add angular to my project and work with it from now on, without making too big changes in the existing code? If so, how can I do that?
Thanks
Unlikely
It will be very tough.
Angular is a complete full-fledged web framework that includes a bootstrapping process which makes it very difficult to integrate with an existing project.
You could consider using something like React instead. Because it is not a framework (just a view library) it is easier to integrate with existing code and has support for gradual adoption.
React has even included a small tutorial that adresses this issue

Categories

Resources