Modern JavaScript

Creating variables using const

Before starting, You need to create the index.html and index.js files in the same directory. In the index.html file, create a single HTML document. Under the body section create the script tag, src will index.js.

Then open the script.js file and start writing javascript here. In Javascript variables can hold many different types of data, they can hold strings, integers type, and even functions have values that can hold objects, and arrays. The two ways to create a variable are const and let.

const lets you create a variable whose value cannot be changed.

Let-declared variables cannot be redeclared.

What is Template Strings

Template strings are a better alternative to string concatenation.

Example with code.

let fname = 'rahul';
let lname = 'rana';
let age = promps("Guess rahul's age..");

//old way
let result = fname + '' + lname + ' is ' + age + ' year old ';

//using template string
let result = `${fname} ${lname} is ${age} years old`;

Default Parameter: with ES6 we have the ability to pass the default parameters for your function arguments. Let’s create a simple function, I will explain with the example code.

function welcome(user, message){
  alert(`Hello ${user}, ${message}`);
}

welcome('Rahul', 'Good Morning');
//output : Hello Rahul, Good Morning

If the user did not provide the argument in the function. the function will break and the output will be undefined. In this case, you need to define the default value in the function.

function welcome(user="Mystery Person", message="Who are you?"){
  alert(`Hello ${user}, ${message}`);
}

welcome();
//output : Hello Mystery Person, Who are you?
//In this case if there is no argument passed in the function, function will not break.

Arrow Functions: Arrow functions are different from regular functions. First I will be writing a simple regular function and then convert it to an arrow function which help to understand the arrow function.

function gretting(message){
  return alert(`${message} everyone!`);
}
grettings(Good Afternoon);
//output: Good Afternoon everyone!

//using arrow function
let gretting = (message) => alert(`${message} everyone!`);

If you send only one parameter, there is no need for the parenthesis, but if you pass more than one argument, a parenthesis must be passed. Arrow functions are similar to anonymous functions, functions without a name, and they start with a parenthesis.

Another example.

let createBlog = (title, body) => {
 if(!title){
   throw new Error('A title is Required');
 }
 if(!body){
   throw new Error('Body cant be empty');
 }
return alert(`${title} - ${body}`);
}

createBlog('Blog title', 'Blog Body');
//output: Blog title - Blog Body

Destructuring Object: We can break down the object or array structure into variables. Let’s start with an example.

let thingsToDo = {
  morning : "Exercise",
  afternoon : "work",
  evening : "code",
  night : ["sleep", "Dream"]
}

Let’s assume we only need to use the first two variables morning and afternoon

let {morning, afternoon} = thingsToDo;
console.log(morning, ' - ', afternoon);

Destructuring Array

lets [firstmountain] = ['Everest', 'Fish Tail']
console.log(firstmountain); //output = Everest

lets [, secondmountain] = ['Everest', 'Fish Tail']
console.log(firstmountain); //output = Fish Tail

Restructuring: Restructuring is the process of putting it back together.

Example

var name = 'Everest';
var height = '8848';

var adventureClimbing = {name, height};
console.log(adventureClimbing);
//output : Everest, 8848

We can also create object methods with restructure.

var name = 'Everest';
var height = '8848';
var output = function(){
  console.log(Mt. ${this.name} is ${this.height} meter tall);
};
var adventureClimbing = {name, height, output};
console.log(adventureClimbing);
//output : Mt. Everest is 8848 meter tall

Spread and Rest Operators …

we can use 3 dots… we can use this to combine two arrays into one or combine two objects into one.

Let’s create a simple example.

var mountains = ['Everest', 'Fish Tail'];
var mountainsfromjapan = ['Fuji'];

var allMountains = [...mountains, ...mountainsfromjapan];
console.log(allMountains);
//output: ['Everest', 'Fish Tail', Fuji]

Using Object

var day = {
'breakfast' = 'toast with milk',
'lunch' = 'rice with rajma';
}
var night = {
'dinner' = 'maggi with garlic bread';
}
var picnic = {...day, ...night};
console.log(picnic);
//output: {breakfast:"toast with milk",lunch:"rice with rajma",dinner:"maggi with garlic bread"}

//rest example
var members = ['Ashish', 'Rahul', 'Rajan'];
var [first, ...rest] = members;

console.log(rest);
//output: ['Rahul', 'Rajan']

Classes, constructors, and super

Classes: We could create a function and add methods to the function object using the prototype. In javascript functions are objects – inherit the behavior of the object.

Let’s create a function.

//function
function holiday(destination, days){
 this.destination = destination;
 this.days = days;
}
//method
holiday.prototype.info = function() {
   console.log(this.destination + " | " + this.days + " days");
}

var Bharat = new holiday("India", 30);
console.log(Bharat.info());
//output: Bharat | 30 days

Another Example with class and constructors.

Created the class holiday, used the constructor to set the properties, added method info, and used it using the (new) keyword.

class holiday{
constructor(destination, days){
 this.destination = destination;
 this.days = days;
}

