React Function vs Class Component

React has 2 Components

Function Component:

• Simplest form of react component
• It receives an object of properties and returns JSX (which looks like html)

Class component in React

Functional component

Simple react component which renders a button

const Button= function () {
return (
 <button>Go</button>
);
};
//Syntax to mount a component is ReactDOM.render
//First argument is the component and the second argument is where the 

//component needs to be rendered
ReactDOM.render(<Button/>,mountNode);

React Component, State and JSX

Component

• It takes an state and properties and uses those object to render html.
• State can be changed but properties cannot be changed
• They are written in a special syntax known as JSX
• All react component must have a render function
• We should always return one elements from the render function

Overview of React Native

• Provides native experience with less hassle and leverage existing skills using  JavaScript and React
• UI consists of 100% native ios/android controls without performance issues
• A web like user interface which allows us to refresh app from the simulator
• Apps can be debugged using chrome developer tools
• We can style views decoratively similar to css

 

Java script cheat sheet

Push to an array

 outArray.push(arr2[k].charCodeAt()-64)

Convert number to character using ASCII

 outArray.push(arr2[k].charCodeAt()-64)

Convert character to number using ascii

/convert the character value to number
           //note we are subtracting 64
              outArray.push(arr2[k].charCodeAt()-64)

Get first character from a string

function validatePalindrome(word)
{
   //charArray = word.split;
   return word[0];
}
//Function call 
console.log(validatePalindrome("BOB"));

Overview of React

• Is a JavaScript framework for building User interface
• It is not a framework
• It is considered as an view in MVC
• Virtual DOM gives React it's edge and makes it fast

Virtual DOM:

• Uses a virtual DOM to push only changes to the DOM instead of re-rendering everything
• V-Dom allows  rendering on the server side and sending the final HTML to the browser (SEO friendly )

JSX;

      Allows html in JavaScript which results in self contained components

Local storage in the browser

• The read-only local-storage property allows you to access a Storage object for the Document's origin;
• The stored data is saved across browser sessions. 
• local-storage is similar to session-storage, except that while data stored in local-storage has no expiration time, data stored in session-storage gets cleared when the page session ends — that is, when the page is closed.

ngx-bootstrap in angular 2

Create a new project

ng new wakeGenie

Create a new component

C:\Development\Wakegenie\webApp>ng generate component modal

Install bootstrap in angular 2

Use of Export and Require

Export

• The export statement is used when creating JavaScript modules to export functions, objects, or primitive values from the module so they can be used by other programs with the import statement
• Along with export we also need require or import

Require

•  Used to consume modules. It allows you to include modules into your programs. You can include built-in core Node.js modules, community-based modules (node_modules) and local modules

String to JSON object

•  A common use of JSON is to exchange data to/from a web server.
• When receiving data from a web server, the data is always a string.
• Parse the data with JSON.parse(), and the data becomes a JavaScript object.

Edit in plnkr

We would usually receive text from the server. We need to convert it into JavaScript object. In this scenario we use JSON.parse() function.

console.log("** Convert string into JSON object *****")
  

  var jsonstring='{"firstName":"Prathap","lastName":"Kudupu"}'
  
  console.log("\n string-->",jsonstring);
 
  var obj=JSON.parse(jsonstring);
  
  console.log("\nJSON-->",obj);

JSON object to string

 

•        A common use of JSON is to exchange data to/from a web server
•       When sending data to a web server, the data has to be a string
•       Convert a JavaScript object into a string with JSON.stringify()

Edit in plkr

 console.log("*** Convert JSON object to a string");
  var obj={
    firstName:"Prathap",
    lastName:"Kudupu"
  }
  console.log('\n obj', obj)
  console.log('Convert JSON object to string',JSON.stringify(obj));

Output

Note: The difference between string and object is that the property name is the object is not a string

Split and join in JavaScript

Split a phrase into words
This function takes a given phrase and splits based on space into a new array
ex : It would take "Prathap  Kudupu"  it would add it to an array with prathap and kudupu

Edit in plnkr

 console.clear();
  console.log("**** Split a phrase *****");
  
  function splitPhrase(str){
    console.log(str);
    return str.split(' ');
  }
  console.log(splitPhrase('Prathap Kudupu'));
  

Difference between let and var

The difference is scoping. var is scoped to the nearest function block and let is scoped to the nearest enclosing block, which can be smaller than a function block. Both are global if outside any block.

Also, variables declared with let are not accessible before they are declared in their enclosing block. As seen in the demo, this will throw a ReferenceError exception.

They are very similar when used like this outside a function block.

let me = 'go';  // globally scoped
var i = 'able'; // globally scoped

However, global variables defined with let will not be added as properties on the global windowobject like those defined with var.

console.log(window.me); // undefined
console.log(window.i); // 'able'

Client side PDF generation

We can generate PDF in JavaScript using jsPDF library.

Edit in plkr

Steps involved

• Use CDN reference to jsPDF 
• Open the document
• Pass the Json Object to the document
• Save the file

CallBack Functions

CallBack Function

• Passed as an argument to another function, and,
• is invoked after some kind of event.
• Once its parent function completes, the function passed as an argument is then called

Four important features of Angular 1

Tricky double problem

In one of the interview I was asked how to eliminate tricky double in an array.I have not heard about tricky double.

Tricky double means
" 1, 2, 8, 9, 1, 2 , 3, 2 " . In this example what we notice is that 1, 2 is a  tricky double. However 2 is repeated twice it is not a tricky double.

JavaScript pass by reference and pass by value

Pass by value

When we change the value in the inner scope a copy of the value is created, This is known as pass by value.

Promises in JavaScript

Promises

Promises in JavaScript are like promises in real life

• A promise can only succeed or fail once
• It cannot succeed or fail twice, neither can it switch from success to failure or vice versa
• If a promise has succeeded or failed, we later add a success/failure callback. The correct callback will be called, even though the event took place earlier

Closures in JavaScript

A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.