Samuel Tucker

Samuel Tucker

1597975503

ES6 Classes and Functional Components In Under 30 Minutes!

Are you getting ready for an interview, or do you have a test next week?Lucky for you, I will show you the ins and outs of ES6 classes, right after this blueprint analogy!

A blueprint is a set of instructions on how to build something; that something could be anything, ranging from a chair to a house.

In JavaScript, blueprints are classes. Classes are used for creating objects with different properties.

For example, let’s say that we wish to build custom trees for Steve and Erica. The properties that you allow Steve and Erica to customize are the following:

  • Size of the bush
  • Color of the bush
  • Size of the trunk
  • Color of the trunk

Steve wants a tree with a black trunk and a green bush. Steve would also like his tree to have a bigger bush and trunk.

Similarly, Erica wants a tree with a blue trunk and a red bush.

Therefore, the class that you would use to build Ericas and Steves trees would look a little something like this:

class Tree {
    constructor(bushSize, bushColor, trunkSize, trunkColor) {
        this.bushSize = bushSize;
        this.bushColor = bushColor;
        this.trunkSize = trunkSize,
        this.trunkColor = trunkColor;
    }
}

const ericaTree = new Tree('1 ft^3', 'red', '1 ft', 'blue');
const stevesTree = new Tree('3 ft^3', 'green', '3 ft', 'black');

console.log(ericaTree);   // Tree {bushSize: '1 ft^3', bushColor: 'red', trunkSize: '1 ft',trunkColor: 'blue'}
console.log(stevesTree);  // Tree {bushSize: '3 ft^3', bushColor: 'green', trunkSize: '3 ft',trunkColor: 'black'}

The diagram below illustrates how the class Tree works:

classes analogy

Don’t worry if you are feeling a bit confused as a result of this example, you are not alone! We have a lot of examples up ahead that should help you master ES6 classes.

Let’s get right into it!

#es6 #javascript #developer

What is GEEK

Buddha Community

ES6 Classes and Functional Components In Under 30 Minutes!
Shahab Uddin

Shahab Uddin

1588449088

React Functional Components, Class Components and Pure Component

In this article we will learn about the different types of react components, and what are the differences in between the components (functional, class and pure components).

React components let you split the UI into independent, reusable pieces, and think about each piece in isolation. React components can be defined by subclassing React.Component or React.PureComponent as per react official doc.

Functional Components

A Functional component is the simplest way to define a component in ReactJs, it’s a simple javascript function which returns a React element. Functional components are also known as stateless components.

Let’s understand with an example of a Functional Component

import React from 'react';
 function App() {
  const greeting = 'Hello Functional Component!';
 return <h1>{greeting}</h1>;
}
 export default App;

React functional component with props
In React, props are just like HTML attributes for the components, these are used to pass some information from one component to another.

import React from 'react';
 function App() {
  const greeting = 'Hello Functional Component!';
 return <Headline value={greeting} />;
}
function Headline(props) {
  return <h1>{props.value}</h1>;
}
 export default App;

React functional component with ES6 arrow function

import React from 'react';
 const App = () => {
  const greeting = 'Hello Functional Component!';
 return <Headline value={greeting} />;
};
const Headline = ({ value }) => {
  return <h1>{value}</h1>;
};
export default App;

Class Components

A Class components are ES6 classes based Components. A component which provide more features to deal with codes. It also receives props like function components and is able to define its own states.
Each component in react has several life-cycle methods, which are being used from time to time.

Here are the list of Life-Cycle methods which are used depending on the requirements of code:

  1. constructor()
  2. getDerivedStateFromProps()
  3. render()
  4. componentDidMount()
  5. shouldComponentUpdate()
  6. getSnapshotBeforeUpdate()
  7. componentDidUpdate()
  8. shouldComponentUpdate()

We will go in depth of react life-cycle in our next article

Let’s take a example of class component

class Greeting extends React.Component {
constructor(props) {
    super(props);
  }
  render() {
    return <h1>Hello, Class Component</h1>;
  }
}
Export default Greeting

Pure Component

As per Reacts official documentation: React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.

If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.

Let's take an example while creating three files to understand the above official definition and how pure components works:

First file - index.js, import below created files here

