Jordan Rios 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.

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.

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

Controlled components

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

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

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

window.addEventListener('popstate', handlePopState);

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?

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

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

	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
	*/

	/**
	* Filters an array of objects with multiple criteria.
	*
	* @param {Array} array: the array to filter
	* @param {Object} filters: an object with the filter criteria as the property names
	* @return {Array}
	*/
	function multiFilter(array, filters) {
	const filterKeys = Object.keys(filters);
	// filters all elements passing the criteria