Forem: Gurshehzad Singh

10 npm Commands that every developer must know

Gurshehzad Singh — Mon, 21 Jun 2021 16:22:00 +0000

NPM stands for Node Package Manager and it is the package manager for the Node JavaScript platform. It put modules in place so that node can find them, and manages dependency conflicts intelligently. Most commonly, it is used to publish, discover, install, and develop node programs.

Some Important npm commands every developer should know are:

1) npm i
Here i stands for install. It installs all the packages
mentioned in package.json.

2) npm install -production
It installs all the packages mentioned in package.json, except
the dev dependencies.

3) npm i lodash
It installs a package with name of "lodash", you can use your
favorite package name.

4) npm install --save-dev lodash
It installs the specific package as a dev dependency, in my case
the name is "lodash".

5) npm list
It lists the versions and name of all dependencies in the current
directory.

6) npm update
It updates all the production packages in the current directory.

7) npm install -g nodemon
It installs a package globally on your machine, with -g flag. In
my case, nodemon will be installed globally.

8) npm remove lodash
It uninstalls / removes a previously installed node module in the
current directory.

9) npm -v
It displays the npm version installed on your system.

10) npm doctor
It checks our environment so that our npm installation has what
it needs to manage our JavaScript packages.

Thanks for reading!

Next.js - Your next go to framework

Gurshehzad Singh — Tue, 25 May 2021 16:52:47 +0000

Next.js is a React framework developed by Vercel that is bound to ease your life as a React developer by abstracting away the common and redundant tasks (such as routing) into relatively simpler and powerful APIs. That way, you can focus on writing your apps instead of reinventing the wheel.

Next.js is a lightweight open source JavaScript framework built on top of the React library that enables quick server side rendering and is server agnostic (i.e. use with its own built in HTTP server or use with any Node.js server). It is put out by the folks at Zeit. Routing is simply done by the page and makes getting a website up and running easy and quick. In fact, we're going to do in 5 minutes or less.

Why Next.Js?

1) Relatively easy to learn

That’s it. If you’ve written any React at all, you’d find yourself at home with Next.js. It offers you advanced tools and a robust API support, but it doesn’t force you to use them.

2) Built-in CSS support

Writing CSS in component-driven frameworks comes with a sacrosanct need for the “cascade”. It’s why you have CSS-in-JS tools, but Next.js comes out of the box with its own offering — styled-jsx, and also supports a bevy of styling methodologies.

3) Automatic TypeScript support

If you like to code in TypeScript, with Next.js, you literally have automatic support for TypeScript configuration and compilation.

4) Multiple data fetching technique

It supports SSG and/or SSR. You can choose to use one or the other, or both.

5) File-system routing

To navigate between one page to another is supported through the file-system of your app. You do not need any special library to handle routing.

Installation

We'll use NPM to install Next.js along with its dependencies.

First we'll make a directory to hold our Next.js project and go into it:

mkdir my-portfolio-site
cd my-portfolio-site

Then we'll initialize it with a package.json file and use the y flag to just go ahead and do it and skip the questions: npm init -y.

Now we are ready to install Next.js:

npm install react react-dom next

Next.js is not super opinionated on how you structure your project, with one exception. All your actual web pages need to go inside a pages folder, so let's go ahead and create it: mkdir pages.

Lastly, let's go ahead and update the package.json with the run script language to initialize our Next.js app. Open up the package.json file and add the following under scripts:

"dev": "next",
"build": "next build",
"start": "next start"

Great, we've now installed Next.js. So lets dive into it.

Creating The First Component

Remember that Next.js is just JavaScript and rests on top of React, so all we need to do is build some components. Routing is done by the name of the component, so for example, mysite.com/blog, would be from a blog.js named file in the pages directory.

Open up the project in your favorite code editor and create a file called index.js in the pages directory.

Let's create a component that returns some HTML!

const Index = () => (
    <div>
        <h1>My Portfolio Site</h1>
        <p>Welcome to my portfolio! This is designed with Next.js!</p>
    </div>
)

export default Index

Now if you run npm run dev from the command line and navigate to http://localhost:3000 from your web browser you will find this content being served.

Working with Link API

Don't we all love the page rendering in React? We can accomplish the same client side navigation with Next.js using the Next.js Link API. Let's say our portfolio site had a Contact page, so we would have an updated Index component that looked like this:

import Link from 'next/link';

const Index = () => (
    <div>
        <h1>My Portfolio Site</h1>
        <p>
            Welcome to my portfolio! This is designed with Next.js!
            Please{' '}
                <Link href="/contact">
                    <a>contact me</a>
                </Link>{' '}
            to get more information.
        </p>
    </div>
)

export default Index

