REACT DESIGN PATTERNS Container Components, Presentational Components & Functional Components

  • Presentational components are concerned with how things look.
  • Class components contain a render method but presentational components just return JS.
  • They do not know how to handle or manage to state (data) .
  • They mostly does not have any internally changeable state properties.
  • The best written as stateless functional components is presentational components.
const Player= ({ name, img_url}) => (
<div className="player">
<img src={ img_url } alt={name}/>
<h3>{ name }</h3>
</div>
)
export default Player;
import React from 'react'; function Greet() { 
return <h1> Hello Soner </h1>
}export default Greet;
import React from 'react';const Greet = () => <h1> Hello Soner</h1>export default Greet;
  • When would I use a Hook? If you write a function component and you need to handle some state to it. Now you are able to use a Hook inside the function component. Hooks don’t work inside classes. But you can use them instead of writing classes.
import React, { useState } from 'react';function Example() {*Declare a new state variable, which we'll call "count"const [count, setCount] = useState(0);
  • Container components may contain both presentational and container components “inside” but usually don’t have any DOM markup of their own except for some wrapping divs, and never have any styles.
  • Container components handle the state(data )and behavior to other container components.
  • Container components mostly stateful, handle the state to serve as data sources.
  • Container components usually can generated using higher order components such as connect() from React Redux
class PlayerListContainer extends React.Component {
state = { players: [] };

componentDidMount() {
fetchPlayers(players =>
this.setState({ players: players }));
}
render() {
return <PlayerList players={this.state.players} />;
}
}
export default PlayerListContainer;

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Soner Mezgitci

Soner Mezgitci

31 Followers

Software Engineer | Ruby on Rails | JavaScript | HTML5 | CSS | PostgreSQL | React | Redux