You can convert js-code like this:
var a = '1',
b,
c = '2';
into
import { Component } from "React"; | |
export var Enhance = ComposedComponent => class extends Component { | |
constructor() { | |
this.state = { data: null }; | |
} | |
componentDidMount() { | |
this.setState({ data: 'Hello' }); | |
} | |
render() { |
if (!Object.assign) { | |
Object.defineProperty(Object, 'assign', { | |
enumerable: false, | |
configurable: true, | |
writable: true, | |
value: function(target) { | |
'use strict'; | |
if (target === undefined || target === null) { | |
throw new TypeError('Cannot convert first argument to object'); | |
} |
You can convert js-code like this:
var a = '1',
b,
c = '2';
into
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])) { |
This gist had a far larger impact than I imagined it would, and apparently people are still finding it, so a quick update:
(async main(){...}())
as a substitute for TLA. This completely eliminates the blocking problem (yay!) but it's less powerful, and harder to statically analyse (boo). In other words the lack of TLA is causing real problemsI'll leave the rest of this document unedited, for archaeological
import HomePage from './HomePage.jsx'; | |
import AboutPage from './AboutPage.jsx'; | |
import UserPage from './UserPage.jsx'; | |
import FourOhFourPage from './FourOhFourPage.jsx'; | |
const PAGES = { | |
home: HomePage, | |
about: AboutPage, | |
user: UserPage, | |
}; |
class Input extends Component { | |
focus() { | |
this.el.focus(); | |
} | |
render() { | |
return ( | |
<input | |
ref={el=> { this.el = el; }} | |
/> |
class SignInModal extends Component { | |
componentDidMount() { | |
this.InputComponent.focus(); | |
} | |
render() { | |
return ( | |
<div> | |
<label>User name: </label> | |
<Input |
I made a little styling lib called glam
(some features are in development)
let's start off with the simplest use case. we'll make an 'index.html' page,
and assume we've setup our js bundler to output bundle.js
Name of thing | Sorta like... | Mounted? | Can you even setState? | What would you say... ya do here? |
---|---|---|---|---|
constructor | initialize() | nope | nope | init stuff NO side effects |
componentWillMount | beforeDomReady() | nope | yeah but don't | Only needed in createClass now use constructor for most things |
render | render | nope | please no | render stuff and don't set any state please |
componentDidMount | domReady() | yup | yup | DOM is a go init jQuery plugins dispatch stuff |
componentWillReceiveProps | onChange() | yup | yup |