Week Two of Job Search- React Containers and Components

Finishing off my second week of job searching for my new tech career. I have worked on my portfolio, it is nearing completion! I have contacted many people on Linkedin to connect and network for job opportunities but only one so far has gotten back to me and he was only seeking people with five or more years experience, though left me with some encouraging words. To continue learning I plan to work on some other projects once my portfolio is finished, including learning new concepts, such as React Hooks, that we never went over at Flatiron but seem important to the program.

For the coding lesson this week I plan on going over React components and containers, the building blocks of React apps! My last React project, the Dive Logging app, makes great use of containers and components to bring together a beautiful and organized app.

React Containers are mainly focused on how the stuff in your app works, they will very rarely have any HTML outside of wrappings like a <div> and are often keeping state. Containers are used to provide data, behavior, and logic to the presentational components. The following is an example of the container from my Dive Log app that handles logging out of the app:

import React from 'react';
import { connect } from 'react-redux';
import { logout } from '../actions/currentUser';
import { Redirect } from "react-router";

class Logout extends React.Component {
    state = {
        navigate: false
    }
    handleClick = (e) => {
        e.preventDefault()
        this.props.logout()
    }

    render() {
        const { navigate } = this.state

        if (navigate) {
            return <Redirect to="/" push={true} />
        }
        return (
            <div className="center logout">
                <button onClick={this.handleClick}>Logout</button>
            </div>
            )
    }
}

const mapStateToProps = ({ currentUser }) => {
    return {
      currentUser
    }
  }

export default connect(mapStateToProps, {logout})(Logout)

As you can see there is minimal HTML, rather it holds state and tells the app how to function when a user wants to logout.

Components, often also referred to as ‘presentational components’ are used to shape the look of your app with HTML and sometimes also simple styling. They typically do not load or alter the data they are rendering and are usually stateless. The following is another example from my Dive Log app on what a presentational component looks like, this one is used to generate how all the logged dives will look like on the show page:

import React from 'react';
import moment from 'moment';

const AllDivesCard = props => {

    return (
        <div className="divecard">
            {props.picture !== "" && 
                <img className="divecard-image" src={props.picture} alt="dive pic"/>
            }
            {props.picture === "" && 
                <img className="divecard-image" src="https://i.imgur.com/87BYxCK.jpg" alt="dive pic"/>
            }
            <div className="divecard-text">
            <h3>Dive # {props.id}</h3>
                <p><strong>Location: </strong>{props.location}, <strong>date: </strong>{moment(props.date).format("MMM Do YYYY")}, <strong>time: </strong>{props.time}</p>
                <p><strong>Dive Time: </strong>{props.dive_time} min., <strong>Water Temp: </strong>{props.temperature} F, <strong>Visibility: </strong>{props.visibility} m <strong>Max Depth: </strong>{props.depth} m</p>
                <p><strong>Comments:</strong><br></br>{props.comments}</p>
            </div>
        </div>
    )
}

export default AllDivesCard

As you can see it is a lot of HTML to shape the way the page looks. It does not have any state, and is getting data from another container (through props) that it will use to generate each logged dive.

A good React app is composed of multiple React components and containers that come together to build a beautifully complex app that remains well organized and allows simple changes to happen without the need to redo much of the code. Organizing your app with separate folders for components and containers helps organize your app and keep it maintainable.