Getting Started

Summary: React is a JavaScript library for building user interfaces. The perfect React Cheat Sheet for daily use with a lot of Javascript / JSX snippets. Love React and Redux, but find yourself going back to the docs over and over.

Import multiple exports

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
class Start extends Component {

}

 

Components

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='Vishnu' />, el)

Properties

<Video fullscreen={true} autoplay={false} />
render () {
  this.props.fullscreen
  const { fullscreen, autoplay } = this.props
}

 

States

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

Children

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

Functional components

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

 

Pure components

import React, {PureComponent} from 'react'

class MessageBox extends PureComponent {

}

 

Component Lifecycle

componentWillMount() {

}
componentDidMount() {

}
componentWillReceiveProps() {

}
shouldComponentUpdate() {

}
componentWillUpdate() {

}
componentDidUpdate() {

}
componentWillUnmount() {

}
componentDidCatch() {

}

2 - Redux

Install Redux

npm install --save redux
# Install react binding
npm install --save react-redux
# Install dev tools
npm install --save-dev redux-devtools

Actions

// Declare action type
const SUBMIT_FORM = 'SUBMIT_FORM'
// Action shape with payload
{
  type: SUBMIT_FORM,
  payload: {
    firstName: 'John',
    lastName: 'Doe',
  }
}
// Action shape without payload
{
  type: SUBMIT_FORM,
}
// Declare action creator
function submitForm(formData) {
  return {
    type: SUBMIT_FORM,
    payload: {
      firstName: formData.firstName,
      lastName: formData.lastName,
    }
  }
}

Reducers

// Declare an initial state
const initialState = {
  firstName: '',
  lastName: '',
  city: '',
}
// Declare a minimal reducer
function userReducer(state = initialState, action) {
  return state;
}
// Handle action in reducer
function userReducer(state = initialState, action) {
  switch (action.type) {
   case SUBMIT_FORM:
     return {
       ...state,
       firstName: action.payload.firstName,
       lastName: action.payload.lastName,
       city: action.payload.city,
     };
   default:
     return state;
 }
}

You can check these website also:

https://reactcheatsheet.com/

https://github.com/enaqx/awesome-react

https://github.com/vincsb/react-cheat-sheet

Comments

Sign in to publish a comment

0 comments

Be the first to comment on this post.