Scribd
Upload
87 views1 page

React With Babel Cheatsheet

This document summarizes various React concepts including: 1. Binding methods to component instances when used as handlers. 2. Importing React to make JSX work by making a React object available. 3. Using destructuring to make stateless function components cleaner. 4. Using template literals to make dynamic class names and object properties.

Uploaded by

Nenad Trajkovic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
87 views1 page

React With Babel Cheatsheet

This document summarizes various React concepts including: 1. Binding methods to component instances when used as handlers. 2. Importing React to make JSX work by making a React object available. 3. Using destructuring to make stateless function components cleaner. 4. Using template literals to make dynamic class names and object properties.

Uploaded by

Nenad Trajkovic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Components are classes Bound methods

export class MyComponent extends Component { Bind methods to your component instance when used as handlers:
componentWillMount() {
export class MyComponent extends Component {
// ...
onMouseEnter = event => {
}
this.setState({hovering: true})
}
render() {
}
return <div>Hello World</div>
}
} Import

JSX assumes a Reactobject is available, so make sure to import it:


Static properties
import React, { Component, PropTypes } from 'react'
export class MyComponent extends Component {
static propTypes = {
Destructuring
// ...
} Especially useful with stateless function components:
static defaultProps = {
// ... export const Commas = ({items, ...otherProps}) =>
} <div {...otherProps}>{items.join(', ')}</div>
}
Template literals

Initial state Use to make dynamic class:


export class MyComponent extends Component { <input className={`Control-${this.state}`} />
state = {
disabled: this.props.disabled, And to sweeten your object literals with dynamic property names:
}
} this.setState({
[`${inputName}Value`]: e.target.value,
});
Constructors

Replace componentWillMount: Class decorators

export class MyComponent extends Component { Use in place of mixins:


constructor(props) {
@something(options)
super(props)
class MyComponent extends Component {}
// Do stuff
}
// Desugars to
}
let MyComponent = something(options)(
class MyComponent extends Components {}
2016 © James K Nelson - jamesknelson.com )

You might also like