Master the React ecosystem in 2024

Подписаться 6 тыс.

Просмотров 47 тыс.

50% 1

In the React js ecosystem, selecting the right library combination is crucial.
Before starting a project, ask yourself these two questions:
1- What is the main goal of the project?
2- How complex is the project?
Depending on the answers, the correct library combination will vary.
Full Tanstack Query Course: • React Query Tutorial V...
Full Zustand State Management Course: • Zustand Tutorial for B...
Full SWR Course: • SWR React Tutorial - C...
Full React Hook Form (Zod + MUI) Course: • React Hook Form Tutori...
I will guide you how to choose the most widely used libraries based on your project's specific needs. Additionally, I'll share my recommended library combinations for common scenarios, ranging from complex interactive dashboards to simple blog websites.
You will learn how to choose combinations of libraries in the React ecosystem to develop faster and more efficiently.
You will get familiar with React libraries and what they do.
You will learn how to develop React applications in 2024.
React
React in 2024
React Ecosystem in 2024
Essential React Libraries in 2024
00:00 Questions
00:31 Framework
01:05 Eslint
01:10 Use Typescript!
01:18 Styling
01:36 State Management
02:14 Server State Management
03:04 Routing
03:18 Forms
03:34 Validation
03:43 UI Component
04:36 Icons
04:42 Animation
04:52 2D Vector
04:56 3D
04:58 Data Visualization
05:22 Data Grid
05:50 Mentions
#react_ecosystem #react #nextjs

Опубликовано:

25 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 178

@codegenix Месяц назад

Are there any other packages or libraries that you want to add to the combinations? Do you have any other recommendations?

@wshewm Месяц назад

Mantine and tRPC

@mikes1256 Месяц назад

What do you think about GSAP?

@codegenix Месяц назад

GSAP is amazing but it is not written for React specifically. Its integration in React is difficult but overall, it is the standard for awwwards websites.

@thecastiel69 Месяц назад

fusejs

@mikes1256 29 дней назад

@@codegenix I can see why you think that. I only use GSAP in my projects when doing web motion and even tho they added a useGSAP hook for react to handle clean up automatically, it can still get confusing to properly handle animations specially context based animations. Despite this issue I'm so used to using GSAP that i'm too afraid to try anything else.😅 At least I'm learning I guess.

@thecastiel69 Месяц назад

Great content, very professional. Only 3k subs is absurd. This is gonna blow up soon, with more then 100k subs in less then a year. Not subscribing this channel should be a crime.

@codegenix Месяц назад

Cannot describe how much you made me happy with your amazing positive energy. I am so glad that you liked❤

@nanonkay5669 Месяц назад

You can replace react-hook-form, material UI, emotion, and recharts with Mantine UI. You can thank me later

@user-hl3cv6xp6d Месяц назад

Exactly What many people needed ! straight to the point . i was looking for what React related tools i should learn . SWR and tenstack query it is

@codegenix Месяц назад

I'm so glad you liked it. You're very welcome.

@CURIOSITYcapital 20 дней назад

For testing use following 1. Vitest 2. testing-libray with dom providers

@pineapplejuice9814 Месяц назад

Pumped !!!!!

@whoami-so2hy 2 дня назад

i love how its explained

@codegenix 2 дня назад

I'm so glad you liked it

@user-vj9hb3gy6d Месяц назад

Helpful video. Please consider my feedback: 1. Reduce the music volume a bit and increase your voice volume. 2. Add subtitles - people who cannot hear or cannot understand your accent can benefit. 3. Limit VFX - too much animation makes it hard to follow. Thank you!

@codegenix Месяц назад

Thanks for your thorough explanation bro. I'm gonna consider all of them. Noted!

@Proless_ 11 дней назад

The more comments i read the more insecure i get with my Project but I can’t stop with learning even more from these comments😅

@Lemmy4555 Месяц назад

I use svelte and 0 other dependencies for routing, state management, forms, animations and tables since those things are either natively supported by sveltekit or html/css

@codegenix Месяц назад

Svelte is amazing. If you have worked with both React and Svelte, how would you compare them together? Which one is better for which types of projects?

@2gbeh Месяц назад

Show off

@Lemmy4555 Месяц назад

@@codegenix I'm currently working with React, but React is inferior from every point of view. React is harder, requires more boilerplate and is easy to get poor performance if you don't memoize everything. React requires you to understand the hooks, the fact that every time a component is re-rendered its function is re-executed and all the state has to be immutable and it doesn't provide a solution for styling out of the box. With Svelte you don't have to care about anything, you just write what you would write in a vanilla JS project and the framework take care of the reactivity magically and you don't have to fill your codebase of spread operators for every mutation.

@codegenix Месяц назад

Thanks for your thorough explanation, What about solid js?

