arrow functions

arrow functions inherit the this context they are written in; so they don't need to bind anymore in your constructor.

note that if you have curly braces {} after the => in your arrow function, JS will always assume that's the function body instead of the return value:

// wrong: this function does not return anything
this.setState(prevState => {count: prevState.count + 1})

instead, you want to wrap the {} in () so JS recognizes that it's a returned object:

// correct: wrap the object in parentheses
this.setState(prevState => ({count: prevState.count + 1}))

or just use a return statement.

we can now define class fields outside of a constructor. e.g. inside your component just setting

class NewJSFeatures extends Component {
  state = {
    count: 0
  }

	render() {
		return "hello";
	}
}

when you de-structure an object you can map its properties to new names!!

// save this.state.count into const number
const {count: number, greeting, age} = this.state
console.log(number);

relatedly, when you export something you can rename it:

export {ThemeContextProvider, Consumer as ThemeContextConsumer};

fragments

remember that render must return one top-level div. can wrap your elements in a <React.Fragment> to avoid unnecessary nesting. the empty tag <> ... </> is a shorthand for a fragment.

<GrandParent>
	<h1> I'm grandparent </h1>
	<div>
		<h1> I'm parent </h1>
		<div>
			<h1> I'm child </h1>
			<p> hello </p>
		</div>
	</div>
</GrandParent>

<!-- fragments can convert the above DOM into the below -->

<GrandParent>
	<h1> I'm grandparent </h1>
	<h1> I'm parent </h1>
	<h1> I'm child </h1>
	<p> hello </p>
</GrandParent>

default props and PropTypes

given a component Card, you can set default props:

Card.defaultProps = { cardColor: 'blue' }; 

this works regardless of whether it's a class or function component.

for class components, you can also set defaults inside the class:

class Card extends React.Component {

	static defaultProps = { cardColor: 'blue' };

	render() {
		// ...
	}
}

the PropTypes library, maintained by React, allows us to specify types for our props. you must import it and then you can specify prop types:

import PropTypes from 'prop-types'

// ... define component

Card.propTypes = {
	cardColor: PropTypes.string

	// you can also make a property required
	otherProp: PropTypes.string.isRequired
}

if you don't pass in the right prop types or don't provide a required prop, the library will give you a warning (but, because it's JavaScript, it will still run).

here are a few other examples of prop types:

• from the react docs