Concept of React Container in Meteor

help
1

Greetings,

I am just starting out with React, I am trying to grasp the concept of a createContainer and Containers in general with React. Could some one please explain this concept and it’s purpose.

Thank you,

Ryan.

2 Likes
2

This article makes a good explanation imo: https://www.sitepoint.com/react-higher-order-components/

3

The TL;DR is that a container component and a pure component create a separation of concerns with data and markup.

An example would be a Profile component. It takes in props props.fullName, props.email and then renders out the markup. If you’re using inline styles you can add them to the bottom of this Profile component as well. Note, because it only takes in props it can be re-used in any part of the app or an entirely different app. It’s also really easy to test (if even needed). Sometime you’ll here this being called a “dumb component” because it doesn’t know anything about the app.

Example

//   src/components/profile/profile.js

import React from "react";

const Profile = React.createClass({
  propTypes: {
    email: React.PropTypes.string,
    fullName: React.PropTypes.string,
    isLoading: React.PropTypes.bool.isRequired,
  },

  render() {
    if (this.props.isLoading) return <div>Loading Profile...</div>;

    return (
      <div>
         Name: {this.props.fullName} , Email: {this.props.email}
      </div>
    );
  }
});

Now a “container component” is nothing more than a React component that handles data fetching and perhaps even ‘tidying’ up the data for the view (striping out un-needed data or taking firstName and lastName to create a fullName prop. It could make a call to a Meteor method and save the response in it’s state, or hook up apollo, or redux, etc…

Basically it only gathers data, manipulates data, and passes down data and/or functions down to the view (in general).

Example:

//   src/components/profile/index.js

import React from "react";
import Profile from "./profile";


const ProfileContainer = React.createClass({
  getInitialState: () => ({
    email: "N/A",
    fullName: "",
    isLoading: false,
  }),

  componentDidMount() {
    this.setState({isLoading: true});

    getDataFromServer("userProfile", "user1", (err, res) => {
      this.setState({
        isLoading: false,
        email: res.viewer.email,
        fullName: res.firstName + res.lastName
      });
    });
  },

  render() {
    return (
      <Profile
        isLoading={this.state.isLoading} 
        fullName={this.state.fullName}
        email={this.state.email}
        />
    );
  }
});

This goes into more detail here (cued up to the container part):
2 Likes
4

Have a look at these tutorials… this one uses react-komposer. This one covers the same but uses create-container. I find react-komposer a little easier personally. But to each his own i guess.

p.s. the meteor chef in general is a brilliant resource.

5

Your code example is passing props instead of state in the container component.

1 Like
6

Woops, great catch! edited.

7

Ok thank you very much for this insight. It definitely clears up the mud quite a bit.

Now if I may ask another question. Please forgive me in advance if this is very rudimentary.

I’ve worked with Blaze, and other templating engines for quite some time. React is certainly different in concept from what i’m used to. I definitely know with new tech, there is always a learning curve and in order to get good at anything it won’t happen overnight.

But my question for everyone is, what are the true “unbiased” advantages of React over Blaze ? I’ve built several successful applications using blaze. But my gut is telling me that React has more to offer that I may simply not see at the current moment due to my ignorance of the framework.

Also why did you make the switch if you switched .

1 Like