 info(){
  console.log(this.destination + " | " + this.days + " days");
 }
}

const trip = new holiday("Bharat", 30);
console.log(Bharat.info());
//output: Bharat | 30 days

How we can extend from one class to another? Children’s classes can extend from the parent class so that all the parent’s class property and methods are available to the children’s class. I will explain with an example.

//Super class//
class holiday{
constructor(destination, days){
 this.destination = destination;
 this.days = days;
}

 info(){
  console.log(this.destination + " | " + this.days + " days");
 }
}

//sub class//
class gear extends holiday{
  constructor(destination, days, gear){
   this.gear = gear;
  }

 info(){
   super.info();
   console.log(`Hello Buddy Bring ${this.gear.join("yours")}`);
 }
}

const tripwithgear = new gear('Bharat', 30, ['Camera', 'sunglasses']);
tripwithgear.info();
//output//
//Bharat | 30 days
//Hello Buddy Bring yours Camera yours sunglasses

---

Let’s Start React JS

Steps to install REACT

• First, you need to install the node. URL: nodejs.org
• Either you can download it for MAC or Windows.
• Once you complete the download, open the terminal and check the node version using the command (node -v)
• Then you can open reactjs.org click on the Get Started button and then go to the installation section in the sidebar. Under the installation, dropdown click on Try React which redirects to the Add React page. On this page scroll down and check for the link with the text [Add React to a New App] – Click on that link which will redirect to the Create React App steps page.
• We can use the command to build the new react single-page application.

npm install -g create-react-app
create-react-app techfixxo
cd techfixxo
npm start

A freshly installed React Application.

Storing data in component stat via Ajax

Here we can use open-source API Random user and set the data. To make an API call we use the library to make Ajax call easier. We can use the Axios library.

Axios is a promise-based HTTP client for the browser and node.js. URL: https://github.com/axios/axios

We can use Axios to make API Calls.

First, we need to install the package. We can use the command to install the Axios package.

//using npm
$ npm install axios

//Using yarn:
$ yarn add axios

After installing the Axios, you need to import the Axios into the App.js file.

//app.js//
import React, {Component} from 'react';
import axios from 'axios';

Class App extends Component {
   render() {
     return <div className="App">Hello World, Welcome to TechFixxo</div>;
  }
}
export default App;

We need to hold the data in the local component, we use the state, state will hold the data.

//app.js//
import React, {Component} from 'react';
import axios from 'axios';

Class App extends Component {
constructor(props){
  super(props)
  //state
     this.state = {
       users : []
 };
}
componentWillMount() {
  axios('https://api.randomuser.me/?results=5').then(response => this.setStat({
     users: response.data.results
}))
}
   render() {
     return <div className="App">Hello World, Welcome to TechFixxo</div>;
  }
}
export default App;

Now we can render state data using the map

//app.js//
import React, {Component} from 'react';
import axios from 'axios';

Class App extends Component {
constructor(props){
  super(props)
  //state
     this.state = {
       users : [],
       loading: false
 };
}
getUsers(){
this.setStat({
    loading:true
 })
 axios('https://api.randomuser.me/?results=5').then(response =>             this.setStat({
     users: response.data.results,
     loading: false
    })
  );
}
componentWillMount() {
   this.getUsers();
}
   render() {
    return (
     <div className="App">
      {!this.state.loading ?
       this.state.users.map(user => (
    <div>
     <h3>{user.name.first}</h3>
     <p>{user.email}</p>
      <hr />
     </div>
     )) : 'Loading'}
   </div>;
   );
  }
}
export default App;

Imports Exports props

How to create and use the separate component

Let’s create a new component inside the src folder as the name is Loading.js. In this file, we will create the stateless component

//Loading.js
import React from 'react'

const Loading = () => <h2>Loading</h2>

export default Loading;

Now this Loading Component is available to use any other component. We just need to import this component. We can import this component into the App.js component. After import, we can render this component.

//app.js//
import React, {Component} from 'react';
import Loading from './Loading';

Class App extends Component {
   render() {
     return <div className="App"><Loading /></div>;
  }
}
export default App;

If you have many Components in a single file, The way to export many components is.

//Loading.js
import React from 'react'

export const Loading = () => <h2>Loading</h2>
export const Loading = () => <h2>Loading</h2>
export const Loading = () => <h2>Loading</h2>
export const Loading = () => <h2>Loading</h2>

//How to import this component in the App.js?
import {Loading} from './Loading';

---

How to pass the property in the component?

//app.js//
import React, {Component} from 'react';
import Loading from './Loading';

Class App extends Component {
   render() {
     return <div className="App">
      <Loading message="Hello welcome to TechFixxo World..." />
   </div>;
  }
}
export default App;

//Here the message is property for the Loading Component//

//Loading.js
import React from 'react'

const Loading = props => <h2>{props.message}</h2>;
OR
const Loading = ({message}) => <h2>{message}</h2>;

export default Loading;

---