frankfaustino’s gists

frankfaustino / Container.jsx

Created March 15, 2018 18:13

React: Separate stateful aspects from rendering

	// Container Pattern: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
	import Loading from './Loading'
	import RenderUser from './RenderUser'

	class User extends Component {
	state = { loading: true }

	render() {
	const { loading, user } = this.state
	return loading ? <Loading /> : <RenderUser user={user} />

frankfaustino / Functional.jsx

Last active March 15, 2018 18:17

React: Stateless functional components

	// Good
	const TableRowWrapper = ({ children }) => (
	<tr>
	{children}
	</tr>
	)

	// Bad
	class TableRowWrapper extends Component {
	render() {

frankfaustino / PropsRestSpread.jsx

Created March 15, 2018 18:17

React: rest/spread operator and props

	const MyComponent = ({ className, ...others }) => (
	<div className={className}>
	<MyOtherComponent {...others} />
	</div>
	)

frankfaustino / redux.js

Created March 21, 2018 19:41

Redux explained as a reduce function

	const state = []

	// Actions => tells the reducer which action to perform and provides the values
	const action = [
	{ type: 'ADD_TODO', text: 'do laundry', completed: false, id: 0 },
	{ type: 'ADD_TODO', text: 'walk the kids', completed: false, id: 1 },
	{ type: 'ADD_TODO', text: 'take the dogs to school', completed: false, id: 2 },
	{ type: 'ADD_TODO', text: 'kiss the plant', completed: false, id: 3 },
	{ type: 'ADD_TODO', text: 'water the wifey', completed: false, id: 4 },
	{ type: 'REMOVE_TODO', id: 0 },

frankfaustino / aync-await–error–handler.js

Last active May 5, 2018 04:24

Error handling async await in an Express server 🤖

	const express = require('express')
	const db = require('./data/helpers/tagDb')
	const server = express()
	server.use(express.json())

	// Catches async/await errors/Promise rejections and passes it along to express middleware
	const catchErrors = fn => (req, res, next) => fn(req, res, next).catch(next)

	// Error Handler (displays full error details)
	const handleErrors = (err, req, res, next) => {

frankfaustino / async-await.js

Created May 5, 2018 04:24

	// 🔥 Node 7.6 has async/await! Here is a quick run down on how async/await works

	const axios = require('axios'); // promised based requests - like fetch()

	const getCoffee = () => new Promise(resolve => {
	setTimeout(() => resolve('☕'), 2000); // it takes 2 seconds to make coffee
	});

	async go = () => {
	try {

frankfaustino / reducedfruits.js

Created June 4, 2018 02:26

reducing an object into an object, array, or int

	const fruits = {
	apple: 'better',
	banana: 'good',
	peach: 'ok',
	pear: 'good'
	}

	Object
	.entries(fruits)
	.reduce((goodFruit, [fruit, quality]) => {

frankfaustino / React.html

Last active July 14, 2018 08:13

React.html

	<html>

	<body>
	<div id="root"></div>
	</body>
	<script>
	const rootEl = document.getElementById('root')
	function createElement(type, props, ...children) {
	const element = document.createElement(type)
	Object.entries(props).forEach(([key, value]) => {

frankfaustino / thunks.js

Created July 30, 2018 01:49

thunk vs async thunk

	/* —— thunks
	* A nullary function (no arguments) that returns closured value(s).
	* Basically a token or wrapper that represents a specific value.
	*/

	const add = (x, y) => x + y

	const thunk = () => add(6, 3)

	thunk() // 8

frankfaustino / slim-redux.js

Created August 17, 2018 06:47 — forked from gaearon/slim-redux.js

Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)

	function mapValues(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	result[key] = fn(obj[key], key);
	return result;
	}, {});
	}

	function pick(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	if (fn(obj[key])) {

Frank Faustino frankfaustino