What function do I have to use to create multiple pages on React. Is there a type of link or something thank can direct me to pages in my web application.
React is meant to be used in single page application, so by default it do not provide such functionality. But if you want to add routing in it then you can use react-router.
What react-router will do is just swap you browser link to look like it is on a new page and replace content in body.
Hope this will make you help to understand the use of react.
Related
The app
The application was made using ReactJS, React Router Dom, Styled Components and Redux ducks.
The backend we consume is also made by us using Amazon Amplify and GraphQL.
The goal
We need to define the meta tags of one of the application pages so that it is possible to share personalized links to users
in social networks using OpenGraphic meta tags and the like.
The problem
The project was made in ReactJS and ReactJS has only one HTML page as root (/public/index.html), in this way, everything is generated with Javascript in a root tag, and when it arrives in the browser it is transpiled, as we already know. The problem is that the crawlers responsible for understanding the meta tags are not able to understand Javascript and end up not finding the dynamic data that I am defining on the page that I need to share the link on. They understand that there is one html file and only.
Attempts to resolve the issue
1) Define the meta tags in the /public/index.html file itself
This solution doesn't work because the data we are using is dynamic and the index.html file is a static file
2) Using react-helmet
The solution allows meta tags to be defined, but as already mentioned, crawlers don't understand JS. So, despite being on the page, the meta tags do not appear when sharing the link.
3) Using some SSR technology
This is a possible solution, but we were unable to integrate any SSR Framework into React. And it is not feasible to change the base technology of the project. We can't just switch from React to Next, for example, as the project is already complete.
4) Using a small server made with express.js along with the React application to replace the meta tags in index.html with string.replace() simulating something like an SSR
This solution works, but it causes two requests to be made every time the page is accessed, once by express.js and once on the front-end side by React. Due to the number of requests increasing, this solution was discarded. But if necessary, you can do it. In this case it is also necessary to check if Amplify can keep the application and the small server running in the same project.
5) Using react-snap with react-helmet
React-snap allows you to create html snapshots of the pages of a React project based on their routes and links, this added to react-helmet generates a perfect solution for links to be treated well by web crawlers when they are shared. But the solution doesn't work with dynamic routes. For example, /your-route/:id is a dynamic route that expects an id to be fully defined. React-snap gets lost when trying to create a snapshot of a route that only exists when the id is set. Unfortunately, this solution doesn't work.
These were the solutions we used to try to solve the problem, but it was not possible yet. Probably attempt 4 would be the most ideal to solve the problem. But we are looking for the best way that will not generate reworks and future problems. If someone knows a better way to do that, would help us a lot!
How do sites use ReactJS on their web pages when the whole site is not built with React?
I was under the impression that if you used ReactJS then the whole site had to be delivered using ReactJS.
So for example, https://www.bbc.co.uk/sport/football/scores-fixtures which is part of the BBC website seems to use React (as per How to tell if a web application is using ReactJs ).
Always remember that react is just plain old Javascript, if you read the documentation you'd know that you can import it even with a tag or in any way you see fit.
Here's the link to the docs:
https://reactjs.org/docs/add-react-to-a-website.html
I'm learning NextJS and am trying to wrap my head around the difference between server-rendered and client-side React code -- while NextJS seems great, I'm having some trouble conceptually understanding the difference between the two types of rendering and what those differences mean.
For instance, I came across the following comment in the NextJS documentation, in the section describing `_document``
// _document is only rendered on the server side and not on the client side
// Event handlers like onClick can't be added to this file
Why can one not put event handlers in _document? What is the difference between this and putting them 'client side'?
Also I'm somewhat confused because NextJS seems to be oriented around building 'pages' -- that is, there's support for adding <HEADER>, etc, as if we were building a static website. But if I were to build a React SPA, there's only one page, no? One can simulate different 'pages' using the React router, but the actual containing HTML (header, body, etc) remains the same, no? That is, we never really leave the actual HTML page?
I can use NextJS OK -- following through the documentation's tutorials -- but clearly conceptually I'm missing the forest for the trees. Any clues or pointers much appreciated!
pages/_app.js is where you need to client-side codes. It is shared between all pages.
pages/_document.js only runs in SSR. so you need to put relevant code there.
Saying that, you only need to create these pages if you need to modify the normal behaviour of the app and customise it in your way.
SSR means Server side rendering and it happens when you type url in urlbar and press enter or when you refresh the page with refresh button.
CSR Client Side Rendering on the other hand is the way of SPA(single page app). so the URL change but there is no server call. It look for resources in pages directory for routing.
Next HEAD is way to manipulate the header tags like meta, title etc. in every page. It will give you freedom of customising head tag.
I want to create an MTurk HTML question that uses a modern web framework, such as Vue or React. For a minute let's assume I can't use an ExternalQuestion which just points to a website I create, but rather want to use HTMLQuestion.
Is that doable? Can I include React, for example, and it will work? Amazon's surrounding HTML will not interfere with it?
Yes, you can do this. Both HTMLQuestion and ExternalQuestion are rendered in an iframe when a worker accepts your HIT. As such, they're completely isolated from any other scripts or libraries on the surrounding page.
My task is to create a SPA with an iTunes API.
I got my basic functionality done but it's not SPA yet, i wanted to implement react-router to handle the navigation.
However my components now need an extra parent. And i don't quite get it how can I pass the previously working data.
I don't want to inject huge block of code so i'd rather give you a Github link which is:
My SPA
But if you need the snippets let me know and i'll cover it.