JavaScript Before React (Part-1)

I firmly believe that this will be the final article you'll need to read on this topic. These topics are essential prerequisites before delving into React. Once you've absorbed and practiced the content here, your comprehension of React will undoubtedly improve.

This article primarily targets beginners, but I welcome feedback from intermediate and advanced readers as well. Your input could significantly enhance the quality of the article by identifying any overlooked aspects or suggesting improvements. Your contribution would be invaluable to me.

I know you don't have time… So, Let's Begin

Ternary Operator : (Conditional Rendering)

This is the most used operator in the React projects to render the components based on a condition

const YourComponent = () => {
    return(
  <div>
    {condition ? <p>Condition is true</p> : <p>Condition is false</p>}
  </div>
);
};

// -- OR -- 

const YourComponent = () => {
    return(
  <div>
    {condition ? <Component1/> : <Component2/>}
  </div>
);
};

if condition is true 
    you will se "condition is true"
--OR--
Component1 will be reanderd

Object Destructuring

The Destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Obj{
    Name:'Ram',
    Roll:23
}

let {Name , Roll} = Obj   // Name = 'Ram' , Roll = 23
let {Name , roll} = Obj    // Name = 'Ram' roll = undefined ***

Use Template String

let a = 10;
let str = ` a is ${a}`;
// Expected output: a is 10

Array Methods

There are many methods that are important to remember but here we discuss top 3 of them which are used very frequent

• Map

  This method iterates through the elements of an array and calls a function on each element of the array.

  This returns a new array that contains the result of each function call

    let num = [1, 2, 3];
    let 2xnum = num.map(a => 2*a);    
  
    console.log(2xnum); // [2,4,6]
    console.log(num);   // [1,2,3]
  

• Filter

  This method returns all items of an array that match a specific condition.

    let nums = [1,2,7,8,3,4,6]
    let evennums = nums.filter(num => {return num%2===0})
  
    console.log(evennums); // [2,8,4,6]
    console.log(nums);     // [1,2,7,8,3,4,6]
  

• Reduce

  This method iterates over the array and takes the action on each element of it, And the result of that action is passed to the next iteration

    let nums = [1,2,7,8]
    let Sum = nums.reduce((sum , current) => {return sum += current})
    console.log(Sum)    // 18
  

Export And Import

• To achieve modularity, we divide the project in to folders and files/modules.

• But objects/data in one module can not be accessed from another module

• To solve this problem, we export required objects from one file and import those objects in required file/module

Export

Every module can have two different types of export, named export and default export. You can have multiple named exports per module but only one default export

// Default export
// source.js
let num = 20;
export default num;

// distination.js
import val from "./path.../source"
console.log(val) // 20 ( exported object is referred with val reference variable)

Named Export

// source.js
const a =23;
const b =2;
export {a, b};


//distination.js
import {a,b} from './source'
console.log(a, b);           // Hear we get error 
// error : Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'f:\path...\source' imported from f:\path...\distination.js
//Did you mean to import ../source.js?
// import statement should contain extension

import {a,b} from './source.js'
console.log(a, b);  // 23 2

// What if we interchange the variables in import statement 
import {b,a} from './source.js'
console.log(a, b);  // 23 2

This is part 1 of the series. In part 2, I'll delve into

• Asynchronous Nature

• Closure

• Callback

• Promises

• And much more, stay tuned! .

  Sure, you will find the value.

Thank you for investing your time in reading this article. I sincerely hope it has provided valuable insights to enhance your journey. If you found it helpful, I encourage you to consider subscribing for more informative content. Feel free to share your insights or any additional information that could contribute to the discussion.

Do Smile!

For more information

1. Export : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export