Please make a videos of developing real time small react online-shopping project. Which includes modules like search bar, menu bar, product details page, cart, chechout, order confirmation, etc
You already had the network tab open. would have been a good time to observe the js requests without async modules and with... literally is the point. Otherwise good stuff! Very useful technology.
3:31 This error is due to a duplication declaration, not what you meant to show. I understand what you're trying to teach, but please claim this error so that it doesn't mislead the ones who are new to the field.
can i rename the bundle that's build from this code splitting so i can use it to cache to serviceworker ? because i've read the documentation but didn't find anything about that
Hey I have an app that adds an item to list on one page to the database and it directs to another page with a table of rows with the inserted item, however when I first load the table of rows it doesnt show me the added item until I refresh the page again, do you think lazy loading is gonna solve it
when you use lazy, it creates a separate package that is lazy loaded . So you have split the code into two separate packages instead of usual one package.
Piyush arora using React.lazy(importFunction) is an instruction to the build process to save the code imported by importFunction into a different file which is sent to the browser only when the content is rendered.
I have a question. In my component, i have a list posts/articles. First, when loading page will display a list. Then, when i scroll by mouse, page will load more a new posts. Can i use lazy and suspense to do this? How to ? Thanks!
@@Techsithtube if i use react-lazyload then can do this, but i wanna use lazy and suspense to do this. React lazy and suspense are only using to load component or route. So, when component is loaded, all records (list posts/articles,..) are displayed.
I can not associate using ReactJS when I need to use the same as SSR, I see many tutorials, but they do not explain how the React SSR relationship would be and for example the use of http2, https, I made a small code in the nodejs, serving static files like the http2 protocol, but I do not know how I would do this with React SSR using lazy, suspense ...... ect ......
I have a two react app with its own route and redux...and I have a third react app say main react app where I need to call other two on click of some button and load the respective app and it should do it's own job
So for example I have a list of apps on my website (now they just loading by BrowserRouter), some of them are pretty big, so should I apply a lazy load to them if my website is slow? In most cases I saw things on website loading in old fashion way (with page refreshing), should I do that? Can someone help?
Yes, even if your package is too big that you are loading by Browser Router. Because otherwise that will be loaded with the main app which would be slower the performance of the main app. the advantage is that separate teams can work on each microApp. Again , it all depends on your architecture and domain.
Stop bringing religion into everything. Why you need to refer to your God to appreciate his work? Does he or anyone making this video believe in your God?
hello sir I need your help After getting a successful response from API, I want to change the page/load a new component in the browser but didn't find the correct way to do so. So please help regarding this. Example- axios.post('api.staging.goplannr.com/v2/user/otp/generate', this.state) .then(response=> { console.log(response); return( ) } OTP is my component but in the browser, it is not working and also not showing any response.
I even understand the concept of lazy component, but how would I do the rendering relation with https server, https, I even have a code that still does not have much control over the rendering of html, css, js, but the same works !! ! How to have more control over this my code node http2, http and how do I relate this with react to offer rendering of componenentes in http2, https " import fs from 'fs'; import path from 'path'; import http2 from 'http2'; import mimeTypes from './mime-types.json'; const key = fs.readFileSync('./security/cert.key'); const cert = fs.readFileSync('./security/cert.pem'); const server = http2.createSecureServer({key, cert, allowHTTP1:true}); const {HTTP2_HEADER_PATH, HTTP2_HEADER_METHOD, HTTP_STATUS_NOT_FOUND, HTTP_STATUS_INTERNAL_SERVER_ERRO, HTTP2_HEADER_STATUS} = http2.constants; const PUBLIC_FILES = __dirname+'/public'; function fntRespondErrorStream(err, stream) { if(err.code === 'ENOENT') { stream.respond({':status':HTTP_STATUS_NOT_FOUND}); } else { stream.respond({'status':HTTP_STATUS_INTERNAL_SERVER_ERRO}); } stream.end(); } function fntContetType(file_extensao) { let contentMimeTypes = ''; if(file_extensao !== null) { let contentMimeTypes = mimeTypes.filter(res => res.extensao === file_extensao);
I actually forgot lot of angular and I am relearning it , especially newer version of it. I will reboot the series early next year. Thanks for a reminder. :)
You are importing MyComp directly then defining it as const for lazy load. That's what, that error meant. Beginners are watching these kind of videos. Please double check your content bro before posting on internet.
dumbest intro ever...for those who dont know what lazy loading is...its exactly what it sounds like, lazy loading...... gee thanks, i guess i learned all i need to know and can go test on this stuff now!! lol
The example is very poor, everybody need to load something lazy in router. Very hard find a original tutorial, everybody copy from everybody and we have just todo apps. If you know Angular, tell me, it's possible to load something in background?
The best Lazy loading explanation I have ever seen. Short, crisp, to-the-point. And I love the way you describe . Thank you very much !! :)
The error was not because the component was not loaded, it was a "Duplicate Declaration Error" 😂 3:29
exactly.
I was like wtf, how is this convoluted. Thank you for pointing it out, i thought i was going insane.
@@WomboBraker me too.
It was suspens of his video.
Me too thought wtf is that
Simple, straightforward, effective. Thanks, TechSith!
Thanks for giving short, fast and easy example for lazy loading
Clear, concise and condensed. Best tutor and tutorial series ever
Your Tutorial is ULTRA MAX PRO CRYSTAL CLEAR. THANK YOU !!
best lazy loading explanation
Bro you re the best in Js, I love THE simplicity in your video tutorials, Thanks, Love from Mumbai
Thanks Rohit. Keep on learning! love from San Jose
@@Techsithtube ffgfgfgh
I am watching you first ever video and I realllllllyyyyy loved it..
UA-cam's comments section is lazy loaded actually 😜
Excellent tut, thanks for sharing
Gr8 tutorial. Greetings from Poland! 🇵🇱
Thanks Mate. It was actually helpful.
Thank you! I really appreciate your videos
You explain so well!!
Thanks for the awesome comment:)
wow wow! Great example!!
short and to the point!
wow you nailed it in such a short time..! just amazing!
It's exactly what I need, thank you!
Happy to help!
Loved the explanation..
Thanks Alot for your efforts for easy understand the concept. Hats off . Please it's kindly request you explain react on server side rendering
I will create a video on server-side rendering for react. you need to know node for that. Thanks for watching Reehana.
Your explanation is so great! thanks so much
Helped a lot, thanks!
Thanks for your sharing
My pleasure
Amazing, crystal clear
Thanks so much guy, this is awesome!
Thank you. It helped Me A Lot
Simple and clean explanation. Thanks a lot
Good one, makes my app load much better.
Please make a videos of developing real time small react online-shopping project. Which includes modules like search bar, menu bar, product details page, cart, chechout, order confirmation, etc
Great job. I wish you have a free react-typescript course to building an application.
You already had the network tab open. would have been a good time to observe the js requests without async modules and with... literally is the point. Otherwise good stuff! Very useful technology.
Thank you, more clear with the last example!
Great. Nice tutorial
🔥
Thanks man!
Thanks
Really helpfull and appriciable. Thanks
Sunny, glad it was helpful!
Very nice video, well explained, love the way you explain the thing, you made difficult to easy to understand, keep posting, love you.
Good stuff
Very finest channel for me Thank u
Thanks for a nice comment Ramu
awesome
Great Video!
Very well explained. A big thankyou for this. Can you please make a video on redux-form?
Swati, sure I will add to my queue. thanks for suggesting..
Thanks!!
awesome !
Very nice sir.
Do you recommend in all my imports of Componentes into another ones, use React.lazy and Suspense?
Wanna Know Which fontFamily and extension are you using in your vscode because the font looks different than original and familiar to codesanbox
Except first error rest was good trchsith!
amazing video
THanks Hussain for a nice comment . :)
Cool!
nice video. thank sir.
Really nice🤩🤩
3:31 This error is due to a duplication declaration, not what you meant to show. I understand what you're trying to teach, but please claim this error so that it doesn't mislead the ones who are new to the field.
Thank you.
lol i clicked because of the thumbnail. i liked because of the content. :)
really great sir, thankyou :)
well explained feature! thank you a lot!
thank you are great this playlist is so useful
cool!!
Thanks Sir.
can i rename the bundle that's build from this code splitting so i can use it to cache to serviceworker ? because i've read the documentation but didn't find anything about that
Thanks a lot
Hey I have an app that adds an item to list on one page to the database and it directs to another page with a table of rows with the inserted item, however when I first load the table of rows it doesnt show me the added item until I refresh the page again, do you think lazy loading is gonna solve it
It sounds taxi tutorial, content is cool
Can you please tell me what is the theme/font you are using for VS code? I love they the way fat arrows are looking in your theme.
the font is 'fira code'
Another great video !!!!
Is it also lazy load after webpack bundle? I think video should cover nested lazy load too.
basically any file that you lazy load is a separate bundle.
@@Techsithtube So is it replacing webpack lazy load?
It is so amazing. TKS boy
video starts at 0:43
OMG dude , your mouse cursor freaking me
Great...
How exactly is code splitting achieved here?
Good stuff as usual!
when you use lazy, it creates a separate package that is lazy loaded . So you have split the code into two separate packages instead of usual one package.
@@Techsithtube i didn't understood your reply...could you explain?? And sir please make vedio on renderprops
Piyush arora using React.lazy(importFunction) is an instruction to the build process to save the code imported by importFunction into a different file which is sent to the browser only when the content is rendered.
I have a question.
In my component, i have a list posts/articles.
First, when loading page will display a list.
Then, when i scroll by mouse, page will load more a new posts.
Can i use lazy and suspense to do this?
How to ?
Thanks!
That is a little different. what you are referring is to make api call on scroll, which you can do without using lazy loading.
@@Techsithtube if i use react-lazyload then can do this, but i wanna use lazy and suspense to do this.
React lazy and suspense are only using to load component or route. So, when component is loaded, all records (list posts/articles,..) are displayed.
I can not associate using ReactJS when I need to use the same as SSR, I see many tutorials, but they do not explain how the React SSR relationship would be and for example the use of http2, https, I made a small code in the nodejs, serving static files like the http2 protocol, but I do not know how I would do this with React SSR using lazy, suspense ...... ect ......
Will there be a second api call from the client to fetch the code for MyComp separetely?
Yes that is the point. rather than getting everything at once. load things as needed.
Good video. But the first error is a different one. You redeclared a variable on line 4
this guy has a really good accent for an indian
I have a two react app with its own route and redux...and I have a third react app say main react app where I need to call other two on click of some button and load the respective app and it should do it's own job
This is not that bad, everyone I talked to made it seem like this was very difficult....
So for example I have a list of apps on my website (now they just loading by BrowserRouter), some of them are pretty big, so should I apply a lazy load to them if my website is slow? In most cases I saw things on website loading in old fashion way (with page refreshing), should I do that?
Can someone help?
Yes, even if your package is too big that you are loading by Browser Router. Because otherwise that will be loaded with the main app which would be slower the performance of the main app. the advantage is that separate teams can work on each microApp. Again , it all depends on your architecture and domain.
what if i want to unload the lazy component after im done with the component?
truly this man is awesome he made my love with react Allah bless you
copy from dan abromov talk
Stop bringing religion into everything. Why you need to refer to your God to appreciate his work? Does he or anyone making this video believe in your God?
Why the Freddie Mercury pic in the thumbnail? :)
It was after I saw him movie trailer and I am a big fan of queens
when using create-react-app in vscode, terminal crahes everytime.How to fix it?
What is the error?
hello sir
I need your help
After getting a successful response from API, I want to change the page/load a new component in the browser but didn't find the correct way to do so.
So please help regarding this.
Example-
axios.post('api.staging.goplannr.com/v2/user/otp/generate', this.state)
.then(response=> {
console.log(response);
return(
)
}
OTP is my component but in the browser, it is not working and also not showing any response.
I even understand the concept of lazy component, but how would I do the rendering relation with https server, https, I even have a code that still does not have much control over the rendering of html, css, js, but the same works !! ! How to have more control over this my code node http2, http and how do I relate this with react to offer rendering of componenentes in http2, https
"
import fs from 'fs';
import path from 'path';
import http2 from 'http2';
import mimeTypes from './mime-types.json';
const key = fs.readFileSync('./security/cert.key');
const cert = fs.readFileSync('./security/cert.pem');
const server = http2.createSecureServer({key, cert, allowHTTP1:true});
const {HTTP2_HEADER_PATH, HTTP2_HEADER_METHOD, HTTP_STATUS_NOT_FOUND, HTTP_STATUS_INTERNAL_SERVER_ERRO, HTTP2_HEADER_STATUS} = http2.constants;
const PUBLIC_FILES = __dirname+'/public';
function fntRespondErrorStream(err, stream) {
if(err.code === 'ENOENT') {
stream.respond({':status':HTTP_STATUS_NOT_FOUND});
}
else {
stream.respond({'status':HTTP_STATUS_INTERNAL_SERVER_ERRO});
}
stream.end();
}
function fntContetType(file_extensao) {
let contentMimeTypes = '';
if(file_extensao !== null) {
let contentMimeTypes = mimeTypes.filter(res => res.extensao === file_extensao);
for(let i of contentMimeTypes){
contentMimeTypes = i.contentType;
return contentMimeTypes
}
}
}
server.on('error', (err) => console.error(err));
server.on('stream', (stream, headers) => {
const reqPath = headers[HTTP2_HEADER_PATH];
const reqMethod = headers[HTTP2_HEADER_METHOD];
const pathFile = path.join(PUBLIC_FILES, reqPath);
console.log(reqPath);
if(reqPath === '/') {
const file = `${pathFile}index.html`;
stream.respondWithFile(file, {'content-type':'text/html', ':status':200}, {onError: (err) => {fntRespondErrorStream(err, stream)}});
}
if(reqPath !== '/') {
let contentTypeValue = fntContetType(path.extname(pathFile).split('.')[1] || null);
const file = `${pathFile}`;
stream.respondWithFile(file, {'content-type':`${contentTypeValue}`, ':status':200}, {onError: (err) => {fntRespondErrorStream(err, stream)}});
}
});
server.listen(8090, () => console.log('Servidor HTTPS Rodando na porta 8090'));
"
I didnt get your question. Do you want to lazy load here in this code?
techsith,, why are you not uploading any videos on angular?? please upload.
I actually forgot lot of angular and I am relearning it , especially newer version of it. I will reboot the series early next year. Thanks for a reminder. :)
@@Techsithtube thanks for your reply
What is this indent extension?
I am using prettier extension of vsCOde
What is the benefit of using this ?
What about chunk the code in react
Is that Freddie Mercury on your thumbnail ?
Yep its him :)
@@Techsithtube I've been obsessed to watch his biopic for a while now. Now wherever I go Freddie Mercury is showing up!!
Got a type error and it didnt work but I got the point and I guess thats what matters
why he isn't show the network to see the lazy component ?
You are importing MyComp directly then defining it as const for lazy load. That's what, that error meant. Beginners are watching these kind of videos. Please double check your content bro before posting on internet.
dumbest intro ever...for those who dont know what lazy loading is...its exactly what it sounds like, lazy loading...... gee thanks, i guess i learned all i need to know and can go test on this stuff now!! lol
The example is very poor, everybody need to load something lazy in router. Very hard find a original tutorial, everybody copy from everybody and we have just todo apps. If you know Angular, tell me, it's possible to load something in background?
Ii just explanation from website content nothing other than that..
1 down vote for the fake accent
poor video