I am looking for the best way to create and navigate/redirect between page segments like the one in the red circle (idk if they are called segments).
I am using React and Redux. Is react-router a good idea?
Do you guys know of a good learning guide for create and navigate between segments of the same page?
React router is almost definitely what you are looking for, it provides all the functionality required for rendering different views / elements based on URL path. As well as navigating between 'pages' (without reloading the page)
This provides a really good intro:
https://reacttraining.com/react-router/core/guides/philosophy
Related
Trying to make a react app using pre made sources. I have a fully functional web page made in vanila js. Is the best approach (or maybe the only one) to turn the html page into multiple react components and just delete the html page or should I maybe find a way to just implement react code into html?
Why write 5 times the same button when you can write it once and import it the rest 4 times? This assures a unified look on your site and that any minor change you make will be reflected in all the proper places.
Consider a testimonial slider. You want this in your home page and in your about page. Why have the need to update it in two places?
If you are going the React way I will suggest to go all the way. Componetize your site, see the true power of React. Maybe its an overkill for your site (every component appears once -doubt-) but if this is the case you will start learning a really powerful tool with a simple example and the progressively get better.
I am starting to build my own website using the Django framework. It has become apparent that in order to make quick progress I will have to use some form of external library to handle most of my HTML/CSS/Javascript, for example, https://materializecss.com
I have begun investigating different websites to see what works and what doesn't and I was wondering if there is a quick way to identify what UI library a particular website is using.
Chrome's 'inspect' tool doesn't really help me because I get lost with so much HTML.
For example, this website https://www.moneyunder30.com/category/banking apparently uses https://materializecss.com, is there a general place hidden deep in the HTML where I could look to find this information?
Thanks
There's a pretty cool Chrome extension called Wappalyzer
New to React and wanted to get some insight on how best to create a website that will eventually have many SPAs, developed by different teams.
Ideally, a team would want to create a new SPA, and they would be able to add some stuff to their SPA that would allow for their site to share a common look/feel and perhaps navigation as well.
I am envisioning this where there is a master navigation (header, nav menu, etc) which I control, and many of these link into sub-pages that are actually stand alone SPA pages. But if we want to share things like settings, permissions, layout scheme, is there a tried and true way of doing this?
I am a veteran web developer who is really new to the Angular or React ways. In the day I would just create a frame, or, have a header that was a server-side include of sorts. But I feel as though things might be very different or more sophisticated now.
The goal here would be if we wanted to change the look/feel scheme, or wanted to change the master header/nav, we wouldn't have to update all of the SPAs individually to do that. So this is more than how to create a SPA (which is very well documented), but more of a "as a firm what can we do to centralize and house all of our team's web apps?"
Thanks in advance
You want to look into "Higher Order Components (HOCs)" in React. Basically, you will define a Layout inside a React Component (let's say you create /src/components/Layout/Layout.js), there you import your Header(.js) and Footer(.js) components and put {props.children} in the middle (this is where content of routes gets rendered.
But before you can do that, you should learn how routing, nesting components, props and stuff work, or else what I wrote may not make much sense.
I managed school websites which around 100 domains.
My boss asking me what is an easy way for him to get and see front page for all the website on the different domain.
Is there any web browser plugin can solve this?
This will be easy if I can give him domain.txt and plugin will do the rest.
Thanks in advance.
You should solve this server-sided:
Create a scripted page, that uses iframes to show a tiled view of the target pages
Make this script configurable via a domains.txt, a database or whatever works best for you
Point your boss to tis page
So i am trying to create a website with multiple different pages. I was originally going to just take the traditional route but this website caught my eye: https://anyoneworldwide.com/
Everything aside from the "Choose your location" screen has no loading whatsoever. The URL changes but there is no loading indicator on my tab or "X" on the refresh button (I am using chrome btw)
So my question is; how am I able to use this kind loading technique in a website of my own?
The particular website mentioned in the question is developed using React. Its a javascript framework.The concept is know as Single Page Application. Where routing is done by javascript running in the browser and content is loaded using ajax calls. checkout this article.
Easy answer, pick one of the currently popular front end frameworks for building single page apps (SPA).
E.g. AngularJs, React.js, vue.js
These frameworks allow you to easily create client side routers, which inject (in one way or another) new content into the existing page, thus no refresh.
React is a popular open source and free library developed by facebook. It is used to develop single page applications which means that your website wont load at all. This increased the speed of your website and saves a lot of bandwidth. Using react you can make such a website as you mentioned. Not only React but also other frameworks like angular and Vuejs can be used.