@Lemmy4555 Месяц назад

@@codegenix never tried but it looks better than react, react is following solid's steps with its compiler in preview. In principle if you can easily integrate a vanilla Js library without creating ad hoc wrappers but leveraging only on onMount "hook" then solid is definitely a good solution. Another pain point of react is that it behaves so differently from "normal" imperative code that you need to create complex wrapper around every js library to use them.

@K.Huynh. 29 дней назад

Thank you for sharing! this guide is so cool!

@codegenix 29 дней назад

Happy to help!

@himesh_89 Месяц назад

Any helpful guides for tanstack router?

@Thassalocracy Месяц назад

Shadcn is good but for me React Aria really shines for its Aria-compliant and accessible components, plus it's also easily stylable with either vanilla, css-in-js or tailwindcss.

@codegenix Месяц назад

That's great. Shadcn uses Radix for accessibility under the hood. Have you ever worked with Radix UI?

@karanborana8540 26 дней назад

Material React Table is also a great alternative for AG Grid, since many features in later are paid.

@codegenix 26 дней назад

@karanborana8540 Thanks bro, I didn't know the library that you just mentioned but that is also a very solid choice. Ag grid is only suitable for grid-based softwares not common scenarios, you're right.

@hollywoodhubb 28 дней назад

Can you explain which livery is available for react native I want some livery like shadcn etc. Please can you make a video with this topic

@PrMovies0 Месяц назад

Thanx a ton

@codegenix 29 дней назад

You're welcome🙏

@luisantoniolopez5145 18 дней назад

Destino final, fuego en el cielo.

@energyloopsantistress Месяц назад

Quality content 🙌❤️

@codegenix Месяц назад

Cannot thank you enough my friend. Thank you very much.

@Soullumina Месяц назад

such an amazing content! damet garm✨

@codegenix Месяц назад

Fadaaaa, merciiii👌

@azroguetwitch8946 29 дней назад

Hey, just an advice as an video editor you should try to use of keyframe interpolation on your software like After Effect. You can search a tutorial with terms like Ease In/Out Keyframe *Your Software Name*. I think it will greatly improve the quality and profesionnalism of your animations.

@codegenix 29 дней назад

Thanks for the tip bro. Definitely gonna consider your recommendation🙏

@RatherBeCancelledThanHandled 11 дней назад

I love Jotai for state management

@codegenix 11 дней назад

How do you compare it with other solutions?

@RatherBeCancelledThanHandled 11 дней назад

@@codegenix Extraordinarily simple . Little to no boiler plate code . The exact inverse of Redux . Fast + simple .

@codegenix 10 дней назад

Wow!

@talhaanwar1005 Месяц назад

Nice bro I hope your channel will grow soon

@codegenix Месяц назад

I really appreciate your kindness. Thank you so much

@thrywyn Месяц назад

Great video! I would suggest using an audio filter to reduce the harsh loud "s" sounds.

@codegenix Месяц назад

Thanks for the tip! Do you have any suggestion or software to use?

@thrywyn Месяц назад

@@codegenix if you Google sibilance removal, you should get a ton of results for whatever software you use 😄

@codegenix Месяц назад

Appreciate it👌

@srijonp4 Месяц назад

Great content, Please bring a react with typescript course too

@codegenix Месяц назад

Sure. Working on it...

@havetrustissue8975 Месяц назад

I use:- Small: NextJs, SWR, Context API, Styled component, React Hook form, Zod Large: NextJs, SWR, Redux, Ant/Shadcnui (If needs data grid 'Ant' is best), Formik/Hook form, React icons

@codegenix Месяц назад

They are amazing combinations. Can I ask why do you prefer NextJs for smaller projects too?

@havetrustissue8975 Месяц назад

@@codegenix actually I didn't find reason why I shouldn't use NextJs for a small project. Unless it's extremely simple app like where only html, css needed.

@AdityaRaj-lj5wf 13 дней назад

@@havetrustissue8975 the revalidate path thing doesn't it makes for no need for state management tools?

@riteshbhoskar153 Месяц назад

Great video bro

@codegenix Месяц назад

I'm glad you liked it

@jacquelynecarmen 29 дней назад

I have just one question we really need state management library like redux or zustand, i work with React toolkit and it's totally for clients but for next js i don't think we need state management.

@codegenix 29 дней назад

@jacquelynecarmen Depending on the use case, it may be necessary. For example for highly interactive user interfaces, a state management and even a server state management library might be very helpful. Even opening and closing a simple dialog might be difficult without state management solutions.

@hoapooh0306 21 день назад

Can you please list out all the framework or tools you mentioned in the video please, my English is quite bad so it’s hard for me to follow 😊. Thanks a lot! Btw, your content is so great.

@codegenix 21 день назад

