Ad

Templates In React

- 1 answer

I've been trying to learn React through building my own website by using it, and have come to a point where I'm very tempted to use jinja2 templates. I understand the component paradigm pretty well, but am having a hard time piecing together the larger picture.

For example, let's say I'm building http://www.imgur.com

For the components, I might write a image card component for each image, perhaps a mouseover component for the short summary of each image, etc...

However, how am I suppose to put the larger pieces together? In jinja2, I can just extend a base template or include a header/footer. What is the proper way to do that sort of thing in React? I'd like to get rid of conventional templates altogether.

Ad

Answer

I think that you definitely have the right idea, and you will just need to expand upon it a little bit. If you already have the "card" component, and the "mouseover" component, you would just need to add something like a "homePage" component that would be composed of the other components.

For example, your render method in the "homePage" component might look something like this:

render() {
  var menuItems = ['sign in', 'sign up'];
  return (
    <div>
      <navbar menuItems={menuItems} />
      <card attr1="Card1" />
      <card attr1="Card2" />
    </div>
  );
}
Ad
source: stackoverflow.com
Ad