react js components tutorial Importing and Exporting Components | Complete React Course in Hindi #4

react js components tutorial Importing and Exporting Components | Complete React Course in Hindi #4
Complete react course: In this react course, we will see how to used React js components import and export.

Export your function component from that file (using either default or named exports).

Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.

So, Like , subscribe, share, and support to keep us motivating.



Don't Forget to Follow me on all Social Network,

YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad

create react app with create-react-app | NPX | Complete React Course in Hindi #3

create react app with create-react-app | NPX | Complete React Course in Hindi #3

Complete react course: In this react course, we will see how to used NPX create-react-app using projects. we will look into creating a new react app using create-react-app.

Complete react course: In this react course, we will see how to use react js. React is an amazing library for creating user interfaces.

React is a JavaScript library created by Facebook
React is a User Interface (UI) library
React is a tool for building UI components

You will be learn how to setup npx create-react-app in start.
You will be learn about folder structure.

Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.

So, Like , subscribe, share, and support to keep us motivating.



Don't Forget to Follow me on all Social Network,

YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad

react setup in visual studio code | how to install react js | Complete React Course in Hindi #2

react setup in visual studio code| how to install react js | Complete React Course in Hindi #2

in this video you will be learn some basic concepts How to create react app boiler by Rohit Azad Malik (R.A.M)

Complete react course: In this react course, we will see how to use react js. React is an amazing library for creating user interfaces.

React is a JavaScript library created by Facebook
React is a User Interface (UI) library
React is a tool for building UI components

You will be learn how to setup react js in start.
You will be package json file .
You will be learn about folder structure.

Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
So, Like , subscribe, share, and support to keep us motivating.



Don't Forget to Follow me on all Social Network,

YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad

Introduction to React Js | Complete React Course in Hindi # 1

Introduction to React Js | Complete React Course in Hindi # 1

in this video you will be learn some basic concepts of react js in theory module by Rohit Azad Malik (R.A.M)

Complete react course: In this react course, we will see how to use react js. React is an amazing library for creating user interfaces.

React is a JavaScript library created by Facebook
React is a User Interface (UI) library
React is a tool for building UI components


You can Learn Once, Write Anywhere.
You will be learn about Virtual DOM.
You will be learn about JSX .
You will be learn about React Hooks.

Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.

So, Like , subscribe, share, and support to keep us motivating.

Don't Forget to Follow me on all Social Network,

YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad

callback in javascript in hindi | callback function in javascript synchronous vs asynchronous

callback in javascript in hindi | callback function in javascript synchronous vs asynchronous.

In this video you will be learn callback function in javascript .

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

You can watch on video of Callback in javascript

now lets code to this

function printName(name) {
alert(`hi, ${name}`);
}

function useCallbackFun(callback) {
let name = prompt("Please enter your name.");
callback(name);
}

useCallbackFun(printName)

Now we create two function one is printName and seconod in useCallbackFun in this code we get the name in as argument in printName function and show to alert with text hi "name";


now in another way if we take time to get name then we used to this way to callback function

function printName(name) {
alert(`hi, ${name}`);
}

function useCallbackFun(callback) {
let name = '';
setTimeout(function(){
name = prompt("Please enter your name.");
callback(name);
},100)


}
useCallbackFun(printName)

Now let create another function with get odd and even number
as below is example :-

function isOdd(number) {
return number % 2 != 0;
}
function isEven(number) {
return number % 2 == 0;
}

function filter(numbers, fn) {
let results = [];
for (const number of numbers) {
if (fn(number)) {
results.push(number);
}
}
return results;
}
let numbers = [1, 2, 4, 7, 3, 5, 6];

console.log(filter(numbers, isOdd));
console.log(filter(numbers, isEven));

So, Like , subscribe, share, and support to keep us motivating.

Don't Forget to Follow me on all Social Network,
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad


Checkut t my chaanel in youtube :- https://www.youtube.com/c/AzadMalikRohit

Movies and TV Series Searching App in React JS | Movies App | React App | ReactJs Project

Movies and TV Series Searching App in React JS | Movies App | React App | ReactJs Project

In this tutorial we'll be creating a movie application using React, Routing, Axios, React Bootstrap Css, React Pagination, React Alice Carousel implementing React Hooks, and fetching data from an external API (The Movie Database).

In this video we creating a home page with call a api using useEffect lifecycle hook and do a pagination in bottom.

Let's Create a Movies and TV Series App in React JS and React Bootstrap with full responsive functionality. We will use MovieDB API for backend.

We create multiple pages :-
1. Top Trending
2. Top Trending Movies with Filter By Categories
3. Top Trending TV Series with Filter By Categories
4. Search Movies / TV Series
5. CONNECT WITH US
6. About Page


1. App setup
2. React Routing
3. Dynamic Routing
4. AXIOS setup and used
5. React Bootstrap install and setup
6. Bootstrap Icons
7. React Pagination
8. React Alice Carousel
9. themoviedb API used and setup


Movie API Document Page Url
:- https://www.themoviedb.org/documentation/api


(Create an account and request an API key) Movie API Home Page Url
:- https://www.themoviedb.org/


GitHub source code url :- https://github.com/rohitazad/my-entertainment-react
app live url :- https://my-entertainment-react.vercel.app/


So, Like , subscribe, share, and support to keep us motivating.

