In React, how to create a GitHub like navigation system? [closed] - reactjs

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
When you navigate on GitHub, it like the whole next page is preloaded inside the current page, and then navigate.
So is there a way to render a component in background ? And then insert it in the DOM ? Some component need to fetch some data,
I would like it to be done in background too.
I'm using react-router-dom and relay for data fetching.
Thanks

It can be achieved with the Transitions concurrent UI pattern:
wait for some content to load before transitioning to the new screen
But the React Concurrent Mode is quite a complicated topic, still an experimental feature at the time of writing, it needs a special setup before you can start using <Suspense /> and useTransition Hook - please read the updated documentation.

Related

Displaying a Video in REACT.js that replays [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I am making a clone of a website using React. I am fairly new to React js and am trying to add a video that replays on its own. If anyone can at least point me in the right direction of documentation, I would appreciate it.
I do not want the video to take up the whole screen. I believe the video should be its own component, i think.
The website I am cloning is halfsumo.com see the video below the nav bar section.
Attribute loop on <video/> element should do the job.

How to listen for changes with react and firebase? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I have two separate projects one is a react application and the other one is for my firestore API that I have functions setup. I call these functions in my react application. I have them separated since the firebase package is very large.
I am looking to figure out how to have my data in real time. I know how to setup snapshots in my functions. So I am wondering if I could setup a function that pings my react application(that could be listener for) that something has updated.
Check out https://github.com/tylermcginnis/re-base - it allows you to persist your data in the React State mirroring any changes that are made in your database. It was made specifically for Firebase + React.js.
There are endpoints (amongst many others) namely syncState which is a two-way bind to state and bindToState which is a one-way bind to state.
Hope this helps!

How to create an Admin page for a website developed in React + Node? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I want to create an Admin page in order to manage users, groups, passwords and to publish content in a website. That website is made using React.
What is the right way to make it? Using a library for React that provides such Admin?
My workmate told me he uses Material UI, but I don't see how that library could be used for that purpose.
Material UI is used only for styling stuff, not for actual logic. If you have a REST backend, take a look at admin on rest project.
What is your backed written in?

Fetching data from database(React.js) [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
In my app, some components use different categories of data(clothes, shoes etc.).
Is it better to fetch data from database once and put it to storage? Or i should let every single component fetch data directly from database?
You're looking for Redux (an implementation of flux). Redux gives you a global state to work with that you can connect components into. You can make an api call in one component, and if added to state (using actions + reducers), you can update data from a completely different component. They don't even need a parent/child relationship in your component hierarchy.
So yes, you're looking for "storage", in the form of a global state for your entire React app.

How to populate list from api and pass data to new page when item is clicked?(react native) [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am very new to react native and am trying to populate a list with an image and a heading using a fetch() call from a web service . I need this list to populate as soon as the page is displayed. I am struggling to find the right method/event to put my logic in .
Also i have a separate page to see the detailed article. Is there a clean way to pass on information to this page so i can avoid making another api call or a messy global variable.
You should read up on Redux. It might seem a bit hard to understand while reading but the implementation is pretty simple and straight forward.
Also, take a look at this article by Dan Abramov, the main contributor of Redux, talking about Presentational and Container components.

Resources