Saturday, May 16, 2020

React Hooks Testing

I am adding the reference to this blog, https://medium.com/javascript-in-plain-english/testing-react-hooks-be74ec3fc0c4, only because the author used a gif of 'Indiana Jones' which is a cool way of explaining a mock function. I haven't read the article yet.

More to come here...

Sunday, May 3, 2020

React Redux Example

Basics:
  • Redux provides means to create an empty store where application state can be manufactured.
  • You tell the store what to create as the application state, how to update the application state thru reducer.
  • Reading from the application state in application is straight forward.
  • Updating the application state is by triggering the update logic in the store by dispatching the actions.
  • NOTE: When you update a state, you don’t update the state but rather create a new state out of old state.
  • react-redux provides couple of additional facilities, Provider and connect.
  • Provider to provide the store to the root component.
  • Connect passes state, dispatch actions to child component. 
Example:
  • npx create-react-app reduxexample
  • cd reduxexample
  • npm install redux
  • npm install react-redux
  • Remove all files under src folder and public folder
  • Create index.html under public folder
  • Create rest of the files under src folder
  • npm start
index.html

index.js

reducer.js

dispatcher.js

kitchen.jsx













Menu.jsx

App.jsx

Saturday, April 18, 2020

Safety datasets

These are safety datasets EX CM AE DS MH IE LB VS
Which datasets are SAFETY datasets? AE CM DS EX MH IE LB VS

ES6 Super quick reference

Arrow functions:

// ES5
function sayHello (name) {
  return 'Hello ' + name
}

// ES6
const sayHello = (name) => 'Hello ' + name

console.log(sayHello('Ramesh'))

Variables:

var firstName = 'Ramesh'; // ES5

let firstName = 'Ramesh' // ES6 - have block scope

const firstName = 'Ramesh' // ES6 - as it says, it's a constant

Template Strings:

let strWelcome = 'Welcome'
// use the backticks to combine strings with variables
let templateString = `${strWelcome} Ramesh` console.log(templateString)

async await:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await

Destructuring:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Shorthand objects

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

Function arguments

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments

Expand arrays

https://www.smashingmagazine.com/2016/07/how-to-use-arguments-and-parameters-in-ecmascript-6/
let myArray = [1,2,3]
Math.max(...myArray)

Classes

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class

nvm - switch node versions with nvm

Node Version Manager (nvm) helps to switch between different versions of nodejs. This article provides all the details on nvm:

Some basic commands:
  • To install nvm on mac: brew install nvm
  • To install nodejs using nvm: nvm install node
  • To install a specific version of nodejs: nvm install 13.5.0
  • To use a specific version as default: nvm alias default 12.16.1
  • To see what versions are available on your local: nvm list
  • To use a specific version: nvm use <version number>
References:

https://michael-kuehnel.de/node.js/2015/09/08/using-vm-to-switch-node-versions.html

https://www.kulik.io/2019/05/01/set-default-node-version-using-nvm/

https://nodesource.com/blog/installing-node-js-tutorial-using-nvm-on-mac-os-x-and-ubuntu/