Olivier JM OlivierJM

The introduction to Reactive Programming you've been missing

This tutorial as a series of videos

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.

Contributing

When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.

Please note we have a code of conduct, please follow it in all your interactions with the project.

Pull Request Process

Ensure that the project is building successfully

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/expect/1.20.2/expect.js"></script>
	</head>
	<body>




	const debounce = (func, delay) => {
	let inDebounce
	return function(...args){ // curry the the other arguments
	// const args = argumets
	const context = this
	clearTimeout(inDebounce)
	inDebounce = setTimeout(() => func.apply(context, args), delay)




	const debounce = (func, delay) => {
	let inDebounce
	return function(...args){ // curry the the other arguments
	// const args = argumets
	const context = this
	clearTimeout(inDebounce)
	inDebounce = setTimeout(() => func.apply(context, args), delay)

	// class component with destructuring
	class UserSection extends React.Component {
	render(){
	const { user, isActive } = this.props;
	return(
	<div>
	<p>{user.name}</p> <span>{isActive ? 'active' : 'offline'}</span>
	</div>
	)
	}


	// functional component with partial destructuring
	const UserSection = ({ user, isActive }) => (
	<div>
	<p>{user.name}</p> <span> {isActive ? 'active' : 'offline'} </span>
	</div>
	);

	// functional component with no destructuring
	const UserSection = props => (

	getRemoteData = async () => {
	try {
	const coursePromise = axios('http://x.x.x.x/api/course/');
	const topicPromise = axios('http://x.x.x.x/api/topic/');
	const [ courses, topics ] = await Promise.all(coursePromise, topicPromise]);
	this.setState({
	courses: courses.data.data,
	topics: topics.data.data,
	loading: false,
	});

	function getData() {
	HTTP.call('GET', 'https://jsonplaceholder.typicode.com/posts', (err, res) => {
	if(err){
	console.log(err);
	} else {
	console.log(res);
	}
	});
	console.log('Going to grab data');
	}