Elemino

Idiomatic Data Fetching using React Hooks

This post has been written in collaboration with @klervicn

Virtually all web apps and websites need to pull data from a server, usually through a JSON-returning API. When it comes to integrating data fetching in React component, the "impedence mismatch" between the React components, which are declarative and synchronous, and the HTTP requests, which are imperative and asynchronous, is often problematic.

Many apps use third-party libraries such as Redux or Apollo Client to abstract it away. This requires extra dependencies, and couple your app with a specific library to perform data fetching. In most cases, what we want is a direct way to integrate plain HTTP requests (e.g. using native fetch) for usage in React components.

Here we will discuss how we can use React Hooks to do this in an elegant, scalable manner.

10 JavaScript Terms You Should Know

From currying to closures there are quite a number of special words used in JavaScript. These will not only help you increase your vocabulary but also better understand JavaScript. Special terms are normally found in documentation and technical articles. But some of them like closures are pretty standard things to know about. Knowing what the word itself means can help you know the concept it's named for better.

Arity
Anonymous
Closure
Currying
Hoisting
Mutation

--- Remove the history from
-rm -rf .git
--- recreate the repos from the current content only
-git init
-git add .
-git commit -m "Initial commit"
--- push to the github remote repos ensuring you overwrite history
-git remote add origin [email protected]:<YOUR ACCOUNT>/<YOUR REPOS>.git

	npm list -g
	/home/user/.nvm/versions/node/v10.14.1/lib
	├─┬ [email protected] -> /home/user/Desktop/Projects/create-react-native
	│ ├─┬ [email protected]
	│ │ ├── [email protected]
	│ │ ├─┬ [email protected]
	│ │ │ └── [email protected]
	│ │ └── [email protected] deduped
	│ ├─┬ [email protected]
	│ │ ├─┬ [email protected]

	// Class Inheritance Example
	// NOT RECOMMENDED. Use object composition, instead.

	// https://gist.github.com/ericelliott/b668ce0ad1ab540df915
	// http://codepen.io/ericelliott/pen/pgdPOb?editors=001

	class GuitarAmp {
	constructor ({ cabinet = 'spruce', distortion = '1', volume = '0' } = {}) {
	Object.assign(this, {
	cabinet, distortion, volume

	function Foo(who) {
	this.me = who;
	}

	Foo.prototype.identify = function() {
	return "I am " + this.me;
	};

	function Bar(who) {
	Foo.call(this,"Bar:" + who);

	How to revert to an earlier commit in git:

	Two good ways to roll back to an earlier stable commit:

	git revert --no-commit 0766c053..HEAD //The commit you want
	git commit --am "Your comment"
	git push

	---

	How to merge remote origin:

	(Make sure to save or stash your local changes because the merge action will make you lose them)

	git fetch origin
	git reset --hard origin/master
	git pull

	//set context
	var audioContext = new AudioContext()
	var speakers = audioContext.destination
	//call play function
	play(0, 3, .5)
	play(1, 10, .5)
	play(2, 15, .5)

	//play function
	function play (delay, pitch, duration) {