Using Composition to handle UX variations

Combining smaller reusable components to build a bigger UI blocks.

How do we make sure components are reusable?

• By ensuring our UI components are pure presentational components (dumb)

What does reusable mean?

• No data fetching within the component (do it in Redux).
• If data is required from API - goes into Redux Via redux-thunk API calls are isolated away from the redux containers that deal with the data obtained and pass it on to the dumb component.

If we have a bunch of renderBla() functions within the component which are used in the main component render()

• It’s better to move it to separate components. That way it is reusable.

Example

Login page variations

UX variations toggle features + add in additional links/markup.

If the UX variations are involved toggling features within a component + adding minor markup around it

import React, { Component } from "react";
import PropTypes from 'prop-types';
import SignIn from "./sign-in";

class MemberSignIn extends Component {
  _renderMemberJoinLinks() {
    return (
      <div className="member-signup-links">
        ...
      </div>
    );
  }

  _routeTo() {
    // Routing logic here
  }

  render() {
    const {forgotEmailRoute,forgotPwdRoute, showMemberSignupLinks} = this.props;
    return (
      <div>
        <SignIn
          onForgotPasswordRequested={this._routeTo(forgotPwdRoute)}
          onForgotEmailRequested={this._routeTo(forgotEmailRoute)}>
          {this.props.children}
          {showMemberSignupLinks && this._renderMemberJoinLinks()}
        </SignIn>
      </div>
    );
  }
}

export default MemberSignIn;

Related links:

• Slides from my talk: Building Multi-tenant UI with React