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.
Related
So I am just wondering if there are any common practices or basic guidelines as to when you should create separate pages vs just updating the components on the current page when using React? I tried to look online and could not find anything.
There are some scenarios in which you need your data or some state persisted, just some update in the UI, like Atlassian Login page.
When you write your email, it changes the route and changes some css (changes password field display from none to block).
Or in Jira next gen, there are tasks, if you click on one of the tasks in a scrum board, the page component is the same, but it brings up a modal component showing up the details of that task.
Why different routes? cause you can share the link and whenever someone navigates to that route, it brings up the page with the same UI that you saw when you copied the link.
Otherwise it's a cleaner approach to handle navigation using separate pages. So it's totally up to you and the kind of UI/UX design.
I am new to react and I haven't cleared all things in my mind yet.
I am currently working on a project where I need to build a react app with a landing page, a sign up/in page, an ask-a-question page and a answer-question page. Something like a stack overflow clone.
To my knowledge so far I get that I have two choices. 1) use react-router and have a function rendering what I want for each page or 2) have a state like showPage and with some if/else if render the page I want.
What is the correct way to do what I want? And in general when should I use react-router and when just state.
Thanks in advance
You'll always use routing if you have multiple pages to render. As you said you have 3 pages currently you'll need to work on.
Landing page
Sing in/ register
FAQ
What you'll want to do is wrap everything inside your app.js in Router and have say a pages folder that'll have all the pages you want to render.
In React, routers help create and navigate between the different URLs
that make up your web application. They allow your user to move
between the components of your app while preserving user state, and
can provide unique URLs for these components to make them more
shareable. With routers, you can improve your app’s user experience by
simplifying site navigation.
Read more here
You need to separate all this because when your project grows you'll thank yourself for creating specific file for specific workload. It'll be easier to manage. And when you're working on large scale projects you'd want to create layouts and have even bigger distributions.
layouts
|__admin_layout.js
|__user_layout.js
here admin layout will handle all routes specific to admin and user layout will handle all routes specific to users.
Routing helps you manage your pages much better
I'm new to React.
In React, we use navigation with a library like... 'react-router-dom' to navigate to pages. My question is most of the time, I can show and hide the entire Component based on the item selected in a navigation bar. I can store a value in the state and if the selection changes, I can show another component. Then why should we use a navigation library to navigate around?
I can not find any clear information about this online. Please help.
I was writing in this answer about having a more organized code (easier to maintenance) and a better folder structure, but you could easily have it working without a navigation library.
Probably the main point to use a navigation library is, as said in React Router page, whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native.
Web
The library will help you work with the URL, receive parameters, navigate between pages.
Mobile
You can make use of deep linking, receive parameters, navigate between screens, animations, components ready for Stack navigation, Drawer navigation, Bottom Tab navigation...
You can do anything I mentioned above by yourself, but libraries exist because other people had a need and you decide to use it if you have the same need and think it's worth it.
Why should we use a navigation library to navigate around?
In short, because they are widely used, well-tested libraries, with a performance that you may not be able to achieve easily if you want to have many different functionalities like those libraries have. And they will certainly save you a lot of time in case you need to create a way to navigate and work with things related to navigation (like those mentioned about Web and Mobile).
If your project is simple, there is no need to use a navigation library. To have a more practical experience, you can even try to do your project without using such a library, and when you are having difficulties, try replacing your logic with some library and analyze if it was worth it.
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
I just approached to react native/react and are a bit confused...I specify that I have a background with angularjs, cordova, ect...Now I have a problem...I'm reading Flux and I want to use it in my application because it improve the structure with the unidirectional data flow.
The most important decision is the navigation in my app, so in the documentation of native react I found the component "Navigator". Now I don't understand if I can use the Navigator and Flux together or one excludes the other.
if you have informations, advices or examples, it's welcome. Thanks.
Infact you can use combination of both. Here is one library that and provides a router API on top of Navigator. https://github.com/aksonov/react-native-router-flux
You can use RN Navigator and Flux together, they're not excluding each other. Here is few navigation articles, that might help you:
http://blog.paracode.com/2016/01/05/routing-and-navigation-in-react-native/
http://tech.taskrabbit.com/blog/2015/09/21/react-native-example-app/
https://medium.com/the-exponent-log/routing-and-navigation-in-react-native-6b27bee39603#.ae10t4lks
You can find they're all stating that you can use Flux actions to dispatch events, update navigation bar buttons and screens content etc.
I'm not using Flux, but on your place I would try to read react-native-router-flux code, read articles and try to buid flux-navigator myself with all that aknowledged ^^. Good luck, I hope this will help you :)