First, we imported the Link API module from Next.JS and then we used it inline in the midst of our content by making a placeholder for it with the {' '} syntax. The component is a Higher Order Component and supports only a couple arguments such as href (and href argument itself supports arguments like query strings and the like) and as for URL masking. The underlying component, in this case a tag supports other props like style and onClick.

Making Smaller Reusable Components
Now we are off to a great start, but can you imagine having to rewrite our header for every page we create? That's why we break up our site into small reusable components!

Next.js has no opinion on how you should do this. But, remember, if you put them in the pages directory they will be accessible to to the outside world directly. Do you want someone directly accessing your header, navbar and footer? If not, then place them outside it. Go ahead and create a components top level directory: mkdir components and touch header.js to create a header.js file.

Open up the header.js file in your code editor and create a header component!

const Header = () => (
    <div>
        <h1>My Portfolio Site</h1>
    </div>
)

export default Header

Then go ahead and go back to your index.js file and incorporate your new header:

import Link from 'next/link';
import Header from '../components/header';

const Index = () => (
    <div>
        <Header />
        <p>
            Welcome to my portfolio! This is designed with Next.js!
            Please{' '}
                <Link href="/contact">
                    <a>contact me</a>
                </Link>{' '}
            to get more information.
        </p>
    </div>
)

export default Index

Now all that new component did was save us one

tag, but it doesn't take much imagination to understand that in a real world site there would be a lot more there than just one HTML tag.

We have now successfully installed Next.js, initialized a new project, created components, linked to them using the Next.js Link API and reused components across our project. This is a great foundation to build from.

There is a lot more to Next.js like CSS in the JavaScript, custom server (for example, using Express), passing state between pages and so much more. Please check out the documentation to take an even deeper dive and enjoy taking the next step with Next.js!

Thanks for reading.

Know all about ES6

Gurshehzad Singh — Mon, 03 May 2021 17:40:43 +0000

ES6 also known as ECMAScript 6 is the latest JavaScript standard meant to ensure the interoperability of web pages across different web browsers.

Below mentioned are all the new concepts introduced in ES6 that you need to be aware of:

1) Block scoping

1.1) Let

function  fn  ()  
{ 
  let  x  =  0
  if  (true) 
   {
      let  x  =  1  //  only  inside  this  `if`
   }
}

1.2) Const

const  a  =  1

let is the new var. Constants work just like let ,but can't be reassigned.

2) Backtick strings

2.1) Interpolation

const  message  =  `Hello  ${name}`

2.2) Multiline strings

const  str  =  ` 
hello
world
`

3) Binary and octal literals

let  bin  =  0b1010010 
let  oct  =  0o755

4) New methods

4.1) New string methods

"hello".repeat(3) 
"hello".includes("ll") 
"hello".startsWith("he") 
"hello".padStart(8)   //  " hello"
"hello".padEnd(8)     //  "hello    "
"hello".padEnd(8,  '!')  //  hello!!! "\u1E9B\u0323".normalize("NFC")

5) Classes

class  Circle  extends  Shape  {

5.1) Constructor

constructor  (radius)  
{ 
   this.radius  =  radius
}

5.2) Methods

getArea  ()  {
return  Math.PI  *  2  *  this.radius
}

5.3) Calling superclass methods

expand (n) {
    return  super.expand(n)  *  Math.PI
}

5.4) Static methods

static  createFromDiameter(diameter)  
  { 
   return  new  Circle(diameter  /  2)
  }
}

6) Exponent operator

const  byte  =  2  **  8
//  Same  as:  Math.pow(2,  8)

7) Promises

7.1) Making promises

new  Promise((resolve,  reject)  =>  
{ if  (ok)  {  resolve(result)  }  
else  {  reject(error)  }
})

Promises are used for asynchronous programming.

7.2) Using promises

promise
.then((result)  =>  {  ···  })
.catch((error)  =>  {  ···  })

7.3) Using promises with finally

promise
.then((result)  =>  {  ···  })
.catch((error)  =>  {  ···  })
.finally(()  =>  {  //  logic  independent  of  success/error  })

The handler is called when the promise is fulfilled or rejected.

7.4) Promise functions

Promise.all(···) 
Promise.race(···)
Promise.reject(···) 
Promise.resolve(···)

7.5) Async-await

async  function  run  ()  {
const  user  =  await  getUser()
const  tweets  =  await  getTweets(user)
return  [user,  tweets]
}

8) Destructuring

Destructuring assignment

8.1) Arrays

const  [first,  last]  =  ['Nikola',  'Tesla']

8.2) Objects

let  {title,  author}  =  { title:  'The  Silkworm', author:  'R. 
Galbraith'
}

