Study Saturdays - React.md

Study Saturdays - React

React + JSX

React doesn't require JSX but it's makes writing web apps tremendously easier. It also allows React to show more useful error and warning messages.

React.createElement(component, props, ...children) is equivalent to <Element prop={prop}><Child /></Element>

Ways to handle events

class Button extends React.Component {
  handleClick() {
    console.log('hello world')
  }
}

Arguments can be passed into event handlers in two ways:

1. onClick={event => this.addRow(id, event)} (passing the event object into the method is optional)
2. onClick={this.addRow.bind(this,id)}

If using the first method above, the order of the arguments is arbitrary. However, if you are using the bind method, id must be the first parameter in your method definition. Passing your method inside another function allows you to pass in the prop when the event is called. Otherwise writing something like onClick={this.addRow(id)} will immediately invoke the function and it won't be called when the event actually occurs.

1. Bind method in the constructor or when passing props
2. Use arrow functions when passing props onClick={e => this.handleClick(e)}
3. Using createReactClass (not covered in class)

Note: Defining methods with arrow functions are still being reviewed and should only be used experimentally.