I am new to react. I currently have a landing page that is basically written in plain html, css, ect. However, I have a Sign In button. When I click it, I would like to redirect to a new page which is written in react. Is this possible? Thank you!
It is possible. But not possible in 1 scenario.
Possible scenario's,
Your react app is hosted on server, in this case you can simply do this,
Sign in
Your react app is not hosted on server, but running on local machine using npm start, in this case you can do this,
Sign in
Note:: target="_blank" is completely your wish as it take you to new page and not changing the current page.
Not Possible scenario
You are working on development mode on local machine, and your react app in not running. In this case you cannot redirect to react app as URL you try to visit is not available.
Yes, it is possible. Your new page(react) is like any other web-page such that when it's address would be loaded by the browser, it will run it - like any other web-page.
If you have a simple HTML webpage with a button and you have another HTML webpage with the React application rendered inside something, you just need a HTML anchor with a href to do the navigation:
<a href="/my-react-app">
<button>Click me to navigate to React!</button>
</a>
If your React application is not rendering on the other webpage that is a completely different issue that I would open a new StackOverflow question for.
P.S.: Generally you would create your whole website in React (as a "single page app") and your landing page and every other page would be rendered in the React application. That is much more flexible and a better user experience.
Related
How is it possible for a web application/website to have the same identical source code behind every page on the site with no change at all. I was looking at the crypto - fiat currency exchange website: (Remitano.com) and for each page on the site the code is the same. How could this be possible?
The site is most likely a single page application (SPA). This means that it dynamically adds and removes elements with JavaScript. This is why sites made with React, Vue, and Angular don't work without JavaScript enabled.
For example, if you look at the code of a Vue app, you'll see something like <noscript><strong>We're sorry but myvueapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>. The content inside noscript only displays if the user has JS disabled in their browser.
I have a Blazor Webassembly PWA application with two razor pages: Index.razor and History.razor. Every time a user navigates between the two pages, there is a short delay where the "Loading..." HTML is displayed on the page before the app loads the actual razor page.
I understand that when you first open the app in your browser it needs to download all the necessary assemblies and load them. But once they've navigated to site, why does each navigation require that the "Loading..." html be shown? It's often a short period of time (I have my service worker caching everything), but as a user this would feel distracting to me.
I haven't been able to find anything online explaining this. I'm sure I'm probably missing how this actually works, or maybe I have setup my page/navigation incorrectly? Any information on this would be greatly appreciated. How does the page loading work with each navigation? Is there a way to prevent this?
UPDATE: Using the the Blazor WebAssembly template in Visual Studio as an example and following Mister Magoo's comment, I was able to figure out that the reason the "Loading..." shows up is because I am doing a full reload of the pages. That leads me to one last question. If the user is currently on the Index page, and they click to navigate to Index, is there a way to clear out all the Models on that page without forcing a refresh?
There are many strategies on caching in service worker you can set it depends on your needs
https://developers.google.com/web/tools/workbox/modules/workbox-strategies
I think "Cache First" strategy is proper for you
I'm creating a website in which there is a lot of linking involved. I don't know how I should redirect to other pages on clicking of buttons like how you would sign up and it would redirect you to a login page or a homepage. Something like that. A lot of buttons involved. The meta tag lets you redirect after a certain amount of seconds but in my case, I don't know how many seconds it would take for the user to sign up. What are my options?
You need to learn a Backend Framework, I use Django and Flask(Nodejs is also a popular one), Using Django it becomes very easy to redirect between webpages and log in and signup becomes very easy, go with flask if you are good at python or go with nodejs if you are good at javascript, Django is like an advance version of flask
Here is the link for Documentation
Django
Flask
NodeJs
I've got an application hook to work as explained in the very basic sample of the doc. The application does its job, renders its own templates and does all navigation back and forth.
But I am facing 2 problems:
After putting the hooked application an a page via the advanced settings of the cms, I am no longer be able to edit the page over the frontend. If I navigate in /?edit mode to this particular page cms toolbar dismisses and the /?edit mode is taken away.
How can I recover editing such an apphook'd page?
In the site's view mode (published apphook'd page) I have no styling and no base.html template stuff. So I miss the header menu coming from the base template and the footer which is generally added to each page by a static placeholder. Since I am not able to do frontend editing of the apphook'd page (as mentioned in paragraph 1), I am unable to embed the application into my well known page style.
How can I get the intimate styling back for such an apphook'd page?
I am working with
django 1.11.18
djangocms 3.5.3
python 3.7.2
Got it to go. Considerably following this instructions did the trick. I was able to overload the particular template from within the apphook application.
Is there an application that can edit and render and web page side-by-side similar to http://rendera.herokuapp.com/ , but can working "offline" (i.e. can be working even without internet connection).
I tried googling for WYSIWYG HTML editor, but I couldn't come with something similar to http://rendera.herokuapp.com/
I found Brackets (http://brackets.io/) somewhat similar to I'm looking for. I managed to find the similar question (different keywords) in StackOverflow (Is there an HTML/CSS/JS editor that immediately shows changes?), so somebody can mark this as duplicate
On windows just point your built-in IIS server to your working directory
When you edit your html , just refresh the web page
Use Python to serve up your web page from the directory your working in
python -m SimpleHTTPServer
When you edit your html, just refresh the web page
If using angularjs you can use
ng serve
This will load your website normally on localhost:4200 , any change to your code will force a reload of your website
Simply have your browser on one side and your editor on the other.