Supports for matching arrays and objects.

8.3) Default values

const  scores  =  [22,  33]
const  [math  =  50,  sci  =  50,  arts  =  50]  =  scores

//  Result:
//  math  ===  22,  sci  ===  33,  arts  ===  50

Default values can be assigned while destructuring arrays or objects.

8.4) Function arguments

function  greet({  name,  greeting  })  { console.log(`${greeting},  ${name}!`)
}

greet({  name:  'Gurshehzad Singh',  greeting:  'Hello!'  })

Destructuring of objects and arrays can also be done in function arguments.

8.5) Default values

function  greet({  name  =  'Gurshehzad Singh'  }  =  {}) 
 { console.log(`Hi  ${name}!`);
}


greet()  //  Hi  Gurshehzad Singh!
greet({  name:  'Rahul'  })  //  Hi  Rahul!

8.6) Reassigning keys

function  printCoordinates({  left:  x,  top:  y  }) { console.log(`x:  ${x},  y:  ${y}`)
}

printCoordinates({  left:  25,  top:  90  })

This example assigns x to the value of the left key.

8.7) Loops

for  (let  {title,  artist}  of  songs)  {
···
}

The assignment expressions work in loops, too.

8.8) Object destructuring

const  {  id,  ...detail  }  =  song;

Extract some keys individually and remaining keys in the object using rest (...) operator.

9) Spread

9.1) Object spread

with Object spread

const  options  =  {
...defaults, visible:  true
}

without Object spread

const  options  =  Object.assign(
{},  defaults,
{  visible:  true  })

The Object spread operator lets you build new objects from other objects.

9.2) Array spread

with Array spread

const  users  =  [
...admins,
...editors,
'Gurshehzad Singh'
]

without Array spread

const  users  =  admins
.concat(editors)
.concat([ 'Gurshehzad Singh' ])

The spread operator lets you build new arrays in the same way.

10) Functions

Function arguments

10.1) Default arguments

function  greet  (name  =  'Gurshehzad Singh')  
{ return  `Hello  ${name}`
}

10.2) Rest arguments

function  fn(x,  ...y)  {
//  y  is  an  Array
return  x  *  y.length
}

10.3) Spread

fn(...[1,  2,  3])
//  same  as  fn(1,  2,  3)

Concepts included are: Default, rest, spread.

10.4) Fat arrows

setTimeout(()  =>  {
···
})

10.5) With arguments

readFile('text.txt',  (err,  data)  =>  {
...
})

10.6) Implicit return

numbers.map(n  =>  n  *  2)
//  No  curly  braces  =  implicit  return
//  Same  as:  numbers.map(function  (n)  {  return  n  *  2  }) numbers.map(n  =>  ({
result:  n  *  2
}))
//  Implicitly  returning  objects  requires  parentheses  around  the  object

Like functions but with this, it is preserved.

11) Objects

11.1) Shorthand syntax

module.exports  =  {  hello,  bye  }
//  Same  as:  module.exports  =  {  hello:  hello,  bye:  bye  }

11.2) Methods

const  App  =  { 
 start  () 
  {
     console.log('running')
  }
}
//  Same  as:  App  =  {  start:  function  ()  {···}  }

11.3) Getters and setters

const  App  =  {
   get  closed  ()  {
      return  this.status  ===  'closed'
    },
   set  closed  (value)  {
      this.status  =  value  ?  'closed'  :  'open'
    }
}

11.4) Computed property names

let  event  =  'click' let  handlers  =  {
[`on${event}`]:  true
}
//  Same  as:  handlers  =  {  'onclick':  true  }

11.5) Extract values

const  fatherJS  =  {  age:  21,  name:  "Gurshehzad Singh"  }

Object.values(fatherJS)
//  [21,  "Gurshehzad Singh"] Object.entries(fatherJS)
//  [["age",  21],  ["name",  "Gurshehzad Singh"]]

12) Modules

12.1) Imports

import  'helpers'
//  aka:  require('···')


import  Express  from  'express'
//  aka:  const  Express  =  require('···').default  ||  require('···')


import  {  indent  }  from  'helpers'
//  aka:  const  indent  =  require('···').indent


import  *  as  Helpers  from  'helpers'
//  aka:  const  Helpers  =  require('···')


import  {  indentSpaces  as  indent  }  from  'helpers'
//  aka:  const  indent  =  require('···').indentSpaces

import is the new require() .

12.2) Exports

export  default  function  ()  {  ···  }
//  aka:  module.exports.default  =  ···


export  function  mymethod  ()  {  ···  }
//  aka:  module.exports.mymethod  =  ···


export  const  pi  =  3.14159
//  aka:  module.exports.pi  =  ···