@hoapooh0306 Sure, I'm really glad that you liked it! For simple client side apps: react easy router, zustand, swr, rhf, tailwind, shadcn, lucid icons, shadcn tables For more complex and enterprise scenarios: react router, zustand, tanstack query, rhf, zod, emotion, mui, mui icons, framer motion, recharts, mui data grid and vitest For simple performant and seo and content based apps: astro, tailwind, shadcn, lucid icons For complex full stack server side projects: nextjs, tanstack query, zustand, rhf, zod, tailwindcss, shadcn, lucid icons, framer motion, shadcn table.

@astronaako Месяц назад

Love the vid! Straight to the point but maybe the pace is a bit too fast

@codegenix Месяц назад

Glad you liked it🙏thanks for your feed back. Noted!

@Pareshbpatel Месяц назад

Excellent overview of the React Eco System in 2024. Thanks. {2024-05-25}

@codegenix Месяц назад

I'm glad you found the overview useful!

@alefalfa Месяц назад

very good video

@codegenix Месяц назад

Thanks for the support, means a lot! 🙌

@walterbringer1986 17 дней назад

Dont need this all Just Laravel + React or Laravel + Vue.js And you have all the power from the backend and the power in the frontend

@codegenix 17 дней назад

Yes Laravel is super mature and is a great choice for the backend.

@sahilkhatri4182 Месяц назад

Great stuff, you should use De-Esser on your audio

@codegenix Месяц назад

I'm an audio noob😆. What is that?

@sahilkhatri4182 Месяц назад

@@codegenix basically just reduces the hissing noise (the 's' and 't' words)

@codegenix Месяц назад

Thanks for your recommendation. I get headache whenever try to edit my audio with adobe audition...

@matt-james-c Месяц назад

Lol this thumbnail summarises why I don't want to master the react ecosystem... Simples

@codegenix Месяц назад

Yeah the possibilities are endless

@user-qj4rr1rm8i Месяц назад

I got almost every pokemon cards... Framer motion is my next card to catch.

@codegenix Месяц назад

Wonderful! Framer motion opens a new world of opportunities.

@sinamalakzadeh4843 Месяц назад

thanks for your information please consider making videos of creating rather simple or more complex projects using the combination that you named. as well as some redux

@codegenix Месяц назад

Currently working on a full stack project tutorial my friend...

@sinamalakzadeh4843 Месяц назад

@@codegenix btw are you persian ?? your accent is very simiular

@codegenix Месяц назад

Are dadash😅

@sinamalakzadeh4843 Месяц назад

@@codegenix بنازم دوست دارم

@codegenix Месяц назад

@sinamalakzadeh4843 Fadat❤️

@xue7483 16 дней назад

great video , but it would be wonderful if the music were a bit quieter.

@codegenix 16 дней назад

Thank you for your feedback. I'm definitely gonna consider your advice

@joja2174 12 дней назад

Bro really don't want to recommend redux 😂 I agree 😂😂😂

@codegenix 12 дней назад

Right😅❤️

@md.redwanhossain6288 Месяц назад

every new day and a brand new lib for react ecosystem. seems like angular is perfect for me with everything built-in.

@codegenix Месяц назад

That's very true my friend. Angular has an awesome architecture with built-in packages which can be enough for most of the projects.

@NadidLinchestein Месяц назад

What do you think of Python/Django + React/Redux for full stack enterprise software? Or do you recommend something else?

@codegenix Месяц назад

That's an amazing combination and it's more than enough for all types of projects. If your are experienced in python and typescript, then it is a great choice. Separation between backend and frontend is necessary for enterprise level applications.

@punkweb 19 дней назад

Been using Django (DRF) and Angular or React for 10 years at work where I've built hundreds of projects from small startup MVPs to large enterprise level. For personal/side projects, usually just Django with maybe a tiny bit of jQuery. Works like a charm.

@binitrupakheti4246 29 дней назад

Master the react ecosystem: 50+ packages. Changes every month. Master angular ecosystem: angular + rxjs Thats it. Grass is starting to look greener on the other side to me.

@SnowzNZ Месяц назад

Please consider writing subtitles as it can be hard to understand what you are saying somethings and RU-vid's auto generated ones are very good.

@codegenix Месяц назад

Doesn't youtube auto generated subtitles work on the video now?? Aren't they available for you?

@omokaroelliot1942 Месяц назад

@@codegenixit not correct as much

@codegenix Месяц назад

Sure I'm gonna consider that. I was not aware of that. Thanks

@favanzzo Месяц назад

React course when? please

@hendra_it19 Месяц назад

✨

@codegenix Месяц назад

Working on it...

@MahirAlamTohan 13 дней назад

what do you think about mantine and trpc??

@codegenix 13 дней назад

