Forem: T Shiva Kumar

Getting Started With React

T Shiva Kumar — Tue, 03 Sep 2024 16:21:15 +0000

Here’s a detailed guide on how to install and set up a React project:

1. Install Node.js and npm

Node.js is a JavaScript runtime that allows you to run JavaScript on the server side, and npm (Node Package Manager) is a tool for managing packages (libraries) for Node.js.

Download and install Node.js from Node.js official website. The installation includes npm, so you don't need to install npm separately.
Verify installation:

node -v
npm -v

These commands should print the versions of Node.js and npm if the installation was successful.
2. Create a New React Project
Using npx (recommended):

Open a terminal (Command Prompt on Windows, Terminal on macOS/Linux).
Run the following command:

npx create-react-app my-react-app

Replace my-react-app **with your desired project name. This command uses **npx to run create-react-app without installing it globally.

3. Navigate to Your Project Directory

Change to your project folder:

cd my-react-app

4. Start the Development Server

Run the development server:

npm start

This command starts the development server and opens your application in the default web browser at http://localhost:3000. The server will automatically reload the page whenever you make changes to the source code.

5. Explore the Folder Structure

Here’s a breakdown of the folder structure created by create-react-app:

public/: Contains static files that are served directly by the server.

index.html: The main HTML file where your React app is injected.
favicon.ico:The icon displayed in the browser tab.
src/: Source code of the React app.
index.js: Entry point that renders the root component.
App.js: Main React component to edit and display content.
node_modules/: Installed npm packages.
package.json: Project metadata, dependencies, and scripts.
package-lock.json: Locks dependency versions.
.gitignore: Files and directories to be ignored by Git.
README.md: Documentation for your project.

Create a React Component

React components can be either class-based or function-based. Function components are more common, especially with the use of Hooks. Here's an example of a simple function component:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

This component returns some JSX, which looks like HTML but is actually JavaScript.

Promises in java script

T Shiva Kumar — Tue, 20 Aug 2024 07:17:02 +0000

what is promises

*A Promises is an object representing the eventual completion of an asynchronous operation.

States of a Promise

A Promise can be in one of three states:

1.Pending: The initial state, neither fulfilled nor rejected.
2.Fulfilled: The operation completed successfully.
3.Rejected: The operation failed.

Creating a Promise

let myPromise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve("Operation was successful!");
} else {
reject("Operation failed.");
}
});

To handle the outcome of a promise, you use the then() and catch() methods:

myPromise
.then((message) => {
console.log(message); // "Operation was successful!"
})
.catch((error) => {
console.error(error); // "Operation failed."
});

*then() is executed when the promise is fulfilled.
*catch() is executed when the promise is rejected.

Example of promises

const myPromise = new Promise((resolve, reject) => {

setTimeout(() => {

    resolve("Promise fulfilled!");
}, 2000);

});

myPromise
.then(message => {
console.log(message);
})
.catch(error => {
console.error('There has been a problem with the promise:', error);
});

Advantages of Promises:-

1.Improved Readability:

Promises allow for cleaner and more linear code compared to nested callbacks.

2.Better Error Handling:

Errors can be handled using a dedicated .catch() method, simplifying error management.

3.Avoids Callback Hell:

Promises help prevent deeply nested structures, making the code easier to read and maintain.

4.Supports Async/Await:

Promises are the foundation for the async/await syntax, allowing asynchronous code to be written in a synchronous style.

5.Enhanced Performance:

Promises can improve performance by allowing multiple asynchronous operations to run concurrently.

Higher-order function in java script

T Shiva Kumar — Sat, 17 Aug 2024 11:19:41 +0000

What is higher-order function?

A higher-order function is a function that does at least one of the following:

Takes one or more functions as arguments.
Returns a function as its result.

Why Use Higher-Order Functions?

Higher-order functions provide several benefits:

Reusability:They allow you to create more generic functions that can be reused with different behaviors.
Modularity:They help in breaking down complex problems into smaller, manageable functions.
Cleaner Code: Code written with higher-order functions is often more concise and easier to read.

Common Higher-Order Functions in JavaScript

1.map: This function creates a new array by applying a function to each element of the original array.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

In this example, map() is a higher-order function because it takes a function (num => num * 2) as an argument.

2.filter: This function creates a new array with all elements that pass the test implemented by the provided function.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

Here, filter() uses the provided function to determine which elements should be included in the new array.

3.reduce: This function applies a function against an accumulator and each element in the array to reduce it to a single value.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

reduce() is a higher-order function that lets you accumulate a result based on the function you pass in.

Creating Higher-Order Functions

function higherOrderFunction(callback) {
  console.log("Executing the higher-order function...");
  callback();
}

function callbackFunction() {
  console.log("Executing the callback function...");
}

higherOrderFunction(callbackFunction);

Example: Function Returning a Function