export is the new module.exports .

13) Generators

13.1) Generators

function*  idMaker  ()  { let  id  =  0
while  (true)  {  yield  id++  }
}


let  gen  =  idMaker() gen.next().value  //  →  0 gen.next().value    //  →  1 gen.next().value //  →  2

13.2) For..of iteration

for  (let  i  of  iterable)  {
···
}

For iterating through generators and arrays.

These are all the latest modifications made in ES6 in order to improve its efficiency is JS and Development world.

Thanks for reading!

Flutter - Most Trending Framework for Mobile Development

Gurshehzad Singh — Thu, 22 Apr 2021 06:14:45 +0000

When it comes to app development, it can be difficult to find a compromise between quality and productivity: either developers have to build the same application twice on both iOS and Android, or they have to settle for a cross-platform solution that makes it difficult to deliver the native experience that customers demand.

And here comes Flutter – an SDK that is making headlines these days in the mobile development space. Its creators say that Flutter offers a new path for mobile development, focused foremost on native performance, advanced visuals, and dramatically improving developer velocity and productivity. It has already been adopted by some of the most famous companies such as Alibaba, Google Ads, Birch Finance, App Tree, Hamilton Musical and many more.

So, let’s try to understand what Flutter is and what makes it so popular.

Flutter is an app SDK for building high-performance, high-fidelity apps for iOS, Android, and web from a single codebase.

It enables developers to deliver high-performance apps that feel natural on different platforms.

For example, it is one of demo apps from the Flutter Gallery, a collection of Flutter sample apps you can run right after installing Flutter and setting up your environment.

This app – Shrine – has high-quality scrolling images, interactive cards, buttons, dropdown lists, and a shopping cart page. Not bad. But let’s slice and dice it all.

So, what is definitely good about Flutter?

Here are some points why Flutter might become the next big thing:

1.Building Android + iOS apps at once

As Flutter uses the same code base, you do not need to write any individual code for both the platforms. Ok, but this is similar to any cross-platform thing. Next, please.

2.Quick Performance and No Compatibility Issues

Unlike ReactNative, NativeScript or Ionic Flutter doesn’t require a JavaScript bridge to talk to OEM widgets. Flutter works more like a gaming engine. All the buttons, text, media stuff are being built inside Flutter’s engine. And this gives the application an additional performance boost. And that sounds interesting.

3.High-Speed Coding and Prototype development

Make a change in the app and see them in the blink of an eye. What can be better? All thanks to Hot-Reload. If you’re only changing the state of the existing app structure then you can see your changes in under one second by using Hot Reload. If you changed the app structure by adding or removing individual components, or even large sections of your app, that takes a little longer… 6-8 seconds under most conditions. Great, isn’t it?

4.A Perfect Choice for Advanced UI

Flutter renders all parts of the interface using internal graphics engine called Skia – the same that is used in Google Chrome, Mozilla Firefox, and Sublime Text 3. This fast and well-optimized piece of software allows Flutter to behave differently than most of the other mobile development frameworks. Cool!

5.DART Language

Flutter uses Dart – a client-optimized programming language for apps on multiple platforms. One of the greatest advantages here is that Dart code can be compiled in three different ways:

The first is truly native, Ahead Of Time (AOT) compiled machine code executable that requires no interpretation. And you can compile executables not only for Android and iOS, but for Windows, Mac, and Linux, too. But, of course, you’ll need to compile once for each individual platform, since each uses a different kind of executable.
Second, Dart can be Just in Time (JIT) compiled. And here we have this “Hot-Reload” that was mentioned above.
Third, Dart can be compiled in a way that results in JavaScript. This allows Flutter to do something truly amazing. It lets you put the same app you wrote for mobile and desktop into a web browser.

6.Fuchsia

It is an open-source operating system currently being spearheaded by Google. It uses a micro-kernel called Zircon, and is designed to be able to run everything from the simplest picture frame up through the most bleeding-edge mobile devices. Why is it mentioned here? Simple. Firstly, Flutter drives the UI for the entire Fuchsia operating system. Secondly, this means you will be able to use Flutter to write apps for all kinds of IoT devices, from refrigerators to alarm clocks, and more.

More information about practical use of some of these things you could find in this article of an Android developer who is sharing his thoughts on Flutter after having rebuilt his app from Java to Dart. Here I only mention the number of files/code-lines before the rebuilding (for the app built on Java) – 179/12176, and after it (for the app rebuilt on Dart) – 31/1735. As you see, numbers speak for themselves.

Drawbacks?

As usual, there are some things you should be ready for if going with Flutter:

1.Learning DART Language

