singhArmani

import React from "react";
import ComponentB from "./componentB";

const someArbitaroryObj = {
  name: 'object has no name',
  someArray: [
    {
      id: 'aman',
      color: "red",
      value: {

singhArmani

import { object, array, shape, string, arrayOf, number } from "prop-types";

// inside ComponentB
static propTypes = {
    values: shape({
      name: string,
      someArray: arrayOf(
        shape({
          id: number.isRequired, // if passed props doens't have this id,

singhArmani

import React from "react";
import { arrayOf, shape, number } from "prop-types";
import { map } from "lodash";

const ComponentC = props => {
  const list = map(props.list, el => {
    return (
      <h3 key={el.id}>
        color: {el.color} --- value: {el.value.nestedValue}
      </h3>

singhArmani

import React from "react";
import Rx from "rxjs/Rx";

export default class Reactive extends React.PureComponent {
  state = {
    subject: null,
    subcription: null,
    value: 0
  };

singhArmani

export default class RenderProps extends Component {
/* 
  Encapsulate your logic here...
*/

  render(){
    // call the functional props by passing the data required to render UI
    return this.props.render(this.state)
  }
 }

singhArmani

export default class GiantComponent extends Component {
  componentDidMount(){
    //side effects
    this.makeRequest();
    document.addEventListener('...');
    this.timerId = startTimer();
    // more ...
  }
  
  componentdidUpdate(prevProps){

singhArmani

export default function HOC(WrappedComponent){
  return class EnhancedComponent extends Component {
   /* 
     Encapsulate your logic here...
   */
    
    // render the UI using Wrapped Component
    render(){
      return <WrappedComponent {...this.props} {...this.state} />
    }

singhArmani

import React, { useState } from 'react';

export default function MouseTracker() {
  
  // useState accepts initial state and you can use multiple useState call
  const [mouseX, setMouseX] = useState(25);
  const [mouseY, setMouseY] = useState(25);

  return (
    <div>

singhArmani

import React, { useState } from 'react';

export default function MouseTracker() {
  
  // useState accepts initial state and you can use multiple useState call
  const [mouseX, setMouseX] = useState(25);
  const [mouseY, setMouseY] = useState(25);

  function handler(event) {
    const { clientX, clientY } = event;

singhArmani

// you can write your custom hooks in this file
import { useState, useEffect } from 'react';

export function useMouseLocation() {
  const [mouseX, setMouseX] = useState(25);
  const [mouseY, setMouseY] = useState(25);

  function handler(event) {
    const { clientX, clientY } = event;
    setMouseX(clientX);