import React, { Component } from 'react';
import Child from './Child';
import Pure from './pure';
 
class PureComp extends Component{
   constructor(props){
       super(props);
       this.state = {
           name: 'Shahab'
       }
   }
   shouldComponentUpdate(nextProps, nextState){
       if(nextState.name !== this.state.name){
           return true
       }
       return false
   }
   componentDidMount(){
       setInterval(() => {
           this.setState({
               name: 'Shahab'
           })
       }, 2000);
   }
 
   render(){
       return(
           <div>
               Parent Component: {this.state.name}   
               <Child />
               <Pure />
           </div>
       )
   }
}
export default PureComp;
 

Second file - pure.js

import React, { PureComponent } from 'react'
 class Pure extends PureComponent{
   render(){
       console.log('Pure Components')
       return(
           <div>Pure Components</div>
       )
   }
}
export default Pure

Third file - child.js

import React, {Component} from 'react'
 class Child extends Component{
   state ={
       name: 'Ibaad'
   }
   shouldComponentUpdate(nextProps, nextState){
       if(nextState.name !== this.state.name){
           return true
       }
       return false
   }
  
   render(){
       console.log('Child Components')
       return(
           <div>
               Child Component: {this.state.name}
           </div>
       )
   }
}
export default Child

Explanation of Shallow Comparison (SC) which are used in above pure components:
Primitive Types:
A (SC) b returns true if a and b have same values and are of same type.
Ex: string ‘Shahab’ (SC) string ‘Shahab’ returns true.

Complex Types
A (SC) b returns true if a and b reference the exact same object.
Ex in Array:

Var a = [1,2,3];
Var b = [1,2,3];
Var c = a;
Var ab_eq = (a === b) // false
Var ac_eq = (a === b) // true

Ex in Object:

Var a = {x = 1, x = 2};
Var b = {x = 1, x = 2};
Var c = a;
Var ab_eq = {a === c} // false
Var ac_eq = {a === b} // true

#reactjs #javascript #function #components #es6

Yashi Tyagi

1617449307

CA Classes - Best CA Classes Online

Chartered Accountancy course requires mental focus & discipline, coaching for CA Foundation, CA Inter and CA Finals are omnipresent, and some of the best faculty’s classes have moved online, in this blog, we are going to give the best way to find online videos lectures, various online websites provide the CA lectures, Smartnstudy one of the best site to CA preparation, here all faculty’s video lecture available.

check here : ca classes

#ca classes online #ca classes in delhi #ca classes app #ca pendrive classes #ca google drive classes #best ca classes online

Vincent Lab

Vincent Lab

1605017502

The Difference Between Regular Functions and Arrow Functions in JavaScript

Other then the syntactical differences. The main difference is the way the this keyword behaves? In an arrow function, the this keyword remains the same throughout the life-cycle of the function and is always bound to the value of this in the closest non-arrow parent function. Arrow functions can never be constructor functions so they can never be invoked with the new keyword. And they can never have duplicate named parameters like a regular function not using strict mode.

Here are a few code examples to show you some of the differences
this.name = "Bob";

const person = {
name: “Jon”,

<span style="color: #008000">// Regular function</span>
func1: <span style="color: #0000ff">function</span> () {
    console.log(<span style="color: #0000ff">this</span>);
},

<span style="color: #008000">// Arrow function</span>
func2: () =&gt; {
    console.log(<span style="color: #0000ff">this</span>);
}

}

person.func1(); // Call the Regular function
// Output: {name:“Jon”, func1:[Function: func1], func2:[Function: func2]}

person.func2(); // Call the Arrow function
// Output: {name:“Bob”}

The new keyword with an arrow function
const person = (name) => console.log("Your name is " + name);
const bob = new person("Bob");
// Uncaught TypeError: person is not a constructor

If you want to see a visual presentation on the differences, then you can see the video below:

#arrow functions #javascript #regular functions #arrow functions vs normal functions #difference between functions and arrow functions

Samuel Tucker

Samuel Tucker

1597975503

ES6 Classes and Functional Components In Under 30 Minutes!

Are you getting ready for an interview, or do you have a test next week?Lucky for you, I will show you the ins and outs of ES6 classes, right after this blueprint analogy!