As all the Flutter apps are written in Dart, you should understand that there is no way to escape this language if you’re considering Flutter to build your app on. Still, this reactive language looks familiar if you have worked with languages like Java or JavaScript. And the experience with object-oriented languages will be helpful as well. Still, you will definitely have to spend some time understanding all the syntactical sugar.

2.Everything in Flutter is a Widget

The layouts are widgets, the typography is a widget, color is a widget, button is a widget. Even the app itself is a complete widget. And this might take some time getting used to.

It is not intuitive for anyone getting started, to think that “widgetly” :). It might take you up to a month to get comfortable with Flutter. Adding margins, paddings and other attributes is not intuitive at first. Also, you’ll need to spend some time understanding Box constraints.

However, once you get there, you’ll see that it was totally worth the pain.

3.A bigger APK size

Don’t be surprised if you see your fresh-out-of-the-oven flutter app is bigger in size than its native counterpart by 50-60%. As the flutter-made apps are used with built-in widgets and not platform widgets, their size seems to be usually large. Currently, the smallest possible app which can be made using Flutter can’t weigh less than 4MB.

4.Flutter is not an operating system

This means it does not have direct access to things like cameras, Bluetooth, GPS and other hardware. So if your app communicates with any hardware via Bluetooth, for example, then you’d have to develop these features separately for iOS and Android and integrate them into flutter afterwards. In this case, one of the major selling points of cross-platform development (i.e. time), won’t be much beneficial as you’d end up spending time creating these features natively for both the apps.

5.Flutter does not have a very large support community

Flutter is still relatively new and does not have a community as large as other cross-platform solutions such as React Native or pure native apps, so it will need some time to grow the network of supporters.

So if you are someone who is afraid of documentation (still, cannot but mention that Flutter documentation is really good) this point might become a drawback to you.

Concluding

So, as far as there’s no other templating dialect for the time being that allows you to construct your UI by setting widgets, Flutter looks very interesting indeed. Of course, it might initially seem difficult, but later on, it does reduce the amount of coding, saves time, and looks better, all thanks to the power of widget support.

Flutter makes it easy to develop higher-performing mobile applications. This SDK further guides you with logic, reactive development, and composition. Moving ahead, this pays profits as your application becomes bigger.

Also the one should keep in mind the advantages of Dart language that can increase productivity in times. You can release your app to six platforms while needing only one team to write the code. Also think about what it would mean if you only had to worry about maintaining one code-base, instead of six. Still, you (or your team) will definitely spend some extra-time to learn Dart.

However, no matter what technology is used, cross-platform apps are still way behind native apps in terms of performance. So if you have the budget to setup two different teams for iOS and Android, we believe you should consider going native.

On the other hand, with Flutter you will get your app faster, and faster development saves you money (what is good anyway), and allows to validate your idea quicker.

So regardless of the number of individuals in your group or what your objective is, Flutter is a good alternative at least to try. So take a stab at coding DART for some time and check whether you like it.

Thanks for reading!

React VS Angular - What's better for you?

Gurshehzad Singh — Mon, 12 Apr 2021 12:54:20 +0000

The most common question that you hear in the Web Development world is Which framework to choose while developing a website?
Its completely evident that React and Angular are currently two of the most trending frameworks in the industry.

Most of the time, it is difficult to conclude which among all these frameworks is the best one. Rather you should be looking for an answer for Which framework will work best for me?

For answering this question, lets compare both of these frameworks on the basis of certain parameters in order to find their pros and cons:

MongoDB, Express.js, Node.js are already highly popular with their excellent documentation. However, the learning curve vary between Angular and React.

1) Learning Curve:
Angular is having a steeper learning curve as it is a complete framework which uses Typescript and templates unlike React which is a library where yo don't have much learning curve.

2) Documentation:
If we talk about quality of documentation, React offers better documentation which makes it easier to learn than Angular.

3) Productivity:
Angular offers better productivity because of its complete framework and it features a Command Line Interface(CLI) which enhances developer's productivity.

In React, we typically use third party libraries which offers relatively lower developer's productivity.

4)Upgradation:
Upgrading your React code offers more effort due to the presence of third party libraries unlike Angular in which CLI makes it easier.

5) Data Flow:
The data flow is bidirectional in the case of Angular as if you change the UI then it automatically changes the model state.

It is quite different in the case of React where the data flow is unidirectional.If you use React, you can only able to change the UI after changing the model state.

6) Data Binding:
The unidirectional data binding in React provides you with a better data overview, which helps you to manage large projects.
This makes the MERN Stack more suitable for managing larger projects.

On the other hand, if you are expecting small project then bi-directional data binding offered by Angular will be more effective approach then you'll suppose to use MEAN Stack here.

