Vinh Le vinhlh

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.

🎨 when improving the format/structure of the code
🚀 when improving performance
✏️ when writing docs
💡 new idea
🚧 work in progress
➕ when adding feature
➖ when removing feature
🔈 when adding logging
🔇 when reducing logging
🐛 when fixing a bug

This is no longer needed as Emmet supports JSX - you just need to turn it all on. Did a quick tutorial: http://wesbos.com/emmet-react-jsx-sublime/

Thanks, @wesbos

Problem

Using emmet in jsx files
Emmet expands text when js autocomplete needed

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

Python VS ES6 syntax comparison

Python syntax here : 2.7 - online REPL

Javascript ES6 via Babel transpilation - online REPL

Imports

import math

1

You will get one of these:

Uncaught (in promise) TypeError: Cannot read property 'toUpperCase' of undefined(…)

ReactCompositeComponent.js:870 Uncaught TypeError: Cannot read property 'displayName' of undefined

if you try to:

	# post_loc.txt contains the json you want to post
	# -p means to POST it
	# -H adds an Auth header (could be Basic or Token)
	# -T sets the Content-Type
	# -c is concurrent clients
	# -n is the number of requests to run in the test

	ab -p post_loc.txt -T application/json -H 'Authorization: Token abcd1234' -c 10 -n 2000 http://example.com/api/v1/locations/

	import { Component } from "React";

	export var Enhance = ComposedComponent => class extends Component {
	constructor() {
	this.state = { data: null };
	}
	componentDidMount() {
	this.setState({ data: 'Hello' });
	}
	render() {

	{
	// http://eslint.org/docs/rules/

	"env": {
	"browser": true, // browser global variables.
	"node": false, // Node.js global variables and Node.js-specific rules.
	"worker": false, // web workers global variables.
	"amd": false, // defines require() and define() as global variables as per the amd spec.
	"mocha": false, // adds all of the Mocha testing global variables.
	"jasmine": false, // adds all of the Jasmine testing global variables for version 1.3 and 2.0.

	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])) {