# Composing 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

```javascript
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](https://speakerdeck.com/vasa/building-multitenant-ui-with-react-dot-js)