7) Size of your Project:
If you are having a large project then React will be effective so you should use MERN Stack for such projects.

On the other hand, Angular fits smaller projects so you should use MEAN Stack for such projects.

8) Level of Experience in your team:
If you're highly experienced that knows web frameworks very well, then use Angular as in such cases, the level of supporting documentation doesn't matter to you.

But if you have moderately experienced team, then React is a better choice for you.

9) Performance:
React offers better performance as it updates the Virtual DOM than Angular.

If performance is your key criteria, then the MERN Stack is a better choice for you.

10)Defect Prevention:
If you want to prevent common coding errors by its design, then the MEAN Stack is better choice for you. As the Angular uses Typescript, the framework prevents common coding errors at the coding stage itself.

11)Long-term enhancement and Maintenance of your app:
Both Angular and React are having significant popularity. However, React is gaining popularity and you'll find easier onboard for React developers in the future.
So if you have large pipeline of enhancement work and you foresee long-term maintenance requirements, then you should use React.

The summary to the debate of React vs Angular is that there is no absolute right choice, a conclusion that you probably didn't expect.

Each of these libraries has its own benefits and drawbacks. Based on the project you're working on and your individual requirements, one of these is going to be more suitable than others.

It's always key to do your own research before deciding, especially if you're going to be working on a business venture and not on a personal project.

Thanks for reading.

Redux - The Core Concept

Gurshehzad Singh — Thu, 01 Apr 2021 09:27:02 +0000

Redux is one of the most important and easiest concepts that developers commonly use in React world whether it be ReactJs or React Native. Lets see some of the basic concepts of Redux.

Redux is a JavaScript Library which helps in managing the application state. But a lot of young or newbie developers might get confused after reading this definition.

Here is a breakdown of what Redux actually is:

Redux is basically used for large scale applications. If a developer is not planning out for an application which is not largely scalable, he might want to go for Context API rather than using Redux.

Redux has three basic principles:

1) Single source of truth: We are always trying to work on a single state to store the application's data.

2) State is Read-only: We should never mutate the state directly and it can only be done with the use of actions which is a part of Redux.

3) Pure Functions: Changes in a state are only made using Pure functions. No one else can mess around with the state variables thus making all the changes secured.

In Redux, there are 3 main areas to focus on:

1) Actions: We define all the actions we need to perform for changing the state.

2) Central Store: Its the main place where you assume your final state is residing so that you can directly access it from here rather than doing prop drilling.

3) Reducers: These tell us how to or what process to follow to change the state.

Working of Redux:

First, we bring in the central state.
Second, we define actions to make the Redux work simpler.
Third, we build the reducer which is the brain part of our application.
Fourth, we code the components to dispatch the information.
Fifth, we write two types of Redux methods which you can use in your code.
Then, you create a Provider to give access of the store to all the components.
Finally, you create that central store.

After you get some idea of Redux, you can now understand the flow of Redux below:

Creating Actions:
Actions are the only way you can send data from your application to your Redux store. The data can be from user interactions, API calls, or even form submissions.

Actions are sent using the store.dispatch() method. Actions are plain JavaScript objects, and they must have a type property to indicate the type of action to be carried out. They must also have a payload that contains the information that should be worked on by the action. Actions are created via an action creator.

Here’s an example of an action that can be carried out during login in an app:

{ 
  type: "LOGIN",
  payload: {
    username: "foo",
    password: "bar"
  }
}

This action will have an action creator like the following code:

const setLoginStatus = (name, password) => {
  return {
    type: "LOGIN",
    payload: {
      username: "foo",
      password: "bar"
    }
  }
}

Creating Reducers
Reducers are pure functions that take the current state of an application, perform an action, and return a new state. These states are stored as objects, and they specify how the state of an application changes in response to an action sent to the store.

It is based on the reduce function in JavaScript, where a single value is calculated from multiple values after a callback function has been carried out.
Example of a Reducer:

const LoginComponent = (state = initialState, action) => {
    switch (action.type) {

      // This reducer handles any action with type "LOGIN"
      case "LOGIN":
          return state.map(user => {
              if (user.username !== action.username) {
                  return user;
              }

              if (user.password == action.password) {
                  return {
                      ...user,
                      login_status: "LOGGED IN"
                  }
              }
          });
default:
          return state;
      } 
};

As pure functions, they do not change the data in the object passed to them or perform any side effect in the application.

Creating the Store
The store holds the application state. It is highly recommended to keep only one store in any Redux application.

You can create a Store with the help of a single line of code:

const store = createStore(LoginComponent);

Actions performed on the state always return a new state. Thus, the state is very easy and predictable.

Now that we know a little more about Redux, let’s go back to our login component example that was implemented earlier and see how Redux can improve the component.

