React lifecycle methods
constructor()
componentWillMount()
render()
componentDidMount()
componentWillReceiveProps(nextProps) - setState() can be called
| { | |
| "version": "0.2.0", | |
| "configurations": [ | |
| { | |
| "type": "node", | |
| "request": "launch", | |
| "name": "Jest All", | |
| "program": "${workspaceFolder}/node_modules/.bin/jest", | |
| "args": ["--runInBand"], | |
| "console": "integratedTerminal", |
| Function programming | |
| =================== | |
| Where Computations are modelled as evaluation of expressions | |
| 1. Functions are first class citizens - HOC, map | |
| 2. Functions don't produce side effects - | |
| 2.1 dont't access global variables, produce same return value given the same arguments | |
| 2.2 Uses immutable data structures | |
| 2.3 Memoization/Lazy evaluation - since with same arguments function return values are same they can be memoize |
React lifecycle methods
constructor()
componentWillMount()
render()
componentDidMount()
componentWillReceiveProps(nextProps) - setState() can be called
| 1. The render() function should be pure, meaning that it does not modify component state, | |
| it returns the same result each time it's invoked, and it does not directly | |
| interact with the browser. If you need to interact with the browser, | |
| perform your work in componentDidMount() or the other lifecycle methods instead. | |
| Keeping render() pure makes components easier to think about. | |
| 2. componentWillMount() - This is the only lifecycle hook called on server rendering. | |
| Generally, we recommend using the constructor() instead. | |
| 3. componentDidMount() is invoked immediately after a component is mounted. |
| echo -n "Enter Component name > " | |
| read componentName | |
| mkdir -p -- "$componentName" | |
| cd $componentName | |
| { | |
| echo "import React, { Component } from 'react';" | |
| echo "import { observer, inject } from 'mobx-react';" | |
| echo "import styles from './style.scss';" | |
| function underscoreToCamelCase(param){ | |
| var paramArray, firstLetter,camelCased=''; | |
| try{ | |
| paramArray = param ? param.split('_') : []; | |
| // case where there is no underscore | |
| if(paramArray.length < 2){ | |
| return (paramArray.length>0 ? paramArray[0].toLowerCase() : param); | |
| } | |
| for (var i = 1; i < paramArray.length; i++) { | |
| firstLetter = paramArray[i].charAt(0); |
| function getCardType(cardNum) { | |
| if(!luhnCheck(cardNum)){ | |
| return ""; | |
| } | |
| var payCardType = ""; | |
| var regexMap = [ | |
| {regEx: /^4[0-9]{5}/ig,cardType: "VISA"}, | |
| {regEx: /^5[1-5][0-9]{4}/ig,cardType: "MASTERCARD"}, | |
| {regEx: /^3[47][0-9]{3}/ig,cardType: "AMEX"}, |
| function extend(Child,Parent){ | |
| var F = function(){}; | |
| F.prototype = Parent.prototype; | |
| Child.prototype = new F(); | |
| Child.prototype.constructor = Child; | |
| } |
| module.exports = function(grunt) { | |
| grunt.initConfig({ | |
| /* | |
| copy header-template.html which will have placeholders for injecting css,js | |
| */ | |
| copy: { | |
| main: { | |
| files: [ |