Akimov Vladimir b2whats

Proposal for a lightning talk at the Reactive 2016.

Keep calm and like/retweet it on Twitter and star this Gist to vote on this talk.

Road from UndefinedLand

I work at Grammarly. We like React and happily use it in our applications. However, sometimes something goes wrong and bugs creep into the code. Here comes testing. It helps make us confident about the quality of our code.

#Recompose Workshop

##Stateless Function Components

Review stateless function components

best way to code markup
they take an object props, as their first arg, and context as second
they return jsx
they have no state...

The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.

There are a couple of likely reasons this warning could be appearing:

Are you using {...this.props} or cloneElement(element, this.props)? Your component is transferring its own props directly to a child element (eg. https://facebook.github.io/react/docs/transferring-props.html). When transferring props to a child component, you should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component.
You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).
React does not yet reco

	import R from 'ramda'

	const isObject = R.compose(R.equals('Object'), R.type);
	const allAreObjects = R.compose(R.all(isObject), R.values);
	const hasLeft = R.has('left');
	const hasRight = R.has('right');
	const hasBoth = R.both(hasLeft, hasRight);
	const isEqual = R.both(hasBoth, R.compose(R.apply(R.equals), R.values));

	const markAdded = R.compose(R.append(undefined), R.values);

	// @flow
	import reShallowEqual from 'recompose/shallowEqual'
	import Logger from './Logger'

	class Performance {
	static shouldComponentUpdate (component, nextProps, nextState, nextContext, dig = false) {
	if (!__DEV__) {
	return (
	!reShallowEqual(this.props, nextProps) \|\| !reShallowEqual(this.state, nextState) \|\| !reShallowEqual(this.context, nextContext)
	)

	// Usage:
	//
	// const backspace = 8;
	//
	// export default withHotkeys({
	// [backspace]: props => evt => {
	// ...
	// },
	// })(YourComponent);

	const blankLens = R.lens(
	(x) => x,
	(x) => x
	);

	const handler = {
	get: function(target, name, reciever){
	const nameAsInt = parseInt(name)
	if(!isNaN(nameAsInt)){
	return createLensObject(R.compose(target, R.lensIndex(nameAsInt)))

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Critical FOFT with Data URI</title>
	<style>
	@font-face {
	font-family: LatoSubset;
	src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAABVwAA0AAAAAG+QAARqgAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABMAAAABYAAAAWABEANkdQT1MAAAFIAAACkQAAA9wvekOPT1MvMgAAA9wAAABcAAAAYNjUqmVjbWFwAAAEOAAAADgAAABEAIcBBGdhc3AAAARwAAAACAAAAAgAAAAQZ2x5ZgAABHgAAA8EAAAUUN1x8mZoZWFkAAATfAAAADYAAAA2DA2UbWhoZWEAABO0AAAAHgAAACQPOga/aG10eAAAE9QAAADIAAAA2PXwFPVsb2NhAAAUnAAAAG4AAABuhQSA721heHAAABUMAAAAGgAAACAAOgBgbmFtZQAAFSgAAAA0AAAANAI2Codwb3N0AAAVXAAAABMAAAAg/3QAegABAAAADAAAAAAAAAACAAEAAQA1AAEAAHicTZO/SxthGMe/d4k2NFbSFE2Maaq2tJ4/qtE4dwnBoUgoHUq5pWBBaCv0h4OCS2MLGUuXIhlKhwxFMnVwcAvB4SiSQSRkOEK9xan/wdvPRYQSnrzv3fu8n8/7vO97siRd1z0tyS6WHj/V8OsXHzY1rCjvZYzCcevVy3ebioW9fkRl99sYUepn5vTZWtOhdW7v6MJas+aIDeujdW5d2GV7x/4VSUaKkSf8ipFN4rK/EdnjaQ9KDuKArimuId1QQjeV1C2NaFQppTWmjMaV1W1N6K7ua1qOZjSreeW1

	import React, { Component } from 'react'
	import { SubWidgetLink } from './routes'

	export default class MyComponentWithALink extends Component {
	render() {
	const { widget } = this.props

	return (
	<div>
	...

	////////////////////////////////////////////////////////////////////////
	// Intro
	///////////////////////

	// Tools like Redux-saga, React-redux and Reselect can easily be used without Redux
	// For Reselet there's nothing to do, it's just not coupled to Redux
	// For the others, you just need to provide an adapter

	// At Stample.co we use a legacy framework that is quite close to Redux but with a bad API
	// We want to progressively migrate to Redux, so starting now to use Redux tools on new features will make our migration faster