React: demo component and container component

The difference between Presentation and Container components in React

In React, components are usually divided into 2 big buckets:Performance componentwithContainer component.

Each of these has its own unique characteristics.

The presentation component is mainly related to generating some markup to be output.

They don’t manage any state, except those related to presentations

Container components are mainly related to "back-end" operations.

They may handle the state of various sub-components. They may wrap several demo components. They may be withRedux.

As a way to simplify the distinction, we can sayAppearance components are related to appearance,Container components have to do with making things work.

For example, this is a presentational component. It gets the data from the props and only focuses on the display elements:

const Users = props => (
  <ul>
    {props.users.map(user => (
      <li>{user}</li>
    ))}
  </ul>
)

On the other hand, this is a container component. It manages and stores its own data, and uses presentation components for display.

class UsersContainer extends React.Component {
  constructor() {
    this.state = {
      users: []
    }
  }

componentDidMount() { axios.get(’/users’).then(users => this.setState({ users: users })) ) }

render() { return <Users users={this.state.users} /> } }

Download mine for freeResponse Handbook


More response tutorials: