Master the React ecosystem in 2025

[@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]

@@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❤

[@தமிழோன்]

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!

[@oleksandrvoichyshyn7486]

Hi! Thank you for the video and the thought-provoking content. I'm planning to build full-stack apps and have been considering the following technologies: #Frontend: - Next.js (JavaScript) - React Query - Zustand - React Hook Form - Zod - Tailwind CSS - Framer Motion - Shadcn (after watching your video) - Lucide Icons (after watching your video) - Jest (for testing) - Firebase (as the database) #Backend: - Nest.js (TypeScript) - GraphQL - Firebase (as the database) - Swagger (for API documentation) - Jest (for testing) I'm working on developing two applications: Admin and Client for a Learning Management System (LMS), similar to Udemy or Coursera, as well as handling requests for document translations from the source to the target language. I'm still exploring options for a rich-text editor, video players, and other related features. I would really appreciate any advice you could offer on these technologies. Thanks again!

[@codegenix]

@oleksandrvoichyshyn7486 I'm really glad that you liked it and accept my apology for my delayed response. The project that you just mentioned is very huge and is at an enterprise level. Pick your options with so much care and try to gather a very good team of product owners and developers. The stack you just mentioned in perfect. These are some of my recommnedations: Definitely try to use nextjs with typescript to make your project scalable. Using react query in nextjs violates the nextjs structure. Use server components and server actions mostly to have the best performance and only use react query at places where you need high interactivity. Also if you want to experience the best DX and great type safety between the backend logic and your front end logic, try to use nextjs mostly for backend side of your project also. Try to use another nodejs backend solution like nestjs or express whenever you need to write a service when you need to implement a complex scenario. Also instead of documenting your api using swagger, use Scalar because it is modern and swagger is not maintained anymore.

[@oleksandrvoichyshyn7486]

@@codegenix No worries at all, and apologies for not seeing your response earlier. Thank you so much! I truly appreciate your feedback and all the valuable advice. I’m really excited to dive deeper into everything you’ve suggested. What you’re doing is amazing, and I’ll definitely be looking forward to your next video! 😃

[@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.

[@YYoudi]

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]

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

[@nanonkay5669]

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

[@CURIOSITYcapital]

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

[@whoami-so2hy]

i love how its explained

[@codegenix]

I'm so glad you liked it

[@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👌

[@BeeBeeEight]

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?

[@cariyaputta]

Thanks. Nice tutorials. Added to my bookmark.

[@codegenix]

Awesome, thank you!

[@UmarQureshi-k8l]

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.

[@ashfakhossainevan791]

Hi, Why do we need react-query in NextJS, where we can use server action in server component. Would you please make a tutorial about NextJS, react-query, and zustand? It is going to be valuable . Thank you in advance.

[@codegenix]

@ashfakhossainevan791 When your app requires high interactivity and reactivity, such as in an admin dashboard, using server actions can be a headache and may not be suitable for these scenarios (although server actions do have their appropriate use cases). Due to the lack of experience among many KZbinrs and the misguided hype they create, it often leads to confusion among developers. Just ask one of them how they handle and maintain 600 API calls in their application.

[@Abbatyya]

Please what would you said between nextjs and remix, i'am quandring about these framework, i've done some project on nextjs, but its overwhelming to me but because of it unstable upgrade, and i heard about remix. please can you help me to dispelling this quandring to me. thanx

[@krishnaTiwari851]

What are perfect combination for document based documentation based project

[@codegenix]

docusaurus.io is the perfect choice for your scenario

[@hoapooh0306]

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]

@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.

[@karanborana8540]

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

[@codegenix]

@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.

[@binitrupakheti4246]

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.

[@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]

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

[@RatherBeCancelledThanHandled]

I love Jotai for state management

[@codegenix]

How do you compare it with other solutions?

[@RatherBeCancelledThanHandled]

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

[@codegenix]

Wow!

[@misharyrafique1250]

Great Video! I often look up to your channel to check if there is something you have uploaded. Well, as a front end developer, how can I work and practice API? I do not want to focus on building backend and use the complicated BAAS tools. Any idea please? and also where can I find complicated react functional challenges to sharpen my skills? because I faced a challenge from a company few months ago. they asked me to build an UI where I can split the UI for infinite times. It was exciting but totally new to me and most of the online challenges are like: ;'build todo' and stuff. so kindly share me resources where I can face more complex challenges.

[@codegenix]

I'm so glad that you like my videos. I really appreciate it. Nextjs is an amazing option for you if you don't want to focus on backend development. You can easily develop a full stack project with your current front end skills with only a little bit database knowledge using modern orms like drizzle and pirsma without dealing with complexity that backend libraries like express and nestjs provides.

[@xue7483]

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

[@codegenix]

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

[@srijonp4]

Great content, Please bring a react with typescript course too

[@codegenix]

Sure. Working on it...

[@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!

[@SnowzNZ]

Please consider writing subtitles as it can be hard to understand what you are saying somethings and KZbin'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

[@Exiledz]

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]

You're right. Thanks for your feedback🙏

[@himesh_89]

Any helpful guides for tanstack router?

[@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❤️

[@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]

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.

[@jshq8818]

Great content, but hard to follow, no clear title for each component

[@codegenix]

Which part?

[@K.Huynh.]

Thank you for sharing! this guide is so cool!

[@codegenix]

Happy to help!

[@favanzzo]

React course when? please

[@hendra_it19]

✨

[@codegenix]

Working on it...

[@MR_White.T]

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

[@codegenix]

Sure. I'm definitely gonna consider it

[@luisantoniolopez5145]

Destino final, fuego en el cielo.

[@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...

[@hollywoodhubb]

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

[@MahirAlamTohan]

what do you think about mantine and trpc??

[@codegenix]

@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]

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

[@MahirAlamTohan]

@@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]

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

[@mask03310]

Quality content 🙌❤️

[@codegenix]

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

[@jacquelynecarmen]

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]

@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.

[@talhaanwar1005]

Nice bro I hope your channel will grow soon

[@codegenix]

I really appreciate your kindness. Thank you so much

[@impactsongs]

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]

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

[@Proless_]

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😅

[@joja2174]

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

[@codegenix]

Right😅❤️

[@ronilpatel2294]

make tutorial for three js sir....💖

[@codegenix]

As soon as possible

[@풍월상신]

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

[@codegenix]

Wonderful! Framer motion opens a new world of opportunities.

[@riteshbhoskar153]

Great video bro

[@codegenix]

I'm glad you liked it

[@B47SY]

Is shadcn slow+

[@codegenix]

It's basically tailwind so it is very fast

[@codegenix]

It's basically tailwind so it is very fast

[@Pareshbpatel]

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

[@codegenix]

I'm glad you found the overview useful!

[@lahcencodery]

nice content, music in the background is a bit loud

[@codegenix]

Noted! Thanks for the feedback

[@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.

[@Soullumina]

such an amazing content! damet garm✨

[@codegenix]

Fadaaaa, merciiii👌

[@favanzzo]

missing your content

[@user-lj4lo7cx7m]

Whats the ui name of 4:07 ?

[@codegenix]

Ant design

[@user-lj4lo7cx7m]

@@codegenix thanks

[@user-lj4lo7cx7m]

​@@codegenix thanks

[@eddgodoy]

Subscribed

[@codegenix]

Thanks bro

[@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.

[@alefalfa]

very good video

[@codegenix]

Thanks for the support, means a lot! 🙌

[@PrMovies0]

Thanx a ton

[@codegenix]

You're welcome🙏

[@khurramshahzad2444]

Where is redux toolkit in recommendation

[@codegenix]

2:05

[@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 : 😉 🤞

[@danielarvai]

FYI: Zustand is a German word, pronounced 'tsoo-shtand'

[@codegenix]

Too hard😅

[@jongseoklee9477]

good video

[@codegenix]

I'm glad🙏

[@matt-james-c]

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

[@codegenix]

Yeah the possibilities are endless

[@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.

[@PandaNuker]

ngl tanstack query >> all shadcn >> tailwind

[@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.

[@pineapplejuice9814]

Pumped !!!!!

[@prashlovessamosa]

1 month nothing uploaded 😅

[@codegenix]

@prashlovessamosa I am truly sorry. The current situation in the country is not good at all, and I am not in a good mental state and unfortunately cannot concentrate. I have almost completed a full Drizzle course, about 90% done, and I will release it soon.

[@prashlovessamosa]

@@codegenix so sorry I hope you will be able to tackle all the bad circumstances. Be happy and healthy Sorry again

[@codegenix]

@prashlovessamosa You are an amazing friend. I hope I deserve your kindness❤️🙏

[@Jaber_Dev]

I like your viduo

[@codegenix]

I'm really glad that you liked it!

[@creotove]

1:38 umm 90.3% not subscribed and 9.8 are subscribed. 90.3+ 9.8 = 100.1% Bro got 0.1 percent extra in 100% 💀

[@codegenix]

Amazing attention🤣🙏

[@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.

[@psmontte]

Very Distracting motion graphics

[@codegenix]

Thanks for your feedback. Noted!

[@hosainrahmati5216]

I have a question are you persian ?

[@codegenix]

@hosainrahmati5216 Are sotoon😅

[@joelmilan7835]

This is the arrr word

[@codegenix]

Don't understand what you mean

[@arystanbekjetisy7329]

Ssssssssss Sss S S S S S Ss Sssss S S S S S Correct your diction

[@codegenix]

Sure🤣

[@daun55]

chatgpt ahh video

[@codegenix]

Don't understand what you mean

[@daun55]

@@codegenix video structured like an ai made it

[@codegenix]

@daun55 Premier and After Effects. It took a long time...

[@daun55]

@@codegenix i meant like content of it

[@codegenix]

@daun55 no