@akashingole Thanks for the video! Is the second approach performant if we scale this application?

react storybook p detailed video banaado ?

confuse aur kar diya

Much regrads❤ love from Sri Lanka

Bhai espe video banana please Build a search bar with denouncing and throttling

Hello Sir I used react-ga4 dependency for doing same thing but you put your tracking id as it is but in my case I put that tracting I'd on .env file and made a variable after that I put that variable in component of analytics with React.initialize(process.env.variable_name); Its totally working in localhost But after deployment on azure server my website is not able to access it bcz it is in .env file and I have to use this .env file for security purposes, can you help me

Nice

Don't forget to like share and subscribe. Your support means world to me 😀

why! why do you mix languages like that, it's very confusing, make up your mind...

im 3d artist im new user code but i create 3d website portfolio but this run build issue coming how solve to compile run build for hosting Route (app) Size First Load JS ┌ ○ / 17 kB 386 kB ├ ○ /_not-found 882 B 85.3 kB ├ ○ /about 9.55 kB 371 kB ├ ○ /contact 24.7 kB 406 kB └ ○ /projects 3.4 kB 370 kB + First Load JS shared by all 84.4 kB ├ chunks/69-bf1ada01dec77e93.js 29 kB ├ chunks/fd9d1056-67a6b326d22121fa.js 53.4 kB └ other shared chunks (total) 1.99 kB ○ (Static) prerendered as static content how to solve run build i had this is coming im new in vs code react

Thanks Guru

Thanks for these videos, these are invalueable, please keep on posting the knowledge!

If I want to update my project in future , can I do that .. ? , like linking GitHub?

Hi Akash, there is a small note if the array is nested multiple times then depth condition has to be removed. Array.prototype.myflat = function(){ let res = []; this.forEach((el)=>{ if(Array.isArray(el) ){ res.push(...el.fullFlat()); } else { res.push(el) } }); return res; }

solution -Module not found: Error: Can't resolve 'childapp/App' in '/home/hexa/Desktop/micro-front/parentapp/src'