class App extends React.Component {
    render() {
        return (
            <div>
                <Status user={this.props.user.name}/>
                <Login login={this.props.setLoginStatus}/>
            </div>
        )
    }
}

We can see that there is only one general state in the store, and each component has access to the state. This eliminates the need to continuously pass state from one component to another. You can also select the slice from the store for a particular component; this makes your app more optimized.

To summarize, Components try to dispatch an action. Action reaches to one or multiple reducers. Reducer goes to the central store which manages state of the application. When central store is changed, it sends trigger to subscription. These Subscriptions passes updated states as props to components.

Thanks for reading.

ReactJS — Basics for Beginners.

Gurshehzad Singh — Mon, 29 Mar 2021 12:21:09 +0000

As you might have already read in many places, React is a JavaScript library for making web and mobile UI. It was developed by Facebook.

ReactJS is component driven. Everything is a component which is responsible for some functionality. You write small components and then combine them together to form big components. This makes the code more readable and understandable. The features that make React powerful and beautiful are:

It uses the Virtual DOM concept instead of the real DOM.
Code readability is better because of JSX. The use of JSX makes you feel like you’re writing web apps (gives a look to JavaScript like HTML).
It also uses SSR (SSR helps in SEO).
These are some things which you might have read about but you will get to understand them when you go through this tutorial. So, let’s dive into the concept of the virtual DOM (I would say this is the main feature which makes React more beautiful).

Virtual DOM
If you know a little about JavaScript then you might have seen people making use of ‘getElementById()’ or ‘getElementByClass()’ method to modify the content of DOM. Though doing things like this is not a problem and it works fine, but consider a case where we have a DOM that contains nodes in a large number, and also all these web elements have different styling and attributes.

In this case, recalculating the CSS and changing the layouts involves complex algorithms, and they do affect the performance. So, React has a different approach to deal with this, as it makes use of something known as Virtual DOM.

Virtual DOM is an in-memory representation of real DOM. It is a lightweight JavaScript object which is a copy of Real DOM. This copy can be frequently manipulated and updated, without using the DOM APIs. Once all the updates have been made to the virtual DOM, we can look at what specific changes need to be made to the original DOM and make them in a targetted and optimised way. Hence, Virtual DOM leads to the better performance of ReactJs.

Now its time to dive into the JSX pool.

JSX
Before moving ahead, let’s have a look at the below code:

class FirstComponent extends React.Component {  
     render() {    
         return (      
             <span className='customSize'>My First Component</span>    
          );  
      }
}

In the above example, the render function looks like it’s returning HTML code but this is JSX. The first example is a JSX version of the second one. JSX is a JavaScript extension that gives your JS code an HTML look.

class FirstComponent extends React.Component {  
     render() {    
         return (      
            React.createElement('span',{className: 'customSize'},                            'My First Component')    
         );  
      }
}

If you look at this example, React.createElement is used for creating a react element to represent the react component. The second argument can be null or empty if no props or attributes are needed for the element. The third argument defines what should be inside of it (like any other React element, say , with attribute ‘src’).

If you look at the above two blocks of code, you will find the first one more familiar as it gives a kind of HTML feel. JSX also increases code readability. Let’s have a look at another example, without JSX and with JSX to get a feel for the code readability.

ReactJS without JSX:

React.createElement("div", null,  
      React.createElement("img", {src: "image.jpg", alt: "Random photo"}),
      React.createElement("h3", null, "Hello React"));

ReactJS with JSX version:

<div>  
   <img src="image.jpg" alt="Random photo" />  
   <h3>Hello React</h3>
</div>

By looking at the above example, you can understand what I was saying regarding code readability. How easy it is to read code with JSX, right? I think this is enough on JSX and I hope now you are able to better understand the power of JSX in the React world.

Note — Browsers are not able to read JSX. So, we have to transpile it to JavaScript using JSX transformers (say babel) so that the browser can understand.

Now we know what JSX is. But I would like you to go through the previous paragraph where I wrote that React is all about components. It is component driven. As components are the building blocks of React, let’s explore them.

Heart of ReactJs - Components
Well, you might have come across the below code of how to create components during your research on React:

class MyStatefulComponent extends React.Component {   
     state = {       
         title: ''    
     }

componentDidMount() {   
    console.log('Component mounted')  
}

render() {    
    return <div>{this.props.name}</div>;  
    }
}

If you write your component in the above way, it is called a Class/ Stateful/Container component. If you think that this is the only way of creating components, think again. Yes, there is another way of creating your component which results in functional / stateless/presentational components. Before moving ahead, let’s see how functional components are written:

const MyStatelessComponent = props => <div>{props.name}</div>;

