I Coded 10,000+ React Components, Here is What I Learned...

[@s-e-p-i-d-m]

hey Pedro, I just wanted to thank for this channel. Today I was reviewing which channels subscribed and yours remind me as a good thing. I used your videos to create some sample project to link them in my CV and they were very helpful. Those helped me to improve my CV and I was able to Immigrate. OMG, just realized today is 18 of month which is exact day I left country 14 months ago. Thanks young man.

[@PedroTechnologies]

Wowww thats crazy! Good to hear :) Happy i was able to help you with that!

[@EUU100]

Pedro in the video the first time you said "this react component" no components appeared on the screen. Thanks for sharing your knowledge 💎

[@PedroTechnologies]

Sorry about that, editing mistake :/

[@sanmarchen]

Thanks, Pedro

[@centralcoding]

Thanks from Ethiopia.

[@d_andreev]

Great tips! I agree with pretty much everything, separating your business/ui logic in a hook or a service and unit testing it is definitely the best thing you can do for your app. Maybe one thing I can add to this list is just being as minimalistic as possible. A lot of people tend do bloat up react apps, whether it's by adding not so needed npm packages or just these small little pieces of code that don't look big in a PR, bring little to no value and as time passes on infest your codebase. I always try to ask myself/the people I work with, do we really need X, can we get away without Y? The less code the better :)

[@PedroTechnologies]

Good point! I tend to only use external packages if i feel like it will have a significant roi for my project!

[@durgfestivalvibes]

Thanks for the video! Can you please make a video on building a production level React project in which we have the best practices,folder strcuture, custom hooks, remote state management etc. I have been working on react since 2 years but confused about everyhting.

[@PedroTechnologies]

That's a great idea! I can think of a video structure that would teach that :)

[@codefinity]

0:55 You're pointing in the air, but I don't see any code. Forgot to edit that in?

[@PedroTechnologies]

Editor made a mistake lol but the examples i show right after explain it. Tbh i dont know how i didn't notice while watching it after the edit :/

[@Pablo-ts9dv]

a lot of basic, important things mentioned, good job!

[@PedroTechnologies]

Glad you liked it!

[@returncode0000]

Awesome, I am a big fan of all your videos, they are all very valuable.

[@PedroTechnologies]

Glad you like them!

[@vortexdeo4545]

Make a big ass component refactor Video? - Like a mobile screen showing Lab partners available based on package selected and current location - where each partner has lab-tests listed, check for premium, sample pickup cost, overall cost, discount etc - And on choose component - a bottom sheet to select onboarded patient or relative, and then your address(also allow to add address via map), and date-time slot from choose partner slots - Also not to mention - all bottom sheet selections are opening and closing in this fixed order (closing address would open previous patient selection modal with selected patient) - The move to order review screen Applying such principles in huge logic handling on a single screen - becomes difficult

[@TabuHana]

Amazing advice

[@preyah2857]

I've worked in a project that home page with sliders , check-in/out dates logic and more are all in a single component , If just the image slider's index state changes the whole page/component will re-render

[@PedroTechnologies]

Lollll i hope it was written a while ago. Legacy code always sucks

[@mrinalg4600]

nice video discussing small details from the experiences make more of these, explaining details/practices of other tech and its workflow patterns deeply -ts, nextjs-mern (full stack projects), industry based

[@jssecrets]

Hi Design Patterns 👋😊

[@godofwar8262]

I am building a yt clone full stack one currently working in frontend part and structure matters

[@tsdineshjai8565]

Good points !

[@PedroTechnologies]

Glad you liked it!

[@john_doe_2231]

which state management library is most popular in the industry ?

[@PedroTechnologies]

Popular is probably Redux but the best is probably zustand imo

[@psyno1856]

title is like a resume bullet point these days

[@PedroTechnologies]

Ur not wrong lol

[@Alex.Shalda]

Thanks Pedro!

[@meekbronsen6668]

You count the number of components you create, what?

[@PedroTechnologies]

Loll i made a calculation! I've been coding everyday in react for the past 6 years (job, youtube, personal businesses). Just for a project for a youtube vid i have to code on average 15 components, and i code the project twice. I have over 400 projects for youtube vids, thats already 12k not counting my full time job :)

[@muhammadhasnat9835]

dumb question, there's a word called estimation.

[@emreq9124]

aand , code reviews are crucial.

[@PedroTechnologies]