import { useState } from "react"; const SwapSelectedItems = () => { const [item1, setItem1] = useState(["1", "2", "3", "4", "5"]); const [item2, setItem2] = useState(["one", "two", "three", "four", "five"]); const [isChecked, setIsChecked] = useState([]); const handleShuffle = () => { newitem1 = [...item1]; newitem2 = [...item2]; isChecked.forEach((i) => { [newitem1[i], newitem2[i]] = [newitem2[i], newitem1[i]]; }); setItem1(newitem1); setItem2(newitem2); setIsChecked([]); }; const handleCheck = (index) => { setIsChecked((prev) => prev.includes(index) ? prev.filter((already) => already != index) : [...prev, index] ); }; return ( <> <h2>Item 1</h2> <ul> {item1.map((item, index) => ( <li key={index}> <input type="checkbox" onChange={() => handleCheck(index)} checked={isChecked.includes(index)} /> <span>{item}</span> </li> ))} </ul> <h2>Item 2</h2> <ul> {item2.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> <button onClick={handleShuffle}>Click</button> </> ); }; export default SwapSelectedItems;

Hey there, amazing people! If you're enjoying the content, don't forget to hit that like button, share it with your friends, and subscribe for more awesome updates. Your support means the world to me, and it helps keep the good vibes going! 🌟 Thanks for being part of this incredible journey!

Also u can use cloneStructured()

Code bhai code

how connect with custom domain

Bro plz tell me how to remove insecure in website

Please make such videos and real time debug issues and developments like authentication, routing, fetch that we do. As usual explain in sandbox with typescript as we can practice. By the way great video, thanks!

Thanks man, make more videos like this..👍

If you liked the video, don't forget to like, share, and subscribe 😍 Sorry for the fan noise in the background. Garmi bhut hn kya kr skte hn 😂

Very nicely explained

Plz tell me s3 charges for free teir also???

Nice

topmate.io/akash_ingole/689979

Hi @akashingole the good approach would be using slow and fast pointer approach. Here are the answers for all the questions ```js // Find pivot in an array such that left sum(leftArr) === sum(rightArr) function findPivot(array) { for (let i = 0; i < array.length; i++) { const leftSum = array.slice(0, i).reduce((acc, val) => acc + val, 0); const righSum = array.slice(i + 1).reduce((acc, val) => acc + val, 0); if (leftSum === righSum) return array[i]; } return -1; } // const array = [1, 4, 2, 5, 0]; const array = [2, 3, 4, 1, 4, 5]; console.log(findPivot(array)); // OUTPUT: 1 // Tree structure class Node { constructor(val) { this.val = val; this.left = null; this.right = null; } } const root = new Node(10); root.left = new Node(7); root.right = new Node(11); console.log(root); /* OUTPUT: Node { val: 10, left: Node { val: 7, left: null, right: null }, right: Node { val: 11, left: null, right: null } } */ // Find middle of Linked List function midOfLinkedList(head) { let [slow, fast] = [head, head.next]; while (head && fast && fast.next) { slow = slow.next; fast = fast.next.next; } return slow.val; } class LLNode { constructor(val) { this.val = val; this.next = null; } } const head = new LLNode(10); head.next = new LLNode(7); head.next.next = new LLNode(12); console.log(midOfLinkedList(head)); // OUTPUT: 7 ```

True Me every night

Nice ❤

It will be helpful if you tell us where to apply jobs for interview calls apart from naukri and LinkedIn. I am not getting any calls recently.

now its turn to 100.... thank you Mr.Akash

@akash bhai react me deployment sikhaa do

Why are we using web pack in build command. Isn't this process automatic? 😅

Thanks @akashingole . You made it sooo simple and easy. your polyfill series series like a hidden gem. Thanks again best wishes to you : D

I have been following your machine coding tutorials. It's amazing. Pls make a playlist on React with webpack. There is no proper resource

Thank you for watching!! Your support means world to me 😃

For mock interviews - topmate.io/akash_ingole

Full Video Link - kzbin.info/www/bejne/rGHbemZ4lr99jcU

// eslint-disable-next-line @typescript-eslint/no-var-requires const { ModuleFederationPlugin } = require('webpack').container; module.exports = { devServer: { port: 5001, }, webpack: { plugins: { add: [ new ModuleFederationPlugin({ name: 'host', remotes: { config_system: 'config_system@localhost:3001/remoteEntry.js', header: 'header@localhost:3004/remoteEntry.js', }, exposes: { './Header': './src/Header', }, shared: { react: { singleton: true, eager: false, requiredVersion: '^18.2.0', }, 'react-dom': { singleton: true, eager: false, requiredVersion: '^18.2.0', }, 'react-router-dom': { singleton: true, eager: false, requiredVersion: '^6.3.0', }, 'yubi/yb-core-button': { singleton: true, eager: false, requiredVersion: '^2.1.9', }, 'yubi/yb-style-provider': { singleton: true, eager: false, requiredVersion: '^2.1.2', }, 'react-native': { singleton: true, eager: false, requiredVersion: '^0.71.3', }, 'react-native-web': { singleton: true, eager: false, requiredVersion: '^0.19.9', }, }, }), ], }, configure: (webpackConfig) => ({ ...webpackConfig, output: { ...webpackConfig.output, publicPath: 'auto', }, }), }, }; When I am trying to add exposes object in existing project.App is not booting

Please don't stop this series

Need more videos sir😊

The above code will not work with full name like Akash Ingole, for that create a function and add this code - const name = fullname.split(' ') return s .map((el) => (el ? el[0]?.toUpperCase() + el.slice(1, el.length)?.toLowerCase() : '')) .join(' ')

Alternative approach const UserForm = () => { const [formData, setFormData] = useState({ fullName: '', bloodGroup: '' }); const handleChange = (event) => { const { name, value } = event.target; if (name === 'fullName') { const capitalizedText = value.charAt(0).toUpperCase() + value.slice(1); setFormData({ ...formData, [name]: capitalizedText }); } else if (name === 'bloodGroup') { const upperCaseValue = value.toUpperCase(); setFormData({ ...formData, [name]: upperCaseValue }); } }; return ( <div> <div> <label>Full Name:</label> <input type="text" name="fullName" value={formData.fullName} onChange={handleChange} placeholder="Enter full name" /> </div> <div> <label>Blood Group:</label> <input type="text" name="bloodGroup" value={formData.bloodGroup} onChange={handleChange} placeholder="Enter blood group" /> </div> </div> ); }; export default UserForm;

Hi bro, can we build a Framer website(no code website building platform) for frontend and connect with S3 for backend?

Very informative. Keep going 🎉

Please create much more hard and real-time debugging videos on react.js Thanks!

Thank you for watching!! Your support means world to me. Don't forget to like share and subscribe 🙂

Awesome explanation. Thank you for this video.