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


Wednesday, September 13

LEARNING REACT: MAKE WEBSITES - Part 3

Building our first JSX React Component

install react and react-dom to your project. We need this dependencies in production so use below command

npm install --save react react-dom

This will ensure that an entry is created in the package.json file for all the dependencies.

In your client.js file, import the node modules using the import keyword.
import helps import external libraries.

import React from "react";
import ReactDOM from "react-dom";

You can create a JSX component and simply assign html to it. But remember below points
1) html has a class attribute, however in ES6, class is a reserved keyword, so we would have to use "className" instead of "class". For eg

const component = <div className="myclass">Some content</div>;

2) Also, wrting inline style in JSX should be done via an object. For eg
const component = <div style={{backgroundImage:"url(image.jpg)", color:"white"}}>Some content</div>;

To render your react component,

ReactDOM.render(component, document.getElementById('react'));


Creating a React component.

It is always a good to have components in their individual files. The most minimalistic react component would have a class that extends the react component with a render method to render the contents. See below example.

Create a file app.js

import React from "react";

class App extends React.Component{
    render(){
        return <div>This is text</div>
    }
}


Now in your client.js file, you can import your class App as

import React from "react";
import ReactDOM from "react-dom";

import App from "./app";

In the above line of code, no need to type the file extension.
Next, you need to render the class that we imported, i.e the App class. It can be done using the below line of code.

ReactDOM.render(, document.getElementById('react'));


Building a reusable React Button.

The basic react component file will
1) Import react
2) create a class that extends react component module
3) Create a render() method and return a value.

Create a file button.js and insert below code.

import React from "react";

export default class Button extends React.Component{
render(){
return <a className="btn btn-primary" href="http://google.com">Button Name</a>;
}
}

We can now use the Button class multiple times and create multiple buttons with the same code.

Go to app.js file and insert below code

import React from "react";
import Button from "./bootstrap/button";

export default class App extends React.Component{
render(){
return <div className="jumbotron text-center">
<div className="container">
<h1>Learning React</h1>
<p>with Bootstrap and SASS</p>
<Button />

<Button />
</div>
</div>;
}

}

In the above code, if you see, we have included the Button class multiple times.

Now with the above code the problem is, the Button would always have the same parameters/attributes such as classname, href etc.

To make this class reusable, we can use JSX property this.props in our button class like below

import React from "react";

export default class Button extends React.Component{
render(){

return <a className={this.props.className}
href={this.props.href} target="_blank">Discover things.</a>
}
}

And in our app.js where we call the Button class, we can pass the arguments like below

import React from "react";
import Button from "./bootstrap/button";

export default class App extends React.Component{
render(){
return <div className="jumbotron text-center">
<div className="container">
<h1>Learning React</h1>
<p>with Bootstrap and SASS</p>
<Button href="#" className="btn btn-danger" />
</div>
</div>;
}

}

In above situation, we are still restricted to having specific arguments. Let's say you want to add some more arguments to your Button like id, or any other data-attributes, then a much better approach is to use below code i.e {...this.props}

Creating dynamic JSX tags

You may want to use the "a" tag and "button" tag interchangeably in your code and instead of creating two component for different tags, you could combine them into one component like below.

In your button.js file

import React from "react";

export default class Button extends React.Component{
render(){

const Tag = this.props.href?"a":"button";
return <Tag {...this.props}>{this.props.name}</Tag>;
}
}

So if the component has a href attribute, then call the a tag else call the button tag.


Thursday, June 29

LEARNING REACT: MAKE WEBSITES - Part 2

Once the setup is complete and you are ready to rock and roll, the next step is to learn ReactJS framework. So lets get started.

1) Get the Bootstrap css file and import it in your index.html file.

2) Configure webpack to take an input file and convert to output file. Basically that is required because we would be using ES6, JSX etc which requires compilation into plain javascript. Thus webpack is required to do the necessary compilation for us.  See below screenshot.


3) Common way of writing in React is to add support for ES6 and JSX with Babel.
We would be using ES6 but with help of Babel using loaders that will transcribe to ES5. Babel polyfill will ensure support for older browsers.

Common way of building react component is using ES6. Some common packages that are required for development are Babel packages.
1) babel-loader - Webpackage library that helps convert code from ES6 to ES5
2) babel-preset-es2015
3) babel-preset-react  - Takes JSX and convert code for easy development.
4) babel-polyfill - For browsers that are older and don't support ES5, it ensures some polyfill.

Add in package.json


Add an entry in the webpack.config.js file for loader. We want all the .js files to be transpiled to ES5 excluding the node_modules folder. See below screenshot



Sunday, June 11

LEARNING REACT: MAKE WEBSITES - Part 1

Below are notes from the React tutorial I took from safaribooksonline.

Installation and Setup
1) Make sure you have node and npm installed.

2) Create a directory "public/img"

3) Run command "npm init"

4) Create a file "index.html" inside your public directory.
If you are using VSCode, it has emmet plugin already installed. By typing "!" and pressing tab, you will get the basic html ready to get started.

Setting up Webpack and WebPack-Dev-Server
1) Install webpack

Notice the parameter "--save-dev". It means that we want the the package to be installed for development purpose. Also this parameter will add an entry to our package.json file, so anyone who wishes to run our application on their local environment will just have to "npm install" and it will download the package automatically instead of performing installation of webpack explicitly.


2) Next step is to configure webpack. The best way to do is by creating a js file. Create a file "webpack.config.js" in parallel to "package.json".



3) To start the webpack server, go to "package.json" and add a your server to the scripts parameter as shown in screenshot below. Note the name of the script is "start".


Thus, to start a webpack server, go to console and run the command "npm run start" or "npm start" because "start" is a common keyword, "npm start" will work fine.