haldarmahesh

{
  "compilerOptions": {
  "sourceMap": true,
  "noImplicitAny": true,
  "module": "commonjs",
  "target": "es5",
  "jsx": "react"
  },
  "include": ["./app/**/*"]
}

haldarmahesh

import useKey from 'use-key-hook';
 
function MyComponent  = (props) => {
 useKey((pressedKey) => {
  console.log('Detected Key press', pressedKey);
 }, {
  detectKeys: ['g', 27, 53]
 });
};

haldarmahesh

useEffect(() => {
  chart = createAndSetupChartInDOM(props.chartsValue);
  return function clearChart() {
    this.chart.destroy(props.chartsValue);
  }
});

haldarmahesh

componentDidMount() {
  this.chart = createAndSetupChartInDOM(this.props.chartsValue);
}

componentDidUpdate(prevProps) {
  this.chart.destroy(prevProps.chartsValue);
  this.chart = createAndSetupChartInDOM(this.props.chartsValue);
}

componentWillUnmount() {

haldarmahesh

import React, { useState, useEffect } from 'react';
export default function counterHook() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = "Count is " + count;
  });

  return (
    <div>
      <div>

haldarmahesh

import React, { Component } from 'react'

export default class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    }
    this.handleIncrement = this.handleCounter.bind(this);
  }

haldarmahesh

const [count, setCount] = useState(0);
const [todos, setTodos] = useState(['Learn Hooks', 'Implement hooks']);
const [cart, setCart] = useState({id: 'xx22', name: 'iphone 8', quantity: 1});

haldarmahesh

const [count, setCount] = useState(0);

// e.g const [a, b] = [1, 2]
// The value of a is 1
// The value of b is 2
// This is array destructuring

haldarmahesh

const countVariables = useState(0); // return two items in an array
const count = countVariables[0]; // first item from array
const setCount = countVariables[1]; // second item from array

haldarmahesh

import React, { useState } from 'react';
export default function counterHook() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <div>
        <button onClick={() => setCount(count + 1)}> + Increment</button>
        <button onClick={() => setCount(count - 1)}> - Decrement</button>
      </div>
      <div>