I'm a complete beginner in ReactJS. I'm currently designing a website using it and currently working through localhost.
My main page is on localhost:3000 and I want to navigate to localhost:3000\University(I have designed a separate file University.js for this).
On navigating to the content of this file, it overlaps with the existing content (ie that of localhost:3000). Is there any way to show the new content without overlapping as well as with separate CSS. Any help would be really appreciated.
Actually, I'm not getting what you mean by "overlapping content"! For the css part maybe you are looking for something like "local stylesheets" aka "css modules".
This answer has an example of using local stylesheet for each component. Also, there are various libraries, as mentioned in this post, which can come handy for you.
Go through this article, and pay attention at method 4 there. CSS modules is one of the best solutions in case you are experiencing CSS overlapping.
PS: react-native and react-js are two different tags!
You can understand react routing here, if you have some doubt over it. (Mentioning this because of tag!)
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!
I'm using react-meta-tags to add/update the meta tags in my react site. While it works fine, I noticed that there are plenty of tags added in, which has the styles present in my css files. These tags were not present when I was not using react-meta-tags.
Now, is it okay for these tags to be present in ? How will it affect my site if I leave it as it is? Should I leave it as it is? I would appreciate it if you could give me a detailed explanation, since I'm new to SEO (and web-development) and have a very shallow understanding of it right now.
Its necessary for these tags to be present. What happens is that you don't ship your actual code to production, you minimize it and then bundle it for that. Since you are using react , the browser cant support JSX on its own so react automatically bundles you code in (runtime as well although not as efficient as in production) and converts JSX to different HTML, CSS and JS files(in minimized form) to ensure you site works fast and reliably without any support issue from different browser.So don't worry about that. While it does enable faster reloading and better performance in general which helps with google rankings but SEO is a different game altogether, you need Server Side Rendering for that and assuming you are using create-react-app you are using with Client Side Rendering. My suggestion don't focus on SEO and just ensure you are using Sematic elements that would be enough for now.
My story:
I want to launch very quickly one page, but I am really bad at CSS. I know react and wanted to get better there so I bought two application templates from themeforest. One is landing page, another one is kind of a dashboard page. All styled, independently works great. Now I would like to integrate them into a one application, so when user clicks on "login" in landing page he will be redirected to the dashboard application login page. Both applications are indepented. Both are made using CRA. Backed will be writted in .NET.
How should I do this? What are the best ways to do this? I could "copy-paste" some of the files of the smaller application (landing) to the dashboard app and change the root of the react, this is doable but will take some time to move everything, and build properly. Maybe there is another way that you can think of?
Most of the react developers(not good in CSS) will be in a similar situation. There is no readily available solution I can think of. I suggest you to manually go through the landing.html and dashbaord.html and split it into 2 react components minimum. You mentioned that you know react, so it will be easy for you. The toughest part for you will be resolving CSS class conflicts. The two HTML files might be using the same classes. Here you need to go case by case or change the names of the CSS class for either landing-style.css file or dashboard-style.css file.
Time to learn CSS basics. Good luck with your CSS learning.
Why to merge the codebase, instead deploy them separately.
For example:
Let's deploy landing page to www.example.com and dashboard to app.example.com.
Once the user clicks on signup/sign-in just redirect to app.example.com.
This way you can focus on important aspects of each application.
Landing page for SEO and dashboard for new features.
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.
The Scenario
I'm developing the front-end (CSS only) of an Angular SPA.
I'm not especially familiar with Angular routing.
I'd like to add a standalone page containing Bootstrap components just for development purposes (yes, I know this means it won't be a single page application anymore). This way I have one unified view with all the components so I don't have to switch back and forth while working on the CSS. It also acts as documentation for the Bootstrap for the other devs to refer to.
What I've tried
I originally added a bootstrap.html page to the app folder, alongside the app's index.html This worked at first, but has now stopped working. What would be the best/standard way to achieve something like this?
Update: I've managed to fix some of the JS errors, so the page is up and running again. My question remains though: "is there a way of adding a standalone page that is considered standard/best practise, or is it literally just add a separate HTML page at the app root?"
If you use a target='_self' in your linking anchor tag, this should force a full page reload, and that will avoid the angular routing - which is where I expect your request is getting hijacked (by design).
e.g.
link
Answering your updated question
Not to my knowledge, since (as you correctly pointed out) this mixes the SPA design pattern.