Don't Forget to Follow me on all Social Network,
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad


Checkut t my chaanel in youtube :- https://www.youtube.com/c/AzadMalikRohit

map filter reduce in hindi | JavaScript Tutorial in Hindi | higher order function in hindi

map filter reduce in hindi | JavaScript Tutorial in Hindi | higher order function in hindi

map filter reduce in hindi | JavaScript Tutorial in Hindi | higher order function in hindi .

Map, filter & reduce Array functions are the most popular Higher-Order Functions in JavaScript In this article you will learn everything about map filter reduce sort and forEach Between Regular Functions and Arrow Functions basic + advanced javascript in hindi.

In this article I cover everything you need to know about the higher order function in Regular Functions and Arrow Functions .

Concepts Covered:
1. forEach
2. Filter
3. map
4. sort
5. reduce
now let's create two variable and used to both variable in HOF (higher order function)

const peopleData = [
{name:'Mobile', category:'Gadget', age:5, price:25000},
{name:'TV', category:'Appliances', age:10, price:35000},
{name:'Washing Machine', category:'Appliances', age:15, price:42000},
{name:'HeadFone', category:'Gadget', age:3, price:12000},
{name:'Microwaves', category:'Appliances', age:5, price:13500},
{name:'Mixer', category:'Appliances', age:10, price:9000}
]

const ageData = [12,7,11,23,18,22,17,9,22,32,45,28,6,4,13]

1.forEach (let's used to forEach method in peopleData variable)
used to first normal loop

for(let i =0; i< peopleData.length; i++){
console.log(i,'__', peopleData[i])
}

now in this code we do the normal loop with peopleData length and console log print to every item with index no.

now let's write to this in ES5 Regular function with forEach

peopleData.forEach(function(item, index){
return console.log(index, '_', item)
})

in this above code you can see to we pass to call back function in forEach HOF and log to object with index no.


now let's write to this in ES6 with fat arrow

peopleData.forEach((item, index)=>{
return console.log(index, '_', item)
})

now you can write to this in a single line code

peopleData.forEach(item=>{console.log(item)})

2. filter in javascript means you can filter something in array of collection.
now let's check the code and how to used filter method in javascript and if we have no filer then used to normal for loop .

const filterData = []
for(let i=0; i< peopleData.length; i++){
if(peopleData[i].category === 'Gadget'){
filterData.push(peopleData[i])
}
}
console.log(filterData);

in this above code we used to normal loop in javascript and filter to data base on category.

let's we used to filter method and check to result.

const filterData = peopleData.filter(function(item){
return item.category === 'Gadget'
})

console.log('filterData', filterData);

now here we can used to ES5 Regular function and result is coming same.
Now if we used to ES6 fat arrow function then let's check .

const filterDataArrowFun = peopleData.filter(item=>item.category === 'Gadget')

console.log('filterDataArrowFun', filterDataArrowFun)

now you can see to same result print in console and we used to here fat arrow function with in single line for filter method.

3. map method used to javascript map method you can manipulate the data base on the requirements.
like this if we required a node extra with dicountPrice in total price of 10% then we used to map method and we also used to normal loop.
let's check with normal loop / ES5 function and ES6 fat arrow function in below code

const updatedData = []
for(let i=0; i < peopleData.length; i++){
peopleData[i].discountPrice = peopleData[i].price / 100 *10;
updatedData.push(peopleData[i]);
}
console.log('updatedData', updatedData);

do with in ES5 Regular function.

const updatedData = peopleData.map(function(item){
item.dicountPrice = item.price / 100 * 10
return item
})

do with in ES6 fat arrow function.

const updatedData = peopleData.map((item)=>{
item.dicountPrice = item.price / 100 * 10
return item
})

console.log('updatedData es6 function ', updatedData)

now you can see above code we get same result of if we used normal loop / ES5 Regular function and ES6 fat arrow function.

4. sort method is used to sorting data base on two element .
now let's check the code of sort method .

const sortItem = peopleData.sort(function(a,b){
return b.age - a.age
})
console.log('sortItem', sortItem)
const sortItem_2 = peopleData.sort((a,b)=> a.price - b.price)
console.log('sortItem_2', sortItem_2)

we used to first Descending order the data in base on age we apply to age sorting in ES5 Regular function.
and in second method we used to ES6 function and sorting the data base on price in Ascending order in single line code.


5. Reduce method now check this method in javascript . now check first we used to normal loop in javascript.

let ageDataTotal =0
for(let i= 0; i < ageData.length; i++){
ageDataTotal = ageDataTotal + ageData[i]
}
console.log('ageDataTotal', ageDataTotal); // ageDataTotal 269


now check with Reduce method in ES6 fat arrow function and get the total sum of age in the below code.



const ageTotalSum = ageData.reduce((totalSumofAge, current)=>totalSumofAge + current, 0)

console.log('ageTotalSum', ageTotalSum); // ageTotalSum 269

now check with Reduce method in ES6 fat arrow function and get the total sum of productData price in the below code.

const prodctTotalValue = peopleData.reduce((totalSum, current)=>totalSum + current.price, 0)

console.log('prodctTotalValue', prodctTotalValue) // productTotalValue 136500

if you get more internist thing learn in javascript then go to my youtube channel and check to some more interesting video:- https://www.youtube.com/c/AzadMalikRohit