is there such a thing as JSX 'partials'?

Question

I work mainly with Handlebars JS now, but I am looking at JSX. Is there a JSX equivalent to Handlebars partials? I want to know if I can create small bits of markup that I can reuse in several different JSX views.

Answer 1

It doesn't provide partials. Some things about React:

• React doesn't provide any notion of partials. The fundamental, atomic unit of React is the component.
• Instead of passing a partial, you'd create a component or components and re-use those. Even better than a partial because it's a function, so it's encapsulated and testable!
• If the markup is small, it should probably either be moved up into a parent component or down into a simpler one

Generally, my rule of thumb is that components should follow the principle of single responsibility or separation of concerns. If something doesn't seem to fit into a component, you've likely got problems in the other two components and could reconsider them, too :)

Another couple rules of thumb to go by when thinking about components:

• code smells should usually end up as components (repeating something over and over again, etc.)
• components are usually either presentational or containerized. The latter have roles in the props/state tree for an app (you never "see them")
• refactor things into components as you need to; don't start out encapsulating everything, because you may have prematurely refactored and created more problems for yourself
• the most reusable and decoupled components are like the best functions or objects: clean, flexible, testable, and they do address a single concern

• at the same time, don't go crazy and turn everything into a component. i.e. you don't (usually) want:

  <Letter>R</Letter><Letter>e</Letter><Letter>a</Letter><Letter>c</Letter><Letter>t</Letter>

Here's an incredibly simple example:

'use strict';

const OuterComponent = React.createClass({
  render() {
    return (
        <div>Outer{this.props.children}</div>
    );
  }
});

const ReusableComponent = React.createClass({
  render() {
    return (
        <div>Am I reusable? {this.props.reusable && 'Yeah!' }</div>
    );
  }
});

ReactDOM.render(
  <OuterComponent>
    <ReusableComponent reusable={true}/>
  </OuterComponent>,
  document.getElementById('container')
);

Will render:

OuterComponent
Am I reusable? Yeah!

Note, though, that using creatClass provides you more than you might need if you're not working with mutable state (which is provided to you within the component via this.state), you can easily use what are sometimes called "stateless functional components" (because they are, well, stateless and returned by functions). These could easily be arrow functions implicitly returning the JSX (which is essentially just React.createElement() generator)

const OuterComponent = (props) => <div>Outer{this.props.children}</div>;

const ReusableComponent = (props) => <div>Am I reusable? {this.props.reusable && 'Yeah!' }</div>;

ReactDOM.render(
  <OuterComponent>
    <ReusableComponent reusable={true}/>
  </OuterComponent>,
  document.getElementById('container')
);