Saturday, January 6

How to comment in React JSX

Recently, the react bug hit me and I am trying to learn and build a application using React JS, material UI and so on.

However the reason I write this blog post is to document a very interesting finding that I learned today. If we want to include comments in our render method in React JSX, the only way to do it is using  curly braces followed by JS style commenting like below

{ /* This is a react JSX comment */ }

You Cannot use HTML style comments <!-- some comment --> or simple single line Javascript comments starting with // or just /* multi line JS comments */

You will always have to use a curly brace followed by a Multi line style JS comment

{ /* This will be a comment in React JSX */ }

Javascript 101 - Part 3

If you have an array of objects and wish to find the maximum value of any attribute (key) in that object.

var maxValue = Math.max.apply(Math,arrayName.map(function(o){return o.keyNameInObj;}))
https://stackoverflow.com/questions/4020796/finding-the-max-value-of-an-attribute-in-an-array-of-objects


Scope

Is this a valid javascript?

{{{}}}

The answer is yes. Becuase they are nested block scope. You can define a variable and access it within our outside of the curly braces.

For example

> {{ var a = 42; }}

and then we can access the variable like

> a

Thus in javascript we have function scope and we have block scope.
The function scope gets created everytime we define a new function.

Block scope can be simple begin and end curly braces like { } or when used in an if statement or in for loop.

A var keyword behaves differently in a function scope and a block scope.

For example, a variable defined in a function is NOT AVAILABLE outside the function scope whereas,

a variable defined inside a block scope IS AVAILABLE outside the block scope. For example the variable used in the for loop, will continue to exist outside the for loop.

In modern javascript, we have a new keyword to define variables. "let", we can define a variable using let and it will be available only in the scope it is defined be it funciton scope or block scope.






Monday, November 20

Javascript 101 - part 2

Arrays

.push() takes one or more parameters and "pushes" them onto the end of the array.

.pop() is used to "pop" a value off of the end of an array. We can store this "popped off" value by assigning it to a variable.

pop() always removes the last element of an array. What if you want to remove the first?
That's where .shift() comes in. It works just like .pop(), except it removes the first element instead of the last.
.unshift() works exactly like .push(), but instead of adding the element at the end of the array, unshift() adds the element at the beginning of the array.

Global Scope and Functions
In JavaScript, scope refers to the visibility of variables. Variables which are defined outside of a function block have Global scope. This means, they can be seen everywhere in your JavaScript code.
Variables which are used without the var keyword are automatically created in the global scope. This can create unintended consequences elsewhere in your code or when running a function again. You should always declare your variables with var.
Local Scope and Functions
Variables which are declared within a function, as well as the function parameters have local scope. That means, they are only visible within that function.
It is possible to have both local and global variables with the same name. When you do this, the local variable takes precedence over the global variable.

What happens if a function has two return types..
function a(){  return "I will be returned";  return "I will not be returned"; } 
a();
// I will be returned
Operators
Equality operator ==
Strict Equality operator ===
InEquality Operator !=
Strict InEquality Operator !==
Greater than >
Greater than equal to >=
Less than <
Less than equal to <=
Logical AND &&
Logical OR ||
=======================================================================
JSON is a related data interchange format used to store data.
Below is usage of hasOwnProperty methond on myObj object.
var myObj = { "name" : "testing", "age" : 16 }
if(myObj.hasOwnProperty("name")){ return myObj.name; }else{ return "Not Found"; }


Thursday, November 16

Javascript 101

Javascript has 7 different types of DATA TYPES
undefined
null
boolean
strings
symbol
number
object

======================================================================

If you have array of Objects with duplicate items that you want to filter to unique items. You can do the following




=======================================================================

How to get subset of an object.

Lets say an object
a = { "a" : 1, "b" : 2, "c" : 3 };

We want a subset of the object into a new object
b = { "a" : 1 }

Check the solution at below SO link
https://stackoverflow.com/questions/17781472/how-to-get-a-subset-of-a-javascript-objects-properties



Thursday, September 14

LEARNING REACT: MAKE WEBSITES - Part 4

Understanding JSX spread

In bootstrap, "btn btn-primary" etc are classes of the button and if we notice a pattern, "btn" is a common keyword. We can generalize this in our component to let user avoid the use of "btn" text.

See the function classify below.
Note the use of split and join function.
Also note, the special ES6 `` usage.  This is new feature of ES6 and it is called as Template literals.

At simplest, template literals allow easy interpolation of variables into strings, and easier multiline strings.
var name = "John";
 
var text = `Hello ${name}`;
console.log(text);
The output would be “Hello John” as you might guess.

In the above function, not the use of disabled class in className

Creating external utilities for modules for React Components.

We create a utils.js file basically for all the utility functions. Let us put the classify function in the utils.js file and then export it in the Button component.

utils.js


Importing the classify function from the utils.js file.



Removing Unknown Props from HTML

- HTML expects only a subset of properties
- React throws errors
- Learning how to avoid them