singhArmani

.first {
   padding: 10px;
   height: 300px;
   margin: 10px 30px 30px 10px;
   background: red;
   box-shadow: 0 0 0 10px gold;
   width: 100px;
   text-align: center;
   float: left
}

singhArmani

.first {
   padding: 10px;
   height: 300px;
   margin: 10px 30px 30px 10px;
   background: red;
   box-shadow: 0 0 0 10px gold;
   width: 100px;
   text-align: center;
   float: left
}

singhArmani

/**
 * Block level and Height
 */
div {
 width: 600px;
 background-color: gold;
}

singhArmani

/*Hard to read if used opacity*/
div {
box-shadow: 0 0 0 5px gold;
background: #f06;
font-size: 24px;
position: relative;
width:600px;
}

.opac {

singhArmani

singhArmani

componentDidMount() {
    setTimeout(() => {
      // checking if component hasn't been unmounted and 
        // thus it's safe to call setState
      if(!this.isUnMounted) {
         this.setState({
        value: 20
      });
      }
    }, 1000);

singhArmani

// Inside parent component
  state = {
    isLoading: true,
    posts: [],
    isErrorLoading: false,
    error: null
  };

  // rendering logic handles by Parent Component (if statements)
  // but the actual rendering job is handled by nested components

singhArmani

import React from "react";
export default class Counter extends React.PureComponent {
  state = {
    count: 0 // initial state
  };

  handleIncrement = () => {
    // as increment count depends on previous count value, 
    // we should use updater function
    this.setState(prevState => ({

singhArmani

const someArbitraryObj = {
  name: "object has no name",
  someArray: [
    {
      id: 1,
      color: "red",
      value: {
        nestedValue: 20
      }
    },

singhArmani

var array = [];
for(var i = 0; i <3; i++) {
 array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // ??