How could I create a template in ReactJS?

Question

In my ReactJS app I have a lot of Routes (React-Router dependency). They are sub-divided in alumno and admin. Both the student and admin template have a few common elements.

In the case of student: Header, student menu, CONTENT, footer;
In the case of administrator: Header, student menu, CONTENT, footer;

So, in this example, I would have to have two templates, one for student and one for administrator. How could I create a template where only the CONTENT was dynamic and the rest static?. In other words, CONTENT would be what React-Router loads me (dynamic), while both header, menu and footer remains for all pages (it's for all the same, no reloading, static).

Thank you.

Dayan Moreno Leon · Accepted Answer · 2017-04-30 03:16:02Z

1

React does not have the concept of templates, in react the data is tied to the view in a single component, the closest to a template would be a simple/dumb/presentational component that you can pass properties into. you can make these properties as complex or plain as you want. But it will never be just html or anything else it will always have to be a component. you can learn more about it here

answered Apr 30, 2017 at 3:16

Dayan Moreno Leon

5,4552 gold badges25 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JuMoGar Over a year ago

Wow ... This question came to me because every time a route is loaded, when the elements are re-mounted, they lose their previous states, resetting the ones they have by default, having to go through the props properties that I want to save. If you can make a 'template' that is not mounted and dismantled with each route, this could be avoided.

Dayan Moreno Leon Over a year ago

take a few minutes and reason over what you just said. a template is just a template, the data would be held separately and besides if a route changes and the prop changes shouldn't your component loose all the data? it feels like you are not giving all the details, in any case the answer remains the same, seems to me you have a hard time understanding how react works or ho to architect your application. what data flow library are you using? redux? reflux? flux? mcfly? alt? if you need more help, you might want to reframe the question. for this one i don't think you'll get a different answer.

JuMoGar Over a year ago

Thanks for your reply I'm not using any, at the moment it is not useful. Possibly use Redux in the future.

Dayan Moreno Leon Over a year ago

in that case you would be good using react-router-redux, and don't make it an afterthought, it will help you architect your app if you start using it right away. my rule is that if your app is big enough that you need a router then you should start using a data flow lib

Collectives™ on Stack Overflow

How could I create a template in ReactJS?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related