React Like a Pro: React Best Practices

To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/PedroTech . You’ll also get 20% off an annual premium subscription.
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / pedro.fmachado_
Github: github.com/machadop1407
Business Email: [e-mail]
🌟 Gear / Hardware I Use and Recommend 🌟
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💻 amzn.to/42kqFuM 💻 Monitor
🖱️amzn.to/3C0ZhHb 🖱️ Mouse
📷 amzn.to/3OHJvbM 📷 My Camera
🎤 amzn.to/3oxSthj 🎤 My Microphone
⌨️ amzn.to/3oFPpj1 ⌨️ My Microphone
⚡ amzn.to/3MYMnzM ⚡ LED Lights In the Background
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#reactjs #coding

[@PedroTechnologies]

To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/PedroTech . You’ll also get 20% off an annual premium subscription.

[@godofwar8262]

Bro please start the backend series with node js beginners to advanced all things please i learn front-end from you Edit : hey Pedro by see likes you know what people want

[@sabitsadiq]

Honestly we need it also.

[@vuuzo]

2:58

[@Jael__]

About single responsibility component or independent component. I'm currently learning about redux and testing, and when i test a component that use useSelector in it, it became too complicated that i gave up. So i change that component to use props. I'm confuse about the single responsibility or independent component. is a component that use useSelector an independent component or a component that use props that an independent component??

[@goedekoop501]

From my experience I’d like to share some info. The RxJs together with Graphql and TS works very well. It allows you to create flexible states and in additional you will be able to create a service layer that will be responsible for managing your requests (queries,mutations). Pedro, have you ever used such things?

[@GianlucaBarranca]

nice video Pedro , thx for your advice

[@ahmedazouzi2899]

Thank you Pedro 🤠

[@SahilBhosale08]

Thanks for the video Pedro

[@zainulkhan8381]

Much insightful video @pedro

[@LeoSolla]

Nice style man! Noooix Pedrão monstroo

[@anubhavseet004]

Hey pedro learned a lot from you , love you bro.

[@srikanthmedicherla3651]

Thanks Pedro! I was hoping if you can jump into some Design Patterns we can use in React? (eg: Provider Pattern, 2. Hooks Pattern, 3. Presentational & Container Component Patterns, 4. Render Prop Pattern, 5. High Order Component (HOC) Pattern.)

[@recursion.]

pedro pedro pedro pedro pe 🕺🕺🕺🕺🕺

[@emmanuelareiza9699]

TY Bro

[@LucaFiorenzano]

Brazilian compliments to this great video!

[@KiranKumar-hz8ur]

Tq

[@juniormutalbe3587]

Pedro are you from Brazil?

[@petarkolev6928]

I highly suggest to try using Feature-Sliced Design :)

[@antoineleduc7611]

I like atomic design for components, with atoms, molecule, organisms & page at least, to organise file structure Then we add folders : Utils/ Context/ Hooks/ Routes/ Services/

[@mudassirdeveloper]

Thanks pedro ,We all love you ,In future your talent will beat ,🧡🧡💥💥

[@KiranKumar-hz8ur]

Need a project which works on react hooks for optimization 💥

[@luisdomiciano]

Boa Pedro! Brasil aqui

[@youngdaveeofficial1590]

pls create a sinlge mysql video

[@tatendamuzenda8442]

lets get this guy to 200k subscribers

[@Hamza__Sardar_Khan]

We want backend from you in Node.Js and Next 😘😘😘

[@PatrickHenry123]

bros selling out

[@39abii]

bro wasted one third of his video on intro and ad starts at 2:58 btw

[@waleedsharif618]

Please create mern project

[@sakosa8784]

Damn im early af, 6 minutes

[@OCEMTechZone]

🎉

[@anazi]

I use ABC structure. Which is something I came up with to simplify the way I manage react apps. a - app (To manage navigations and routing only) b- boards ( Are smart components take care of fetching and logic ) c - Components ( UI components that only receive props and can handle empty props ) --- This was my best solutions honestly it helped alot to have a clean app structure where I can immediately know the hierarchy of a certain element in my app. Also, I no longer use /src folder. Finally I changed (assets) folder to (resources) and (context) folder to (stores).. and so many other things to keep my app folder strcture clean without having to many folders start with the letter "c" for example (components, constants, context ..) so for constant I gave it a folder named "keys" this way the folder structure becomes a very nice top to bottom structure with the most important element is on top "app" and the least important elements are at the bottom "widgets, and zod" for mini components and validations that you only touch once and can copy and paste between projects without changing anything.