Now, you might wonder what’s the difference between the two and how you should choose which type to create. So, let’s dive into the Stateful and Stateless component pool.

Stateless (or presentational or functional) components are those components that don’t have any state (don’t know about state? No worries, I explain it in a later part). They are used for presentation like how you want your component to look.

A Component is a plain JavaScript function which takes a prop as an argument and returns a React element (see above example). Its name is self explanatory — it has no state. It has no lifecycle methods (like componentDidMount method etc. which you might have read during your research on React tutorials).

Stateful (or container or class) components are those components which have state — a source of data (you can call this.setState inside it), lifecycle methods (can use to make an API call). It is a JavaScript class that extends your React component which means React creates instances of it. React initialize the component class in order to use lifecycle methods, for initializing the state and more.

Wait… now you might wonder which one is better, and what to choose? You can answer this question if you have this question in your mind on how to separate the logical part from the presentational one. Yes, it is strange that one question answers another question, but you will soon get why I said this.

As you might have seen in other React tutorials, they use class for creating their components. They put the logical as well as presentational parts in the same component which makes that component more complicated and bulky.

So, if you want to separate your logical from presentational components, then the component class is best suited for logical stuff like fetching data from the API or data changes. On the other hand, if your component is focused on presentational/functional things, the component should look good.

In short, I would say use both. Use the component class when you need one of the things (lifecycle methods, state) and for presentation, use a functional component. With the introduction of React Hooks, functional components are now being used on a large scale.

That’s all about components.

Now, we have a picture of how we can write components, but I have not told you how we can manage data in them. I think without data, components would be useless. So, we will have a look at how we can manage a component’s data (like fetching data from an API, React ‘state’ story, setting the state and so on).

Let’s start.

Props
‘Prop’ is shorthand for properties, and this is the one source of data in our component. It can be used to pass data to different components. Wait! I would like you to go back where I told you about presentational and class components. I told you to use presentational components to manage how your component should look, and container components for handling data and all that. Correct!

So the ‘prop’ is the one which we can use to make the connection between these two types of components. Yes, you can use props for passing data from a container component to a presentational component, where the presentational component will render the view with your dynamic data. Please have a look at the below code to better understand:

//This is button.container.js file
import {ButtonView} from './button.presentation';  
class MyContainerComponent extends React.Component {  
    state={      
       text : 'Submit'  
    }
render() {   
    return (    
        <ButtonView btnText={this.state.text}/>
        )
    }
}

//This is button.presentation.js file
export const ButtonView=({btnText})=>(  
     <div>   
         <button className="btn btn-info btn-lg">{btnText}</button>              </div>
)

Like the above way (using props — ‘btnText’), you can separate the logical part from the presentational part. The other feature of props is that they are read only, i.e. they are immutable. They are not going to modify inside the component in which they are passed. The data flow is also unidirectional — which gives us one way data binding (unlike Angular).

But, there might be cases where we want to change the data (like in some event by the user and so on). Hence, for this case, ‘State’ comes into the React market. Let’s dive into it.

State
As I told you, props are immutable whereas state is for mutable data — that is data that will change in response to certain events. So, if you want to change your data value, then store it in the state. State are objects that store your component’s data. To give a better picture of how state is defined and how to use it, here is an example:

class LoginContainer extends React.Component {
      constructor(props) {  
          super(props);  
              this.state = {   
                 userName: "",  
               };
      }
onFilluserName = event => {   
     this.setState({    
          userName: event.target.value,   
     });
}
render() {  
    return (  
       <div>    
          <input value={this.state.userName} onChange= {this.onFilluserName}   
       </div>   
     ); 
   }
}

You can see from the above example that state represents objects where your component’s data are stored. They are initialized inside a constructor. You can access the state using ‘this.state’. This is the way of using state for rendering your data in your component.

But, I told you that the thing which makes state the heart of your components is its mutable behaviour. Yes, now the point comes as to how we can change the state’s property. The answer is using ‘this.setState’ (please have a look at the above example). Using this.setState, we have changed our data value when the user types.

In short, props and state are both sources of data, but their usage and behaviour is different. Whenever there is a case where your data may change, use ‘state’ for that — else ‘prop’ is good choice.

That’s all about the basics of the React world. I hope you have a better understanding of the basics.

Thanks for reading.

Hacktoberfest 2020

Gurshehzad Singh — Fri, 16 Oct 2020 05:39:38 +0000

What I Learned From Hacktoberfest:
It was indeed a great experience contributing to open source, not just for the sake of contribution as well as enhancing my knowledge towards a specific domain, Hacktoberfest was a great platform.
Thanks to DigitalOcean.
Happy Coding!