React Quickly.md

List of community resources:

• List of React components: https://github.com/brillout/awesome-react-components and http://devarchy.com/react-components
• Set of React components that implement the Google Material Design specification (https://design.google.com): http://react-toolbox.com
• Material Design React components: www.material-ui.com
• Collection of React components for Office and Office 360 experiences (http://dev.office.com/fabric#/components) using the Office Design Language: https://github.com/OfficeDev/office-ui-fabric-react
• Opinionated catalog of open source JS (mostly React) packages: https://js.coach
• Catalog of React components: https://react.rocks
• Khan Academy React components: https://khan.github.io/react-components
• Registry of React components: www.reactjsx.com

Using React to make a XHR fetch request in componentDidMount()

class Users extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      users: []
    }
  }
  componentDidMount() {
    fetch(this.props['data-url'])
      .then((response>response.json())
      .then((users)=>this.setState({users: users}))
  }
  render() {
    return <div className="container">
    <h1>List of Users</h1>
    <table className="table-striped table-condensed table table-bordered table-hover">
      <tbody>{this.state.users.map((user)=>
        <tr key={user.id}>
          <td>{user.first_name user.last_name}</td>
          <td>{user.email}</td>
          <td>{user.ip_address}</td>
        </tr>)}
      </tbody>
    </table>
    </div>  
    }
  }

JSX vs Not

• JSX makes things simpler, but must be compiled into Javascript with Babel

Without JSX

class Menu extends React.Component {
  render() {
    let menus = ['Home',
      'About',
      'Services',
      'Portfolio',
      'Contact us']
    return React.createElement('div',
      null,
      menus.map((v,i) => {
        return React.createElement('div',
          {key :i},
          React.createElement(Link, {label: v})
        )
      })
    )
  }
}

class Link extends React.Component {
  render() {
    const url='/'
      + this.props.label
        .toLowerCase()
        .trim()
        .replace(' ', '-')
    return React.createElement('div',
      null,
      React.createElement(
        'a',
        {href: url},
        this.props.label
      ),
      React.createElement('br')
    )
  }
}

ReactDOM.render(
  React.createElement(
    Menu,
    null
  ),
  document.getElementById('menu')
)

With JSX

class Menu extends React.Component {
  render() {
    let menus = ['Home',
      'About',
      'Services',
      'Portfolio',
      'Contact us']
    return <div>
      {menus.map((v,i) => {
        return <div key={i}><Link label={v}/></div>
      })}
    </div>
  }
}

class Link extends React.Component {
  render() {
    const url='/'
      + this.props.label
        .toLowerCase()
        .trim()
        .replace(' ', '-')
    return <div>
      <a href={url}>
      {this.props.label}
      </a>
      <br />
    </div>
  }
}

ReactDOM.render(
  React.createElement(
    Menu,
    null
  ),
  document.getElementById('menu')
)