Forem: Ajay Baraiya

React Default Export Vs Named Export? #Beginners

Ajay Baraiya — Sat, 24 Sep 2022 07:19:35 +0000

We have our component file.
When we export it like below.

//MyFunc.js file 
const MyFunc = () => <h1>Default Export<h1/>
export default MyFunc;

Than we can import that component with different name like belwo.

import MyChoiceOfName from "./MyFunc"
//so we can use 
<MyChoiceOfName /> //here.

But when we don't use export default and directly export our component as below.

//NameExpo.js file 
export const NameExpo = () => <h1>Named Export<h1/>
//As we did not specify name here and so it has to take some name to export, so it will take componenet name.

And while importing it we must need to import using it's name.\

import NameExpo from "./NameExpo" //Notice here we have both file and delcared name same i.e. NameExpo
//so we can use 
<NameExpo /> //here.

What if you want to export multiple components from one single .js file?

It is possible using Named export.

//NameExpo.js file 
export const MyNameExpo1 = () => <h1>Named Export 1<h1/>
export const MyNameExpo2 = () => <h1>Named Export 2<h1/>
export const MyNameExpo3 = () => <h1>Named Export 3<h1/>

And in importing

import MyNameExpo1 from "./NameExpo" 
import MyNameExpo2 from "./NameExpo" 
import MyNameExpo3 from "./NameExpo" 
//so we can use 
<MyNameExpo1 /> //here.
<MyNameExpo2 /> //here.
<MyNameExpo3 /> //here.

How React serves?

Ajay Baraiya — Sat, 24 Sep 2022 06:47:43 +0000

When you do.

npm start

index.html will be served in web browser.

Now, index.html contains root dom node and as it served the control goes to it's javascript file which is index.js.

Now, the index.js having below rander function.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

As you can see above <App /> is rendered.

Now, <App /> component exported from App.js file.

So, this how we do changes in App.js and it reflects on web browser.

Typescript Commands #Quick Notes.

Ajay Baraiya — Sat, 17 Sep 2022 09:45:44 +0000

1) npm i -D typescript // Install typescript in development dependencies.
2) npx tsc example.ts // Compile example.ts file in terminal.

Async and Await #JS mordern concept.

Ajay Baraiya — Sat, 17 Sep 2022 08:42:50 +0000

Async and Await enteres in to handle complexity of Promises.
Which is a call back of hell problem, to make it look like synchronous but it's act asynchronous and non-blocking behind the scenes.

const myFunction = () => { return 'Test'; } // Normal function
const myAsyncFunction = async () => {return 'Test'; } //Async function which will return a Promise now.

As in above now we can create a Promise like function just by adding async in front of ().

We now want a function to wait till it's child function to finish it's execution.

Take a look at below example.

function FirstFunction(){
   setTimeout(function(){console.log('execution line we want to execute first and want to wait till 5 seconds.');}, 5000);
}

function SecondFunction(){
FirstFunction();
console.log('execution line we want to call last.');
}

function Start() {
      SecondFunction(); // Calling only second one as first called inside of it.
}

Start();// Calling start function

Output: 
"execution line we want to call last."

//Wait for 5 seconds to get below as we applied 5 seconds timeout.
"execution line we want to execute first and want to wait till 5 seconds."

As in above example it will not wait till 5 seconds to complete.

Now to make it wait till 5 seconds, below is how we can achive using await.

const FirstFunction = async () => {
    return new Promise(resolve => {
    setTimeout(function(){return resolve('execution line we want to execute first and want to wait till 5 seconds.'); // Here creating promise is necessary and resolve in setTimeout to return resolve to make it synchronous
}, 5000);
  });
}

const SecondFunction = async () => { //remember we have to make it async so to use await in this function
const x = await FirstFunction(); // First function that is having async so it act like Promise here.
return x + '\nexecution line we want to call last.';
}

SecondFunction().then(res => {
  console.log(res)
});// Calling start function

Output: 
"execution line we want to execute first and want to wait till 5 seconds."
"execution line we want to call last."

Event Loops Immediate Calls #JS Quick Notes.

Ajay Baraiya — Sat, 17 Sep 2022 05:43:32 +0000

You don't have to strugle about what is happening as in your application you just need to know which event will be called and when.

Remeber below sequance.
1) process.nextTick();

process.nextTick(functionBlockToExecute.); //Function here will be called first no matter it's place where it is declared but only thing is matter that it should be declared along with below other functions than it will execute first

2) Promise => resolve.

new Promise((resolve, reject) => {
    resolve('bar'); // Promise resolution will be second in stack to be callled.
  });

3) Promise => then.

new Promise((resolve, reject) => {
    resolve('bar');
  }).then((resolve) => {
    console.log(resolve);
    process.nextTick(zoo); //Here when a promise resiolved then will be called.
  });

4) setImmediate(functionCall)

 setImmediate(baz); //However setImmediate execute as soon as possible it still executed after above 3 scenarios.

Remember above all are immediate calls and are compared with each other when we are working with such a multiple immediate function calls.

Loop functions in synchronous way #React Quick Notes.

Ajay Baraiya — Sat, 17 Sep 2022 05:17:33 +0000

We all know term called Recursion. That is same we are doing in below example to loop through multiple functions which should execute one after another.

This is one of the ways we can achive function serialization and can be usfull to your application.

const objFunctions = [
  { func: function1, args: args1 },
  { func: function2, args: args2 }
];  //We defined functions that we want to call one by one.

