Quick Reference Study Notes for ReactJS (Foundation)

ReactJS

ReactJS is ClientSide library to create user interface for a web-page.

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

React.DOM.render(<Hello name='Ashish' />,el)

 

Children

Childrens can be passed as children property

<AlertBox>

<h1>You have pending notifications</h1>

</AlertBox>

class AlertBox extends Component {

render () {

  return <div className='alert-box'>

    {this.props.children}

  </div>

}

}

 

Import Multiple exports

import React, {Component} from 'react'

import ReactDOM from 'react-dom'

class Hello extends Component {

...

}

States

constructor(props) {

  super(props)

  this.state = { username: undefined }

}

this.setState({ username: 'rstacruz' })

render () {

  this.state.username

  const { username } = this.state

}

class Hello extends Component {

  state = { username: undefined };

}

Properties

<Video fullscreen={true} autoplay={false} />

render () {

this.props.fullscreen

const { fullscreen, autoplay } = this.props

}

We can use this.props to access properties passed to the component.


Nesting

class Info extends Component {

  render () {

    const { avatar, username } = this.props

     return <div>

      <UserAvatar src={avatar} />

      <UserProfile username={username} />

    </div>

  }

}

We can use fragments to return multiple children without adding extra wrapping nodes to the DOM.

 

import React, {

  Component,

  Fragment

} from 'react'

 class Info extends Component {

  render () {

    const { avatar, username } = this.props

     return (

      <Fragment>

        <UserAvatar src={avatar} />

        <UserProfile username={username} />

      </Fragment>

    )

  }

}

 

Setting default props

Hello.defaultProps = {

  color: 'blue'

}

 

Setting default state

class Hello extends Component {

  constructor (props) {

    super(props)

    this.state = { visible: true }

  }

}

We should set default state in the constructor()

If we’re not using constructor the using Babel with proposal-class-fields.

class Hello extends Component {

  state = { visible: true }

}

}

Other Components

function MyComponent ({ name }) {

  return <div className='message-box'>

    Hello {name}

  </div>

}

Function components have no state and their props are passed as the first parameter to the function.

 

Pure Components

import React, {PureComponent} from 'react'

 

class MessageBox extends PureComponent {

}

When we use Performance-optimized version of the React.Component then it does not rerender if the props/state has not been changed.

 

->DOM Nodes

DOM Events

class MyComponent extends Component {

  render () {

    <input type="text"

        value={this.state.value}

        onChange={event => this.onChange(event)} />

  }

   onChange (event) {

    this.setState({ value: event.target.value })

  }

}

Lists

class TodoList extends Component {

  render () {

    const { items } = this.props

     return <ul>

      {items.map(item =>

        <TodoItem item={item} key={item.key} />)}

    </ul>

  }

}

 

We should always pass a key property.

 

PropTypes

import PropTypes from 'prop-types'

any Anything

Basic

string

number

func Function

bool True or false

Enum

oneOf(any) Enum types

oneOfType(type array) Union

Array

array

arrayOf(...)

Object

object

objectOf(...) Object with the value of certain type

instanceOf(...) Instance of a class

shape(...)

Element

element React element

node DOM node

Required

(...).isRequired Required

Basic types

MyComponent.propTypes = {

  email:      PropTypes.string,

  seats:      PropTypes.number,

  callback:   PropTypes.func,

  isClosed:   PropTypes.bool,

  any:        PropTypes.any

}

Enumerables (oneOf)

MyCo.propTypes = {

  direction: PropTypes.oneOf([

    'left', 'right'

  ])

}

Required types

MyCo.propTypes = {

  name:  PropTypes.string.isRequired

}

Elements

MyCo.propTypes = {

  // React element

  element: PropTypes.element,

   // num, string, element, or an array of those

  node: PropTypes.node

}

Array and Objects

MyCo.propTypes = {

  list: PropTypes.array,

  ages: PropTypes.arrayOf(PropTypes.number),

  user: PropTypes.object,

  user: PropTypes.objectOf(PropTypes.number),

  message: PropTypes.instanceOf(Message)

}

MyCo.propTypes = {

  user: PropTypes.shape({

    name: PropTypes.string,

    age: PropTypes.number

  })

}

*NOTE : "This study material is collected from multiple sources to make a quick refresh course available to students."