@MahirAlamTohan Many of the viewers recommended Mantine, praising its well-written documentation and active community. Additionally, tRPC is an excellent choice if you have a tightly coupled backend and frontend and need type safety.

@MahirAlamTohan 13 дней назад

@codegenix Yeah! I use tRPC with Next JS because it's backend and frontend are like the same.

@MahirAlamTohan 13 дней назад

@@codegenix Thank you for your fast reply. I will wait for more videos from you. and I will be very happy if you can make a video on tRPC It is a tech I am not very familiar with. Though It is popular but It doesn't has many tutorial with Next JS. I use t3 so I didn't had to dive deep into it.

@codegenix 13 дней назад

@MahirAlamTohan The drizzle orm + nextjs course will be ready soon. It's exactly what you want

@jongseoklee9477 20 дней назад

good video

@codegenix 19 дней назад

I'm glad🙏

@MR_White.T 18 дней назад

can you manage the pitch of the sound , else the video qulaity is good ⭐

@codegenix 18 дней назад

Sure. I'm definitely gonna consider it

@Exiledz 29 дней назад

Great video, but the higheer frequencies in your voice over is a bit harsh, not sure if you had it EQed or something. Just some feedback !

@codegenix 29 дней назад

You're right. Thanks for your feedback🙏

@Msyo_Jaber Месяц назад

I like your viduo

@codegenix Месяц назад

I'm really glad that you liked it!

@PandaNuker 14 дней назад

ngl tanstack query >> all shadcn >> tailwind

@irfanmohammad7269 Месяц назад

Instead of material UI better to go with primereact it is 👌

@codegenix Месяц назад

I have used primeng for Angular, that was the most complete components catalogues I have ever used! Primetek is amazing.

@ronilpatel2294 10 дней назад

make tutorial for three js sir....💖

@codegenix 10 дней назад

As soon as possible

@lahcencodery Месяц назад

nice content, music in the background is a bit loud

@codegenix Месяц назад

Noted! Thanks for the feedback

@Alex-bc3xe Месяц назад

zustand is a german word which means state and everybody misspells it.

@codegenix Месяц назад

Amazing library by the way

@farid-game Месяц назад

May I ask where are you from?

@codegenix Месяц назад

@farid-game Hamoonja😅

@farid-game Месяц назад

@@codegenix It's all clear to me now, dude. Good Luck : 😉 🤞

@user-lj4lo7cx7m 26 дней назад

Whats the ui name of 4:07 ?

@codegenix 26 дней назад

Ant design

@user-lj4lo7cx7m 26 дней назад

@@codegenix thanks

@user-lj4lo7cx7m 26 дней назад

@@codegenix thanks

@khurramshahzad2444 27 дней назад

Where is redux toolkit in recommendation

@codegenix 27 дней назад

2:05

@2puluh4 Месяц назад

what happened to remix.js?

@codegenix Месяц назад

I'm not experienced in remix js and because of lack of experience I should not recommend it. Would you recommend it? How do you compare it with nextjs?

@2puluh4 Месяц назад

@@codegenix No, I won't be dismissing Next.js and Remix.js. In fact, I'm interested in gathering opinions from people (including yours) about Next.js and Remix.js. I've completed learning React.js and now I'm eager to delve deeper into either Next.js or Remix.js frameworks.

@codegenix Месяц назад

That's amazing👌. I wish you the bests

@twitchizle Месяц назад

Remix is now react router.

@vinayakhegde3068 Месяц назад

Bit confusing to choose next js knowing how it keep's changing every now and then 🙃

@codegenix Месяц назад

Also it has so many bugs on version 14...

@vinayakhegde3068 Месяц назад

@@codegenix True honestly sticking to vite+React frontend and a separate backend would be great anything I personally use go lang and laravel

@codegenix Месяц назад

Can't agree more👌

@toppojaiwant Месяц назад

This is the exact reason why I went from Full blown framework like NextJS to Just using React with Node and Typescript. This Ecosystem works the best for all types of apps (Simple to the most complex apps). Although at enterprise level most of the projects I've worked with use JAVA(spring) or Python(Django) or .Net on the backend. The MERN/PERN always makes it that you're evergreen on your potential and career as there's plenty of opportunities for this stack all around the world(Remote as well as On-site).

@codegenix Месяц назад

Exactly, separating backend and frontend part of any web project is essential to create long-term maintainable projects in the long run. As you said, MERN stack is an amazing choice for these types of scenarios or using React with many other backend technologies that you just mentioned.

@randomperson619 Месяц назад

great video, your discord invite seems to be expired. could you please update?

@codegenix Месяц назад

I'm gonna fix it today. Thank you that you noticed.

@codegenix Месяц назад

I just updated the Discord server invite link in the channel info bro. But I'm a noob in discord😪. I would be very happy if you check the Discord server and tell me what else should I do.