Derek Cuevas DerekCuevas

The introduction to Reactive Programming you've been missing

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

	import { h, cloneElement, Component } from 'preact';


	/** Example <Fetch url="/foo.json" /> compositional component.
	* Just to demonstrate a compositional component that requires input massaging.
	*/
	class Fetch extends Component {
	state = { loading: true };
	componentDidMount() {
	this.update();

	import React from 'react'
	import { render } from 'react-dom'
	import { Match, Link, BrowserRouter as Router } from 'react-router'
	import matchSorter from 'match-sorter'
	import './styles.css'

	const API = 'http://localhost:3000'
	const token = localStorage.booksToken \|\| Math.random().toString()
	localStorage.booksToken = token

	// connect() is a function that injects Redux-related props into your component.
	// You can inject data and callbacks that change that data by dispatching actions.
	function connect(mapStateToProps, mapDispatchToProps) {
	// It lets us inject component as the last step so people can use it as a decorator.
	// Generally you don't need to worry about it.
	return function (WrappedComponent) {
	// It returns a component
	return class extends React.Component {
	render() {
	return (

	;;
	;; NS CHEATSHEET
	;;
	;; * :require makes functions available with a namespace prefix
	;; and optionally can refer functions to the current ns.
	;;
	;; * :import refers Java classes to the current namespace.
	;;
	;; * :refer-clojure affects availability of built-in (clojure.core)
	;; functions.