Ofc 🙌🙌🙌

[@AlwaysWeb]

Thanks for sharing your valuable experience with react. I think global state is a topic that is easily misused by beginners, do you have any tips on how to recognize when global state is needed?

[@sujoykrhaldar]

5:51 it should be *client state manager, redux context API zus are client state mang tools

[@its_abdu4925]

Hi, can you make a video about how much js i should know to start react? Cuz it seems like a never ending roller coaster. I saw your video, the one from two years ago, is it still valid in todays time

[@sandunlasantha]

Your videos really helped to boost my journey 🚀💡 Could you please do a video on tRPC? 🙏✨

[@PedroTechnologies]

Glad to hear! Yeah i can :)

[@assasionking7882]

Bro can you please tell me that should i stick to react and build more complex projects or shall i start learning next and start building stuffs with it please bro reply i need help

[@PedroTechnologies]

Next and react are the same thing. My guess is you use vite to create your react app right? (or even CRA). Next is just an alternative to that, its like normal react with some seasoning on top. If you feel comfortbale with building projects in react, there is no problem with learning next. However don't keep jumping between stuff, like, don't learn next for 3 months and then try learning remix for no reason. Stick to one and master it :)

[@assasionking7882]

@PedroTechnologies ok thanks bro 👍🏻

[@fatimaarshad8100]

Good to see you! I love your videos; the way you teach is amazing :)

[@PedroTechnologies]

Glad you enjoy it!

[@dylannguyen5154]

the thumbnail speaks for itself 🤣🤣

[@hardwired66]

More about advance custom hooks

[@حسامالغامدي-غ3ص]

ياخي شكرا من القلب

[@svdden_strike]

CAN you please do a MERN stack tutorial. Most of the tutorials are outdated completely for beginners

[@PedroTechnologies]

I have some but will post more!

[@svdden_strike]

@ thanks

[@aymenbachiri-yh2hd]

thanks

[@alexon2010]

Muito Show, trabalho com React a 10 anos, e no meu caso comecei a criar o meu Hooks de dados com o encapsulamento do fetch com swr, poderia também usar o React Query, mais realmente muda o Jogo na alimentação dos dados.... Um coisa que eu ainda apanho Muito é para entender a logica do Render quanto ao Servidor eo uso correto de Service Works para melhor o desempenho de aplicações PWA, nesse ponto todas Libs ou Frameworks parece meio que um caixa preta.... Por por conta de usar Services Works eu, eu vejo que a logica do Build das aplicações ficaram confusa, já que Organizamos cada vez menor nossos componentes com suas devidas separação de Dados e UI.... mas no build junta tudo e transforma isso em um único Arquivo... não faz sentido mais usar assim com Service Works, streams de dados, http2... É nesse ponto que estou tentando entender mais principalmente para Otimizar ao máximo as PWA

[@hqcart1]

dude, welcome to the AI age where creating 10,000 components is a casual AI day...

[@PedroTechnologies]

Yeahh loll nowadays everything is getting way easier, but most of these was from b4 2022

[@teliiz]

cara, top demais!

[@saraths6923]

angular

[@ashwinsnmv]

Why would you test dumb components? Are you referring to integration tests?

[@PedroTechnologies]

When i say dumb components i mean pure ui components, so no logic. So you would make a testing file for the dumb component and just test the ui. And then you would also make a testing file for the custom hook you made for that components logic

[@IbrahimAbdi_]

Redux really be annoying

[@PedroTechnologies]

lol yes

[@IbrahimAbdi_]

@PedroTechnologies let me just stick to zustand, context api

[@bilalch898]

This is how you can also create 10,000 components easily: Input InputLabel InputIconLeft InputIconRight Just keep going with every component. Like are you serious?? Pretty unrealistic title I've ever seen for KZbin video.

[@PedroTechnologies]

What is the problem with those? Those are components... The title literally says I have coded over 10k components in my life, what is the unrealistic part of that? My github is public lol you can check it

[@sahed9]

💖💖

[@Human_Evolution-]

After 10k components, I learned that AI can do it with 1 sentence of English. (Slightly kidding)

[@dlanyar1251]

paidro

[@sougataghar1179]

10000 isn't possible lol,i believe within 100

[@PedroTechnologies]

I did the calculations 😎 I've been working with react for the past 6 years, i code everyday due to my job + youtube and i write multiple components per vid so it goes above 10k