{Richa Pujara is fully pure}

{ Why? }

& Container Component Pattern

What are these?
How to use them?
Applicability IRL
Storybook - Testing Buddy
My thoughts

{ Overview }

{ What is it? }

Pure component (props)

* Display
* User interaction

Container

* Fetches data

* Saves data

Storybook

* Provides different data sets

* Logs actions (eg save)

Pure component (props)

* Display
* User interaction

{ A way of writing code.. }

import React from 'react';

export default function DogImages() {
  const [dogs, setDogs] = React.useState([])

  React.useEffect(() => {
    fetch("https://dog.ceo/api/breed/labrador/images/random/6")
      .then(res => res.json())
      .then(jsonRes => setDogs(jsonRes.message));
  }, [])
  const myStyle = {
    border: '1px solid black',
    width: "80vw",
    height: "80vh",
    backgroundColor: "grey",
    overflow: "scroll",
    textAlign: "center",
  }
  return (
    <>
      <div>
        <h2 className="heading">Dogs Images</h2>
      </div>
      <div style={myStyle}>
        {dogs.map((dog, i) => <img src={dog} key={i} alt="Dog" width={'100%'} height={'100%'} />)}
      </div>
    </>
  )
}

# PRESENTING CODE

// DogsUI.js -- Presentational Component
import React from "react";
import PropTypes from 'prop-types'
function DogImages({ dogs, ...props }) {
  const myStyle = {
    border: props.border || '1px solid black',
    width: props.width || "80vw",
    height: props.height || "80vh",
    backgroundColor: props.backgroundColor || "grey",
    overflow: "scroll",
    textAlign: props.alignment || "center",
  }
  return (
    <div style={myStyle}>
      {dogs.map((dog, i) => {
        <img src={dog} key={i} alt="Dog" width={props.imgwidth || '100%'} height={props.imgheight || '100%'} />
      })}
    </div >
  )
}

export default DogImages

# PRESENTATIONAL COMPONENT

{A Better way of doing it}

// dogsContainer.js -- Container Component
import React from 'react';
import DogImages from './DogsUI'

export default function DogImagesContainer() {

  const [dogs, setDogs] = React.useState([])

  React.useEffect(() => {
    fetch("https://dog.ceo/api/breed/labrador/images/random/6")
      .then(res => res.json())
      .then(jsonRes => setDogs(jsonRes.message))
  }, [])

  return <DogImages dogs={dogs} />;

# CONTAINER COMPONENT

Container

* Fetches data

* Saves data

Pure component (props)

* Display
* User interaction

Context (shared state)

Container

* Fetches data

* Saves data

List

Context / shared state (also pure)

Add

Edit

View

{ Applicability IRL }

{ STORYBOOK DEMO }

{ And I think... }

{ Why containers? }

Separation of APIs/ App logic from Presentational part
Reusability of components
Sharing states
Makes App structure easier to understand

{Richa Pujara is fully pure}

{ Why? }

{ Overview }

{ A way of writing code.. }

{A Better way of doing it}

{ STORYBOOK DEMO }

{ Why containers? }

Separation of APIs/ App logic from Presentational part

Reusability of components

Sharing states

Makes App structure easier to understand

Answer to a big question..

Thank You...

Container Pattern in React

Container Pattern in React

richap