Skip to content

Instantly share code, notes, and snippets.

@peerreynders
peerreynders / reactIsAFramework.md
Last active August 22, 2024 08:46
React is a (view component) framework

"Art prior" to React:

Martin Fowler: InversionOfControl (2005-Jun-26)

Inversion of Control is a key part of what makes a framework different to a library. A library is essentially a set of functions that you can call, these days usually organized into classes. Each call does some work and returns control to the client.

A framework embodies some abstract design, with more behavior built in. In order to use it you need to insert your behavior into various places in the framework either by subclassing or by plugging in your own classes. The framework's code then calls your code at these points.

The litmus test:

  • If your code calls it, it's a library.
@wesbos
wesbos / async-await.js
Created February 22, 2017 14:02
Simple Async/Await Example
// 🔥 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()
function getCoffee() {
return new Promise(resolve => {
setTimeout(() => resolve('☕'), 2000); // it takes 2 seconds to make coffee
});
}
@markerikson
markerikson / redux-thunk-examples.js
Last active June 28, 2024 05:30
Redux-Thunk examples
// The classic AJAX call - dispatch before the request, and after it comes back
function myThunkActionCreator(someValue) {
return (dispatch, getState) => {
dispatch({type : "REQUEST_STARTED"});
myAjaxLib.post("/someEndpoint", {data : someValue})
.then(
response => dispatch({type : "REQUEST_SUCCEEDED", payload : response}),
error => dispatch({type : "REQUEST_FAILED", error : error})
);
import {action1, action2} from "myActions";
import {bindActionCreators} from "redux";
const mapDispatchToProps(dispatch) => {
return {
manuallyBoundAction : (...args) => dispatch(action1(...args)),
autoBoundAction : bindActionCreators(action2, dispatch),
multipleActionsTogether : bindActionCreators({action1, action2}, dispatch)
}
};