function createMultiplier(multiplier) {
  return function(num) {
    return num * multiplier;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

Combining Higher-Order Functions

One of the powerful aspects of higher-order functions is that they can be combined to perform complex operations concisely.

const numbers = [1, 2, 3, 4, 5, 6];

const result = numbers
  .filter(num => num % 2 === 0) // Get even numbers: [2, 4, 6]
  .map(num => num * 2)          // Double them: [4, 8, 12]
  .reduce((sum, num) => sum + num, 0); // Sum them up: 24

console.log(result); // 24

Conclusion

Higher-order functions are a fundamental concept in JavaScript, enabling you to write more abstract, reusable, and powerful code. By understanding and using higher-order functions, you can take your JavaScript skills to the next level, making your code cleaner, more efficient, and more maintainable.

String methods in javascript

T Shiva Kumar — Wed, 14 Aug 2024 11:09:51 +0000

What is a String?

*The sequence of one or more characters enclosed within quotation marks is called a string.
*The quotation can be single quotes '' or double quotes " " or backtick ``.
And, the sequence of characters can be alphabets, numbers, symbols, etc.

String methods

1.charAt(index)

*The charAt() returns the character at a specified index in a string.
*The very first character of the string has an index of 0, the second character has index 1, and so on...

Example

let text = "HELLO";
let char = text.charAt(0);
console.log(char)// Returns "H"

2.length

*This property returns the number of characters in a string.

Example

let text = "HELLO";
let length = text.length;
console.log(length) // Returns 5

3.slice(start, end)

*Extracts a section of a string and returns it as a new string. The start index is inclusive, while the end index is exclusive.

Example

let text = "HELLO WORLD";
let part = text.slice(0, 5);
console.log(part) // Returns "HELLO"

4.substring(start, end)

*Similar to slice(), but treats negative indices as 0. It extracts characters between two specified indices.

Example

let text = "HELLO WORLD";
let part = text.substring(0, 5);
console.log(part)// Returns "HELLO"

5.toUpperCase()

*Converts all characters in a string to uppercase.

Example

let text = "hello";
let upper = text.toUpperCase();
console.log(upper)// Returns "HELLO"

6.toLowerCase()

*Converts all characters in a string to lowercase.

Example

let text = "HELLO";
let lower = text.toLowerCase();
console.log(lower)// Returns "hello"

7.trim()

*Removes whitespace from both ends of a string.

Example

let text = " hello ";
let trimmed = text.trim();
console.log(trimmed) // Returns "hello"

8.concat()

*Joins two or more strings and returns a new string.

Example

let text1 = "Hello";
let text2 = "World";
let combined = text1.concat(" ", text2);
console.log(combined) // Returns "Hello World"

9.indexOf(substring)

*Returns the index of the first occurrence of a specified substring. Returns -1 if not found.

Example

let text = "HELLO WORLD";
let index = text.indexOf("O");
console.log(index)// Returns 4

10.replace(searchValue, newValue)

*Replaces the first occurrence of a specified value with a new value.

Example

let text = "HELLO WORLD";
let newText = text.replace("WORLD", "EVERYONE");
console.log(newText)// Returns "HELLO EVERYONE"

11.replaceAll(searchValue, newValue)

*Replaces all occurrences of a specified value with a new value.

Example

let text = "HELLO WORLD WORLD";
let newText = text.replaceAll("WORLD", "EVERYONE");
console.log(newText)// Returns "HELLO EVERYONE EVERYONE"

12.split(separator)

*Splits a string into an array of substrings based on a specified separator.

Example

let text = "HELLO WORLD";
let parts = text.split(" ");
console.log(parts)// Returns ["HELLO", "WORLD"]

13.join(separator)

*Joins the elements of an array into a string, using a specified separator.

Example

let array = ["HELLO", "WORLD"];
let joined = array.join(" ");
console.log(joined)// Returns "HELLO WORLD"

14.startsWith(searchString)

*Checks if the string starts with the specified string.

Example

let text = "HELLO WORLD";
let starts = text.startsWith("HELLO");
console.log(starts)// Returns true

15.endsWith(searchString)

*Checks if the string ends with the specified string.

Example

let text = "HELLO WORLD";
let ends = text.endsWith("WORLD");
console.log(ends)// Returns true

16.includes(searchString)

*Checks if the string contains the specified substring.

Example

let text = "HELLO WORLD";
let includes = text.includes("LO");
console.log(includes)// Returns true

Array methods in javascript.

T Shiva Kumar — Tue, 13 Aug 2024 10:57:18 +0000

There are some methods in array

1.push()
2.unshift()
3.pop()
4.shift()
5.splice()
6.slice()
7.indexOf()
8.includes()
9.forEach()
10.map()
11.filter()
12.find()
13.some()
14.every()
15.concat()
16.join()
17.sort()
18.reduce()

1 Push() method

*Add new element at last position.

syntax

array.push(element1, element2, ..., elementN)

Example

let fruits = ['apple', 'banana'];
let newLength = fruits.push('orange', 'mango');

console.log(fruits); // Output: ['apple', 'banana', 'orange', 'mango']
console.log(newLength); // Output: 4

2 unshift() method

*Add new element at initial position.

syntax

array.unshift(item1, item2, ..., itemN)

Example

const fruits = ["Banana", "Orange", "Apple"];
fruits.unshift("Lemon");
console.log(fruits); // Output: ["Lemon", "Banana", "Orange", "Apple"]

3 pop() method

*It will remove your last element.
*It will return the removed element from the array
*"undifined" if the array is empty

syntax

array.pop();

Example

const fruits = ['Apple', 'Banana', 'Cherry'];
const lastFruit = fruits.pop();
console.log(fruits); // Output: ['Apple', 'Banana']
console.log(lastFruit); // Output: 'Cherry'

4 shift() method

*It will remove your first element.
*It will return the removed element from the array

syntax

array.shift();

Example

const fruits = ['Apple', 'Banana', 'Cherry'];
const firstFruit = fruits.shift();
console.log(fruits); // Output: ['Banana', 'Cherry']
console.log(firstFruit); // Output: 'Apple'

5 splice() method

*Adds or remove elements from an array.

*splice() will modified original array.

syntax

array.splice(start, deleteCount, item1, item2, ...);

Example

let colors = ['Red', 'Green', 'Blue'];
colors.splice(1, 0, 'Yellow', 'Pink'); // Adds 'Yellow' and 'Pink' at index 1
console.log(colors); // Output: ['Red', 'Yellow', 'Pink', 'Green', 'Blue']

6 slice() method

*It is used to extract(give) the part of array.
*slice will return array.
*slice will not modified the original array.

syntax

array.slice(start, end);

Example

let numbers = [2, 3, 5, 7, 11, 13, 17];
let newArray = numbers.slice(3, 6);
console.log(newArray); // Output: [7, 11, 13]

7 indexOf() method

*The indexOf() method in JavaScript is used to find the first index at which a given element can be found in the array, or -1 if the element is not present.

syntax

array.indexOf(searchElement, fromIndex);

Example

let fruits = ['Apple', 'Banana', 'Orange', 'Banana'];
let index = fruits.indexOf('Banana');
console.log(index); // Output: 1

8 includes() method

*It is used to identify certain element is present in our array or not.
*If element is present it will return "true" otherwise return "false".
*It will return boolean value.

syntax

array.includes(searchElement, fromIndex);

Example

let numbers = [1, 2, 3, 4, 5];
let hasThree = numbers.includes(3, 2);
console.log(hasThree); // Output: true

9 forEach() method

Executes the function for each element.
Does not create a new array.
Original array remains unchanged.

Example

let numbers = [1, 2, 3];
numbers.forEach((value, index, arr) => {
arr[index] = value * 2;
});
console.log(numbers); // Output: [2, 4, 6]

10 map() method

It takes each element of an array.
The output of map array is always array only.
It will not change original array
Creates a new array.

Example

const numbers = [10, 20, 30];
const incremented = numbers.map((num, index) => num + index);
console.log(incremented); // Output: [10, 21, 32]

11 filter() method

It is used to filter elements or data from the array based on certain condition.
- If it return 'true' what ever data is store in this parameter that data will return.
- If it return 'false' then it will not return any value it returns empty array
- Creates a new array.
- Original array remains unchanged.

Example

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4, 6]

12 find() method

It returns the first element of array for which call back function return true.
- It return 'undifined' if the element is false or not satisfies.
- Original array remains unchanged.

Example

const numbers = [1, 3, 4, 9, 8];

function isEven(element) {
return element % 2 === 0;
}

const firstEven = numbers.find(isEven);
console.log(firstEven); // Output: 4

13 some() method

Returns true if at least one element passes the test.
Returns false if no elements pass the test.
Stops testing once the first passing element is found. *Original array remains unchanged.

Example

const numbers = [2, 4, 6, 8, 10];

const hasGreaterThanFive = numbers.some(num => num > 5);
console.log(hasGreaterThanFive); // Output: true

14 every() method

It test all the elements in the array if all the condition satisfy then it return true.
If one condition is not satisfy then it return false.
Original array remains unchanged.

Example

const numbers = [10, 20, 30, 40, 50];

const allGreaterThanFive = numbers.every(num => num > 5);
console.log(allGreaterThanFive); // Output: true

15 concat() method

*Combine two or more arrays and returns a new array.

Example

const fruits = ['Apple', 'Banana'];
const vegetables = ['Carrot', 'Peas'];
const grains = ['Rice', 'Wheat'];

const food = fruits.concat(vegetables, grains);
console.log(food); // Output: ['Apple', 'Banana', 'Carrot', 'Peas', 'Rice', 'Wheat']

16 join() method

*Create a new string by concatenating all the elements of an array and
return a string by a specified separator.

Example

const letters = ['J', 'o', 'i', 'n'];
const result = letters.join('');
console.log(result); // Output: 'Join'

17 sort() method

*It is used to arrange the element of an array in place and return the sorted array.

By default the sort method sorts the element as strings in ascending order.

Example1

const numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
console.log(numbers); // Output: [1, 2, 3, 4, 5]

Example2

const numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => b - a);
console.log(numbers); // Output: [5, 4, 3, 2, 1]

18 reduce() method

perform some operations and reduce the array to a single value.

Example

let number = [1, 2, 3, 4, 5];
let sum = number.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);

console.log(sum);