function LoopFunctionOneByOneCallAfterOneAnother(objFunctions) {
  if (!objFunctions) process.exit(0); // finished
  ExecuteSingleFunctionCall(objFunctions, function (result) {
    // continue AFTER callback
    LoopFunctionOneByOneCallAfterOneAnother(objFunctions.shift());
  });
}  // notice we called same function under this function which has parameter to get next object from objFunctions.

function ExecuteSingleFunctionCall(objFunction, callback) {
  const { args, func } = objFunction;
  func(args, callback);
} // Supportive function to execte single function. 


LoopFunctionOneByOneCallAfterOneAnother(objFunctions.shift()); // In the end we call our function.

So this whole block will execute in serialized manner.
Above referenced from site https://nodejs.dev/en/learn/asynchronous-flow-control/, you can find more usefull ways over here.

Basic Commands #Node.js Quick Notes.

Ajay Baraiya — Sun, 11 Sep 2022 07:10:23 +0000

npm install //Global Node module installation.
npm install <package-name> //Install specific package and adds it to package.json file which holds file dependencies.
npm update //Update all packages for newer version.
npm update <package-name> //Specific package updation.
npm install <package-name>@<version> //Specific package updation with specific version.
npm run <task-name> //To run a task like npm run (watch/dev/rod).
npm install -g //Tell global installation folder.
node_modules/.bin/ //Executable dependencies require to be in this folder.
npm list //To list all installed packages with versions in hierarchical order.
npm view cowsay versions //To check out versions available of a package.
npm install cowsay@1.2.0 //To instll older version or newer version of a package.
Check out https://nodejs.dev/en/learn/update-all-the-nodejs-dependencies-to-their-latest-version/, for more version update in node.
npm uninstall <package-name> //To uninstall a package.

Object logging in Console #Node Quick Notes.

Ajay Baraiya — Sun, 11 Sep 2022 06:13:44 +0000

Remember we require console to debug javascript so below will be usefull.

Node do not logs objects as javasript does after certain level, to do so use console.log(JSON.stringify(obj, null, 2)); or set require('util').inspect.defaultOptions.depth = null;.
if above is hard then just use string format and do below.

// %o tells console.log() to string-format and log obj in its place
console.log('%o', obj);

Error #Node Quick Notes.

Ajay Baraiya — Sun, 11 Sep 2022 05:59:28 +0000

Errors are handled with exceptions.
throw keyword to break normal exectuion of javascript.
Node.js has Error class from Error core module.
Do, throw Error("My new error message."); or extend class and throw like Class MyCustomError extends Error(){}; throw new MyCustomError();
uncaughtException there is predefined code block on https://nodejs.dev/en/learn/error-handling-in-nodejs/, implement it to avoid this error.
Error handling with Promises.
Error handling with Async/Wait.

Destructuring #React Quick Notes.

Ajay Baraiya — Sun, 11 Sep 2022 05:22:40 +0000

Remember basic meaning.

It means choosing only desire sweets from a cakeshop.

Here is an example to remember it.

const cakeVarieties = ['Chocolate','KitKat','Mango', 'Brownie'];

const [myChoise1, myChoise2, ...rest] = cakeVarieties;

console.log(myChoise1); //Chocolate
console.log(myChoise2); //KitKat
console.log(rest); //['Mango','Brownie'] --Remember rest means other things left and which is only be declared at last position.

//Below is for #React.js

const premiumCakeVarieties = {sameNameHere1: 'Chocolate', sameNameHere2:'KitKat', sameNameHere3:{fruitCakes :['Mango','Pineaple']}, 
 sameNameHere4:'Brownie'};

const {sameNameHere1, sameNameHere2, sameNameHere4, sameNameHere3 : {fruitCakes:[cake1, cake2]}} = premiumCakeVarieties; //Notice: We have same variable name no matter in which order they are they will access array property where matching name of itself.

console.log(sameNameHere1); //Chocolate
console.log(sameNameHere2); //KitKat
console.log(sameNameHere4); //Brownie
console.log(sameNameHere3); //['Mango','Pineaple']
console.log(cake1); //Mango //this follows order here as we did not have key for it
console.log(cake2); //Pineaple //this follows order here as we did not have key for it

Notes

While working with an Array we can destruct with defining array left side.

const [a, b, ...rest] = [1,2,3,4]; //here an array both sides.

While working with object we need brackets i.e. {}

const {a, b, ...rest} = obj; //here {} left side.

We only require this basics to work around, although we can check over https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment, which has best detail explanation and can be used when we destruct more complex object. But make all object simpler as possible.

Event Loop #Node.js Quick Notes.

Ajay Baraiya — Mon, 05 Sep 2022 05:41:32 +0000

Remember below things first before starting understanding Event Loops.

The Node.Js JavaScript Code Runs On A Single Thread.
Node.Js Call Stack Is A LIFO (Last In, First Out) Stack.

When browser loop through events, it gives priority to callstack and everything else like click events, setTimeout timers, load events put into Message queue.

Once callstack finished than it goes to Message queue and take execute it from there.

To make it in sequence we can you Promises and Async/Await.

Closures #React Qucik Notes.

Ajay Baraiya — Sun, 04 Sep 2022 08:19:42 +0000

Why we need to Understand closure?

So we can know where to declare variable and which function in nested level can have access to it.

For understanding Closure, please refer below link which has provided best documentation to understand.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures