Internal search bar in react - reactjs

Hello to the entire stackoverflow community.
The first thing I have to say is that I am just a student and that I am starting to learn "React". With this in mind, I hope you are not too demanding of me.
After this, my question:
I am making a react with different components that basically has text inside the html tags in the render.
I would like to make a search engine that will locate any text in any component and redirect me to that point, but I don't know how to start.
I've been searching the web (with google, of course) and the truth is that I can't find anything that simply does what I want. All I find is to search in databases or queries, etc. But I can't find anything that is an internal content search engine to React.
Could someone tell me a tutorial or how to do this search engine in react?
Thank you very much for anticipating your responses.

Related

How To Add Server Side Rendering To React Single Page App?

I built a React app a year ago, and totally stopped working with React, so I am really really rusty.
Site is here: http://allvintagesearch.com
I'm using eBay API.
I'm sort of afraid to touch it, so wondering if there are any tips someone can provide in adding the ability for this site to get better rankings in google (right now there is really not much traffic).
Any help is appreciated.
If your site is static you can use Gatsby, otherwise, your best option is NextJs. you can check their doc. you can also find very good tutorials online.
NextJs
Gatsby
There are some websites like https://website.grader.com/ that they give you scores about every aspects of your website (e.g performance, security , SEO and etc) and then they tell you what you are missing and how to fix them. for google search i would recommend you to have look to this link:
Get your website on Google
hope it gives you some help to start from.

Shop search based on reactJS

I have to do similar web search on e-shop based on this site:
http://frisco.pl/
So far I recognize it as reactJS implementation. Am I correct? I don't know anything about reactJS and am I right that every search item is existing in _resource variable (which is visible in page source), and that's why the searching is so fast?
Also what plugin respond for automatic change of browser URL while typing keyword in search box?
Yes this website is made with reactjs.
for automatic change of browser URL, its made with react-router (but you can use other to manage that).
React abstracts away the DOM from you, giving a simpler programming model and better performance.

Why google doesnt index my single page app properly?

Since some time google officially depreceated ajax crawling scheme they came up with back in 2009 so I decided to get rid of generating snapshots in phantomJS for _escaped_fragment and rely on google to render my single page app like a modern browser and discover its content. They describe it in here. But now I seem to have a problem.
Google indexed my page (at least I can see in webmastertools it has) but when using webmastertools I look at google index-->content keywords it shows non processed content of my angularJS templates only and names of my binded variable names e.g. {{totalnewprivatemessagescount}} etc. The keywords do not contain words that should should be generated by ajax calls when Javascript executes so e.g. fighter is not even in there and it should be all over the place.
Now, when I use Crawl-->Fetch as google-->Fetch and render the snapshot what google bot sees is very much the same as what user sees and is clearly generated using Javascript. The Fetch HTML tab though shows only source without being processed using JS which I'm guessing is fine.
Now my question is why google didn't index my website properly? Is there anything I implemented incorrectly somewhere? The website is live at https://www.fightersconnect.com and thanks for any advice.

AngularJS, Deeplinking within a view

Objective
I am currently building my first web application with AngularJS. I need to know the correct way to deeplink to content within a view.
http://signalreview.2mellow.com/ this is the current build.
Description of problem
For example, You can search for mcdonalds, spokane, When this happens I want the address bar to reflect the search that was just done such as #/search/mcdonalds%20spokane so that a user can link a search to someone else. I understand how I can get the data out and initiate the search. I just don't understand how I should be utilizing Angular JS to accomplish the goal.
From my research I have determined that nested views is not a good idea.
Also I have plans to have it so that if you click a map marker for a place that has been reviewed (stored locally in the db) It would put the id in the address bar so that location could then be linked to someone else or you could bookmark it.
Contstraints
The idea is that everything is done on one view with a persistent google map however there are certain states that are saved within that view.
Conclusion
Am I approaching this the wrong way?

How to dynamically replace contents of HTML tags with Python on Google App Engine with lxml?

I am using Google app engine and python to build an application. I am incredibly new to python as well as GAE. I have a index.html file with the basic template for my site. However I would like to replace the contents of a few tags depending on the URL. For example update the title tag for each individual pages. From what I can tell the recommended way to do this is using the lxml library.
And so... Tonight is my first time I have ever worked with lxml and I am having a really hard time wrapping my head around it. I have been fooling around with several permutations of the basic syntax and have not had much success understanding how it works. I have looked for different tutorials and the documentation is few and far between.
When I try the following code I get a 'lxml.etree._ElementTree' object has no attribute 'find_class' error, however the documentation here: http://lxml.de/lxmlhtml.html#parsing-html it sure looks like it should have that class
Am I on the right path? Is this the most efficient/best way to replace the content of html tags?
import os
import webapp2
import lxml.html
doc = lxml.html.parse('index.html')
doc.find_class("title") == 'About Page'
self.response.write(lxml.html.tostring(doc))
This is definitely not the way to that on Google App Engine. You should use some kind of template framework like Jinja2 or Django to achieve your goal.
But before all that you will have to make sure that you completed the Getting Started Tutorial, where you can see these things in action.

Resources