Render Function In Reactjs

Quick question. I'm learning react js. When we create a component, we provide in the render function the html template of the component to render. So far I have only seen small c

Solution 1:

You should always write it in the render function. You're not writing HTML in there, you're writing JSX, which is compiled into Javascript. Something like <div className="test"> is converted into React.createElement("div", {className: 'test'});.

You shouldn't have an issue of size as long as you break down large components into a composition of many smaller components. You can include other components by including them in your render function, like this: <SomeComponent someProp="someVal" />.

Solution 2:

You can split your render function to the bunch of good-named methods like a partials in old plain html-templates. It's useful to make complex react-components, because you will remove big unreadable html-part from your code.

For example, here is some pseudo-code described this approach:

classNavBarextendsReact.Component {

  // Render user name and links on profile and logout renderUser() {
    if (!user) return;
    return<div>{user.name}</div>;
  }

  // Render list with nav-bar items if they existsrenderNavBarItems() {
    if (!user) return;
    return<ul>{this.items.map((i) <li><ahref={i.link}>{i.name}</a></li>)}</ul>;
  }

  render() {
    return (<divclassName="nav-bar">
      {this.renderNavBarItems()}
      {this.renderUser()}
    </div>);
  }
}