A Quick introduction to React Js

React.js cheatsheet

React is a JavaScript library for building user interfaces. This guide targets React v15 to v16.

Component

import React from 'react'
import ReactDOM from 'react-dom'
class Hello extends React.Component {
  render () {
    return <div className='message-box'>
      Hello {this.props.name}
    </div>
  }
}
const el = document.body
ReactDOM.render(<Hello name='Joseph' />, el)

State

constructor(props) {
  super(props)
  this.state = {}
}
this.setState({ username: 'rstacruz' })
render () {
  this.state.username
  ···
}

Use states (this.state) to manage dynamic data.
See: States

Children

<AlertBox>
  <h1>You have pending notifications</h1>
</AlertBox>
 
class AlertBox extends React.Component {
  render () {
    return <div className='alert-box'>
      {this.props.children}
    </div>
  }
}

Children are passed as the children property.

Defaults

Setting default props

Hello.defaultProps = {
  color: 'blue'
}

See: defaultProps

Setting default state

class Hello extends React.Component {
  constructor (props) {
    super(props)
    this.state = { visible: true }
  }
}

Set the default state in the constructor().

See Setting the default state

Other Components

Function Components

function MyComponent ({ name }) {
  return <div className='message-box'>
    Hello {name}
  </div>
}

Functional components have no state. Also,
their props are passed as the first parameter to a function.

See: Function and Class Components

Pure components

class MessageBox extends React.PureComponent {
  ···
}

Performance-optimized version of React.Component.
Doesn’t rerender if props/state hasn’t changed.

See: Pure components

For more about react Read