jordanrios94

import logo from './logo.svg';
// hocs
import reaquireAuth from './requireAuth';

/*
DECORATOR - (@)
- Cannot use them in create-react-app, unless inject them
- Support is wonky, spec is not final
- Can export only the decorated component
*/

jordanrios94

Render Props

A "render" prop?

A simple technique for sharing code between React components using a prop where its value is a function

What can we pass as a prop?

<Header

jordanrios94

Compound Components

What is it?

• Give more rendering control to the user
• The functionality of the component stays intact, but the look and the order of the children can be changed
• Allow an implicit way of sharing state between components without manually passing it

Can't we just use Render Props?

jordanrios94

function handlePopState(e) {
 // code before url change
}

window.addEventListener('popstate', handlePopState);

jordanrios94

Controlled components

Allow their state to be driven from props, as seen below.

<input
  placeholder="email"
  onChange={e =>
    this.setState({
      email: e.target.value

jordanrios94

Portals

What is it?

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

Example

index.html

jordanrios94

Design Patterns

What are design patterns?

Reusable, reliable solutions that we face everyday in software development.

One is always tasked with a hurdle to solve a recurring problem over and over again, where we (the developers) challange ourselves to solve the problem once and for all, aka the solution. Therefore, the primary goal of design patterns are to encourage programming efficiency and code reuse.

If you find your solution to work time and time again, it is safe to share, evangelise, and document your solution and make it official.

jordanrios94

Overriding library classes

Often in a JS project we import a 3rd party library in order to provide a solution to a problem we have encountered, however there are cases where a library does not provide the full specific functionality that we have to achieve when working on a project.

In production scenarios, we will include libraries for testing and database tools such as puppeteer, and mongoose.

Case Study 1 - Using Prototype

This is the most simplest solution out there to achieve and we will take mongoose for an example case study.

jordanrios94

var lines = {
	B: 'Bakerloo',
	C: 'Central',
	D: 'District',
	H: 'Hammersmith & Circle',
	J: 'Jubilee',
	M: 'Metropolitan',
	N: 'Northern',
	P: 'Piccadilly',
	V: 'Victoria',

jordanrios94

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchAdmins } from '../actions';
import requireAuth from '../components/hocs/requireAuth';

class AdminsListPage extends Component {
    componentDidMount() {
        this.props.fetchAdmins();
    }