Presentational VS Container Components In React

What are Container Components?

There is rule for writing good & clear code - single responsibility.
Each code unit should depend as less as possible on other components (Should to care only about its own business in a human terms).
Thus it is good practice to separate code to self-containing units

Container Components are components which contains the logic of the component. Usually it contains in its markup one or more presentational components.

Presentational components are "dumb" components - they take care only about look of some part of data.

Example

Here is searchbar component

//Search Bar
import React, { Component, PropTypes } from 'react';
import {Link} from 'react-router';

let ResultsList = ({results, loading}) => {
        
      let createItem = function(repo, idx) {
        return <li key={idx}><Link to={`/repo/${repo.owner.login}/${repo.name}`}>{repo.name}</Link></li>;
      };
      let list;
      if(results && !loading) {
        list = results.length==0  ? 'no items yet' : results.map(createItem);
      } else {
        list = <div className="loader">Loading...</div>;
      }
      return <ul className="results">{list}</ul>;
             
}
export default ResultsList;

This code better to be refactored into smaller sub (Presentational)components

Refactoring:

import List from './List'
import Loading from './Loading'
import NoItems from './NoItems'
let ResultsList = ({results, loading}) => {
        
      return (<div>
        <Loading loading={loading}/>
        <List results={results}/>
        <NoItems results={results} loading={loading}/>
      </div>);
             
}

Here you can see that instead place logic and markup in the same place I made ResultsList to be Container which contains Loading List and NoItems presentational components

see code in this repo