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.
Related
I currently have ionic/angular app that allows users to sign up as varying roles. Based on the role they sign up as I would like them to be redirected to a specific angular component. I have a signup form in my index.html file and the redirect logic in my script.js file however, I don't know how to write the redirect logic. In other words, how do I navigate to a specific component, based on the users role, from a javascript file?
You could load a 'dispatcher' component. And decide what to load next (based on users' role). This component can be smart enough to handle the logic.
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.
I cannot fully understand how a single page application can do routing by itself.
Maybe you can see the example here.
If you click on those links (below the visited, purple color link), the url and the page will be change without reloading. But how to achieve this if the front-end is deployed in a MVC framework?
Isn't that if you visit a url on MVC, it'll will look for the corresponding controller for that url? If that happen, of course the page will be reloaded isn't it? If it using HTML5 History, how can when I revisit the url, the page display the changed state?
Can someone explain how to achieve this with React app that deployed on a MVC framework like Rails? Thank you
I'm more familiar with Angular, but all the Single Page Applications (SPA) are based on the the same model. You have three layers:
the Rails MVC routing system with its routes and controllers
the React SPA routing system (that also has its own
routes and controller system)
the React event handling system that, as a javascript framework, among other things, catches mouse clicks in the web application
In your reactrails example page, the root of your web site (/) is handled by Rails, and every other pages (/*) are intercepted and handled by the react routing system.
So basically, if you have a rails ApplicationController you could have a config/routes.rb like this:
# routes.rb
root 'application#main'
# catch every routes and serve only the Application.main action
match '*path', to: 'application#main'
# application_controller.rb
class ApplicationController
def main
end
end
This will redirect every urls coming to Rails (/this/is/an/example, /that/one/is/not/an/example...) to the React router. (Note that you could also have other routes such as /api/gimme/my/damn/json/data that will resolve to other controllers and send back JSON, xml, html or any kind of data)
Then, in your html page, React intercepts every clicks, on links or buttons, and compare them to its own routes.
If a route match, it will display the correct page via its templating system, (usually loading it by Ajax or read it from its cache), and you won't see any page reload. You could say that react act has a client-side server.
If you call a url such as /i/like/flowers, the route will be first processed by rails (/*), that will send you an html file located at the / route, containing your SPA app, that will kicks in, analyse the route itself, and show you the correct content from its own templating system.
So to sum up, you have:
GET /my/super/react/url
//=> Rails serves `main.html` that includes `react-router`
Once main.html is loaded, react-router looks at its routes components and serve the right template if route exists (/my/super/react/url).
You could find more examples in the react-router documentation
This is the basic scenario, and I'm sure others will complete anything I didn't cover, and add react specific samples!
I'm using Express framework on NodeJS (hosted by Heroku) to create my web site. I'm also using the React framework to create my components.
I have several HTML files with divs inside and React components which can be rendered in those divs.
When a user chooses a route (e.g. /movies) I want to be able to associate one HTML file with a component and return it back to the user. I already looked for a solution, but all of them talk about server-side rendering and sending back HTML files.
Is there another solution?
Check out react router you don't have to use server side rendering, you just need to give a react component that you want to return when a route is requested.
The standard way to do this now is to build a Single-Page applications and redirect all requests to /, and the front end routing will handle the required page to load.
I'm new to Angular and am currently building a javascript heavy page that will have a frontend that is available to guests, and a user or admin area that is available to logged in users.
I also have a backend application written in PHP that provides me a RESTful API.
Now, I don't actually know how to structure my Angular app in order to avoid loading scripts in the admin area that are used only on the guest area and vice versa. My current project structure is the following:
web_root/
--app/
----css/
----img/
----js/
------controllers/
------services/
------app.js
------directives.js
------filters.js
----templates/
--index.html
In my index.html I load every javascript file separately. I don't know how to continue and build the admin area. Should I use another HTML file to load the relevant javascript files and another module?
Thanks in advance.
Why not just have separate controllers for guess and admin related sections? Then tie those up to different partials based on the routes defined in routerProvider? That way you can use the single app, consolidate reusable code into filters/services/directives but only load data for the requested view.