I have a SPA web application, in REACTJS for investment consultation. However, I have to refactor it to make it possible to share its states by link, so that the user shares the link and by the link the selected items are shared. I want to know if you have a solution through some lib nodeJs or React that helps me solve this problem. Thank you!
If you want to share react state with only an http link and there's no stateful backend, you don't have a lot of options other than keeping state data in the URL. There is a useQueryParams hook would give you the basic tools you need for something like that
https://github.com/pbeshai/use-query-params
You can see some discussion of this technique below with an independent implementation
https://medium.com/swlh/using-react-hooks-to-sync-your-component-state-with-the-url-query-string-81ccdfcb174f
Related
I'm currently developing a React SPA with a Spring Boot backend API.
For one use case i need to create a dynamic link which contains login credentials for a one-time-User. With this link a user needs to be able to login to the SPA and use it further from outside the application.
This is the first time I'm working with a SPA.
What is the best way to achieve this goal?
I would really appreciate some ideas.
best regards
You probably need to use a Router (like React Router). These cause different components to be rendered in React depending on the current URL, and from there different code can be run (likely from event handlers or useEffect if you're using function components).
I am new to ReactJS and I'm working on the Front-End side of a project I have developed myself. The project is meant to be a site where users can logIn and post messages.
I have developed my back-end using Spring, Kotlin and MongoDB as DDBB, and have developed the API to perform all the necessary actions.
I have already developed the front-end side in Angular 6, since I know how to do that, and I have the site running correctly.
However, I'm trying to learn ReactJS, and I want to 'replicate' what I've done in Angular with React. After some tutorials and stuff, I have been able to develop my LoginComponent, which can fetch correctly the userInformation from the backend.
Here's then my question: In Angular, I use services to store variables that I may need from different routes, such as the userId (I will query the messages using that). I have not noticed how to do that in React, any idea?
Sorry for the poor explanation, I'm new to React.
You need a place to store the application state, you can use rxjs or mobx observables, or you can use redux. I personally like observables, as there is a lot of boilerplate in redux.
In react, your smart components will usually import pure functions from services that perform actions on the stores, and derive its rendering from the application state that is passed down to dumb rendering components.
I have a login form that requests a JWT token from an API. I want to separate my network request as I use this in multiple places in my app.
Should I move the request to my Redux reducer? Or do I make a new file for the sole purpose of reusing the network function? What's the best practice here?
There are many way to structure your project folder. It depends on your project. If you project is small, you could split by redux types like components, reducers, actions, containers, screens.
But if your project is big and you want to sustain easily, I suggest that you should use ducks approach. This is a good article about it, I think you should take a look
I am trying to build an react app where i need to pass a JSON of size more than 4MB in between routes / components.
I tried passing as query params in route, the url changes to blank..How can this be done in react.
It's probably not a direct answer but if you are starting a new app I would recommend you to use Redux with react-redux.
Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.
It's very small library so it's easy to understand how everything works. It might be a good solution to your problem.
Todo app example
You can also check out awesome egghead.io free tutorial - Getting Started with Redux
Here is the answer about the redux benefits by its author Dan Abramov
I have two parts in my website - a menu that has redirections on click, and a content div where I load something via ajax when I click on a link from this menu.
The menu is different when I logged in as a user, and when I logged in as an admin.
How do I structure the reactjs classes in the above situation? What's the best practice?
I find that react-router is sufficiently flexible to suit your scenario. It's a bit tricky to find "best practices" in the react community right now and it's better to understand what you're trying to do (you have done this) and then understand the tools available: react itself, react-router, and perhaps redux and react-redux as a way to check an application state [e.g. logged in as admin] in order to decide which links to display.