A blueprint is a set of instructions on how to build something; that something could be anything, ranging from a chair to a house.

In JavaScript, blueprints are classes. Classes are used for creating objects with different properties.

For example, let’s say that we wish to build custom trees for Steve and Erica. The properties that you allow Steve and Erica to customize are the following:

  • Size of the bush
  • Color of the bush
  • Size of the trunk
  • Color of the trunk

Steve wants a tree with a black trunk and a green bush. Steve would also like his tree to have a bigger bush and trunk.

Similarly, Erica wants a tree with a blue trunk and a red bush.

Therefore, the class that you would use to build Ericas and Steves trees would look a little something like this:

class Tree {
    constructor(bushSize, bushColor, trunkSize, trunkColor) {
        this.bushSize = bushSize;
        this.bushColor = bushColor;
        this.trunkSize = trunkSize,
        this.trunkColor = trunkColor;
    }
}

const ericaTree = new Tree('1 ft^3', 'red', '1 ft', 'blue');
const stevesTree = new Tree('3 ft^3', 'green', '3 ft', 'black');

console.log(ericaTree);   // Tree {bushSize: '1 ft^3', bushColor: 'red', trunkSize: '1 ft',trunkColor: 'blue'}
console.log(stevesTree);  // Tree {bushSize: '3 ft^3', bushColor: 'green', trunkSize: '3 ft',trunkColor: 'black'}

The diagram below illustrates how the class Tree works:

classes analogy

Don’t worry if you are feeling a bit confused as a result of this example, you are not alone! We have a lot of examples up ahead that should help you master ES6 classes.

Let’s get right into it!

#es6 #javascript #developer

Higher-Order Functions Beginners Should Be Familiar With.

Higher-order functions are functions that operate on other functions, either by taking them as arguments or by returning them.

There are a lot more higher order functions than what will be covered in this article, but these are good ones to get you up and running as a beginner. These standard array methods are forEach() , filter() , map() and sort() .

  1. **forEach( ): **This is used when you want to operate on or interact with any element inside of an array. Basically works like the_ for loop._

N.B- I’d be using examples to illustrate each method so you can get a clearer picture, and also just printing to the console to keep the examples as simple and basic as possible.

Example: Lets say in an array of a group or friends, and we want to loop through that array and print to the console each element of that array.

Using a for loop ;

const friends = ['Toyin', 'Olumide', 'Fola', 'Tola'];

for ( let i=0; i < friends.length ; i++) {
  cosole.log (friends[i])
};

The action same as above can be achieved using theforEach() method as seen below;

const friends =  ['Toyin', 'Olumide', 'Fola', 'Tola'];

friends.forEach(function(name) {
  console.log(name)
};

What the forEach() method simply does is to take in a function as an argument and loop through each item in the array without using iteration[i].

This is really awesome when the ES6 arrow functions are used, our code is reduced to a single line that is clean and maintainable. As seen below:

const friends =  ['Toyin', 'Olumide', 'Fola', 'Tola'];

friends.forEach(name => console.log (name));

2. **_filter( ) : _**Just like the name implies, it is used to filter out elements of an array that do not meet the conditions set in the callback function passed as an argument. The callback function passed to the filter() method accepts 3 parameters: elementindex, and array , but most times only the element parameter is used.

**Example : **In an array showing a group of friends and their ages, lets say we want to print to the console the friends that can drink assuming the age limit for drinking is 18. Using a for loop without high order functions;

const friends = [
  {name : 'Toyin', age: 24},
  {name : 'Olumide', age: 14},
  {name : 'Fola', age: 12},
  {name : 'David', age: 42}
];
for ( let i=0 ; i<friends.length ; i++) {
   if (friends[i].age > 18) {
    console.log(`${friends[i].name} can drink`);
 }
};

Now using the filter() method :

const friends = [
  {name : 'Toyin', age: 24},
  {name : 'Olumide', age: 14},
  {name : 'Fola', age: 12},
  {name : 'David', age: 42}
];
friends.filter (function (friend) {
  if (friend.age > 18){
   return true;
 } 
});

#functional-programming #beginners-guide #javascript #higher-order-function #es5-vs-es6 #function