Vasanth Krishnamoorthy vasanthk

[12:03 AM] acemarke: "controlled" and "uncontrolled" inputs
[12:04 AM] acemarke: if I have a plain, normal HTML page, and I put <input id="myTextbox" type="text" /> in my page(edited)
[12:04 AM] acemarke: and I start typing into that textbox
[12:04 AM] acemarke: it remembers what I've typed. The browser stores the current value for that input
[12:05 AM] acemarke: and then sometime later, I can get the actual element, say, const input = document.getElementById("myTextbox"), and I can ask it for its value: const currentText = input.value;
[12:05 AM] acemarke: good so far?
[12:08 AM] acemarke: I'll keep going, and let me know if you have questions
[12:08 AM] lozio: ok, actually I'm reading
[12:09 AM] lozio: good
[12:09 AM] acemarke: so, a normal HTML input field effectively stores its own value at all times, and you can get the element and ask for its value

Cheng Lou - On the Spectrum of Abstraction

Cheng Lou, a former member of the React team, gave an incredible talk at React Europe 2016 entitled "On the Spectrum of Abstraction". That talk is available for viewing here: https://www.youtube.com/watch?v=mVVNJKv9esE

It's only a half-hour, but it is mind-blowing. It's worth re-watching two or three times, to let the ideas sink in.

I just rewatched the talk for some research, and wrote down a summary that's semi-transcript-ish. I didn't see any other transcripts for this talk, other than the auto-generated closed captions, so I wanted to share for reference.

Summary

What is React Fiber? And how can I try it out today?

what?

React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of research by the React team.

why?

React Reusable Component Factory

'use strict';

const ENTER_KEY = 13;

const emailFactory = function ({
  React,
  setEmail,

React.js

React

Element is a simple key,ref,props enclosure
Gets generated on every react batch strategy pass
It is "owned” by ReactCompositeComponent
JSX translates tags into ReactElement.createElement ftion calls

ReactCompositeComponent

React component (class)

Locate the section for your github remote in the .git/config file. It looks like this:

[remote "origin"]
	fetch = +refs/heads/*:refs/remotes/origin/*
	url = [email protected]:joyent/node.git

Now add the line fetch = +refs/pull/*/head:refs/remotes/origin/pr/* to this section. Obviously, change the github url to match your project's URL. It ends up looking like this:

	// === Arrays

	var [a, b] = [1, 2];
	console.log(a, b);
	//=> 1 2


	// Use from functions, only select from pattern
	var foo = () => [1, 2, 3];

	import React from "react";
	import { isEqual } from "underscore";

	/**
	* HOC for diagnosing unnecessary renders and identifying faulty selectors
	*
	* Adds a logger function to a component that lists all changed props
	* Also checks if changed props are deeply equal
	*
	* Usage: Decorate the component you are investigating with renderDoctor:

	// (c) 2012 Mark Wunsch http://markwunsch.com
	// MIT license.

	if (!String.fromCodePoint) {
	/*!
	* ES6 Unicode Shims 0.1
	* (c) 2012 Steven Levithan <http://slevithan.com/>
	* MIT License
	*/
	String.fromCodePoint = function fromCodePoint () {

	var tableRowNodes = document.querySelectorAll('.cast_list tr')
	var tableRowArray = Array.from(tableRowNodes)
	var {mainCast} = tableRowArray.reduce((acc, row) => {
	if (!acc.firstSkipped) {
	acc.firstSkipped = true
	} else if (acc.restOfCastStarted) {
	acc.rest.push(row)
	} else if (row.classList.contains('odd') \|\| row.classList.contains('even')) {
	acc.mainCast.push(row)
	} else {