I'm trying to learn React for 2 weeks now and I already made some great progress. I made 2 applications that are visual and functional done.
Now I was wondering if it is possible to combine this 2 App's in 1 bigger application, so I can redirect from a login to the other applications Index. I tried to find some information on the internet but nothing was really clear for me...
So I basically made a Login / signup app with an empty homepage.
And I made a second kinda forum app which I want to implement in the empty homepage of the login app.
You have to use ReactDOM twice.
after successfully login you must have to serve dashboard page from server then on document ready you have to bind second app using ReactDom on div in blank dashboard.
Related
I'm working on this web app that include several pages.
I really would know if it's better handle the router in the backend (Node.js) or in the frontend (React.js) or with both (I didn't understand in the Internet).
For example, how have I to work with the login page (that will re-direct on the user area).
Thanks
I don't know how big your project is, or its requirements, but if this is a personal project I would suggest using the React Router Library. You can make a call to your Express app from the Front, and based on the response you get back you can route the user to wherever.
In a project of mine I had an express route for login that looked for the user in a database, then checked to see if they provided the correct password. If the user provided the wrong password or if the account wasn't found I sent back an error message. If the user provided the right password I sent a success message to the front. I would listen for the response on the frontend, if I received a success message, I would call useNavigate from React Router to route the user to the user page.
Here is the documentation for React Router Dom: https://www.npmjs.com/package/react-router-dom
If this is a bigger project and you need to think about accessibility and search engine optimization, you would have to find a way to render React from the backend. Its called server side rendering, which I'm not familiar with.
Hope this helps a little.
I am trying to learn to react front end by creating a simple frontend website. My goal is simple I want to implement a login menu when I run the app. The user will log in through this window and if the user is a regular user it will redirect the user to a new component call regular.js. If the user is admin then redirect the user to another page lets calls that admin.js. I have been trying to understand how to redirect in react. Like in javascript I can write if Credentials match then go to this page can I do that too in react? However, I do not want the user to log out automatically when the redirect happens. I am not sure how to approach it because I read other answers saying use hooks but then some said use routes as well. I am providing the App.js, index.js, and loginForm.js file underneath, any direction will be helpful or documents to refer to like guide me to do this will be helpful. I am not looking for a design or any content on the new pages I just want the redirect to work while the user is logged in.
You should not handle login on the front end with React states, there is 0 security in this. You should look into how to implement authentication, consider reading through some tutorials like this one: https://bezkoder.com/react-express-authentication-jwt/
I'm trying to incorporate deep links/universal links for my music app so when I send out emails to people regarding new songs/albums, they will either be directed to details page or the login/signup page (with the song/album info displayed).
branch.io looks good but I'm having a tough time understanding how my app would handle the appropriate redirects for a single-page app. When a user clicks on a generated link, how should my app request for more data based on that user's link so I can render the correct page/view?
The flow is pretty simple. Create a Branch link with all the parameters you want to pass -> you click on the link -> Redirect to your the web app -> Initialise Branch Web SDK -> Callback is received with all the parameters -> Use these parameters to navigate to whatever page you want in your app and/or use these parameters to customise your user experience.
You can read more about it here:
https://docs.branch.io/web/integrate/#read-deep-link
https://docs.branch.io/deep-linking/routing/#branch-added-parameters
In case you still have doubt feel free to reach out to our super helpful support team at support#branch.io
Me and my team are trying to make a multi-page react app and each of us had been given one-one page to work on, for simplicity let us assume we have only 3 pages- I had to design login/sign-up, the other had to design the home page where the display information would be dynamically fetched from the API (let's call it the API page for simplicity).
I have made the login and sign up pages by keeping the HTML file as it is, and I have used react just to render the forms and perform form validation and account validation by hitting API in the backend in react, and I still need to call the /login.html page; whereas my friend has converted the whole HTML file into a react component, and he just renders the different components like sidebar, searchbar etc into one js file to display the webpage.
Which of the above is a better method to make a react webpage?
P.S- All the 3 pages are working absolutely fine independently.
How do we integrate all the 3 pages and also ensure that one is not able to access the API page unless and until he/she has logged in?
We are using webpack config to run our files.
I would like to create an app in koa that would render react components when user hits the address bar, and after that a react-router client side to navigate through the links inside that rendered react component. is that possible? I want the initial load to be SEO friendly. i cant provide code yet but eager to listen to all of you suggestions and answers.
This will be the wanted flow:
User hits ther server (ex: localhost:3123/) --> KOA will render the react component that will be shown (this component has react router links on it) --> User navigate through the links (this time i dont want to hit the server again, so i want the react router on this side to trigger the routing.
It doesnt matter if the source code when routing through client side will not change, all i want to have is the source code of the initial react component when the user first hits the server. is this possible?
I have not done any serverside rendering, since I have developed mobile apps most of the time, which has the assets available on clientside.
Maybe look at this Demo to get your head around this:
https://github.com/rackt/react-router-mega-demo