Create-react-app is not too bad, but the biggest problem is that it seems development of it has completely stopped, with no commits in months and issues growing into the thousands. Probably because facebook laid off the whole team 😅
Yeah I just started using Vite and it feels like CRA but faster and better in just about every way, it only takes literally a few minutes to get started with it, definitely recommend. Also I wasn't expecting it but this vid helped me solidify certain concepts such as static site generators and server side rendering. Thanks as always for putting out informative content that's also easy to understand. :)
nice, just fill your company with a billion different frameworks and tools that will probably be obsolete in less than an year (as history shows us) and make your projects basically impossible to maintain as almost no one knows how to use these things that were used to solve problems that usually don't exist
Next.js existed for few years already. I got to know about it few years ago, but it has already existed for a long time back then. Gatsby is pretty old too. These two will probably be the last to disappear, and probably not sooner than when React itself does. And then you can finally return back to our most beloved PHP, which would have existed for 30-40 years by then.
I recently switched from CRA to Vite, and oh my dear Dante it's so much faster and smoother! I even posted about it on Facebook even though 90% of my friends aren't devs and have no idea what it means, just because I loved it so much as soon as I used it. I've even started using Vite for vanilla TS projects, because setting up a TS pipeline manually is a pain.
@@nettojms5083 I do. It's how I keep in touch with most of my friends. I think of LinkedIn as a resume and job search site, not really as a social media site.
I've used Gatsby for a simple marketing site and hated it (sending my form with GQL was a pain in the ass). Right now I'm learning Remix for a job interview and I'm pretty impressed so far :)
From my limited knowledge, using GraphQL for something like that is quite overkill to be honest. Any details from learning Remix that I can know of? Would love to hear more from you
@@phucnguyen0110 Yeah... it was to send data to a homemade newsletter API. As for Remix, the official docs is pretty nice, there's 2 tutorials that cover the basics pretty well, I think. :) Take care, Phúc!
I use Laravel/PHP for backend API and then ReactJS/Astro for frontend, depending on what’s required. I am still using Linux server boxes for hosting with Apache/MySQL. Laravel fits in perfectly well. Easy to set up a local dev environment with docker.
I have always used Laravel for quick back-ends, very solid software with some nice design patterns. I would however not use it if you are using Astro. If you are using Astro you are probably trying to build an optimised website and a PHP backend will be such a bottleneck, that any speed improvements from Astro will be diminished.
@@jasperams Thanks Jasper. Bit more info: Astro is for marketing/static site frontends due to SEO benefits compared with React/Vue/Svelte/other SPA. There are usually some Laravel-served api endpoints that are helpful for pulling in blog post data at build time. Laravel/PHP is primarily for backend client portal and api endpoints specifically for client/admin login pages. For management sakes, I prefer to keep separate repos for different aspects of a business site. Are you using NextJS for everything? How do you set things up?
It's a shame testing rarely gets any mention on this otherwise fantastic channel. Configuring Jest can often be tricky in Node/front end, and while I enjoyed the speed boost from using Vite to build my React app, I struggled to configure Jest and Istanbul to work properly. I actually ended up scrapping the Vite and going back to the older way of setting up my app, which is Babel + Webpack. Slower, but now my unit + integration tests at least run. And testing works out of the box with create-react-app, too.
T3 is one of the better stacks rn. It has type safety from frontend to backend. Auth and the database are 95% ready after creating the boilerplate. You only need the private keys to have it fully working. And ofcourse tailwind
Nice overview. I would like to supplement the "take nextjs further" part by stating: redwood and blitz upgrades your stack to a full stack monolith app. Where as Remix is an alternative to Next with a different approach to ssr
I personally love the ease-of-use for vite. It's really nice. Also, Svelte seems really nice. Do you have any plans on making a Svelte video? Maybe a tutorial like your react notes app (loved it btw) but for Svelte?
@@kgaming7599 this is the issue that made me not want to learn svelte, I figured vue has the best of both worlds. the availability of tutorials & jobs, the easiness of use of the framework, and the availability of extensions and dev tools and plugins etc (aka the ecosystem) and how vast it is with the growing community
I still think it's still a good exercise to try and manually piece all the components together to get an understanding on how everything works at a lower level. Once you have a good understanding then certainly use a higher level framework.
Its really detrimental to release videos like these every few weeks when people are simply just trying to get a handle on what things are going to help them get a secure job in the field. CRA is still totally viable to use.
Was wondering as well... But, no matter. This is just one person's opinion... Also, most youtube creators feel they're under pressure to appear to know about all of the latest trends and this week's js framework. This can sometimes steer people in the wrong direction. UA-cam devs likes to throw out ultimatums, I guess to trigger more comments. I wouldn't take this too seriousely. Afterall, we need to make our own decisions on what fits best for what we do. Whenever youtube says "don't do xxx", I would approach with caution...
I left a similar comment before seeing yours. I’ve both started TS CRA projects from scratch using -template typescript, and I’ve added TS to existing CRA apps, I believe with the simple act of adding a tsconfig file to the project and that’s it. I genuinely can’t imagine how it could possibly be any easier to get TS support than that.
Ok, I definitely prefer Next.js over CRA... BUT... the constantly changing landscape of the React ecosystem is absolutely insane. Decision fatigue, learning curves, and lack of standardization across the industry is exhausting and confusing.
Maybe because you invent constantly more and more new tools and frameworks instead of sticking to one well working one? It is community problem, which is a huge problem in frontend. People over and over bring new shiny toys, instead focusing on creation of reliable and long term sustainable apps build on one thing.
That's webdev though. Not just react. More stability in server side or thick client. But web dev is constantly crazy. I'd say it's honestly more stable these days than it was 10 years ago
and youd be wrong about that. More stable was having 5 languages to worry about, today there are literally countless codebases you can work in now and almost none of them are different enough to matter.
Kyle, you may wanna present each of them in detail. I'm curious what Gatsby uses instead of DOM. Are those that use jQuery too slow? How compatible are they if I add Redux, Jest, AntD? Can you add the less popular alternatives and talk about them too? Have you tried UMI? The comment section here really caught my attention. Surprisingly lots of useful info from everyone.
I mean I think Gatsby is mostly made for ssr so no redux here it's mostly just static pages rendered on the server Though astro is in a bit more of a gray area
As someone who has been around in the web dev space since the end of the 90s, I find it interesting that we went from "generate everything on the server" (PHP, ASP) to "it's too slow, generate everything on the client" (React) to "it's too slow, generate most things on the server" (Next.js). Conveniently the push back to the server appears to line up perfectly with the rise of cloud services that charge for server resources 🤣. As usual, think for yourself and don't chase the latest trend without fully understanding the ins and outs.
' "it's too slow, generate everything on the client" (React) ' 👆 this is kinda false. you're talking about single-page-applications in general and the reason for them was because server-side-rendering doesn't account for user interactions (unless you literally refresh on every click, very wasteful) and also tools like next.js will do SSR as well as load an SPA which then takes over the rendered page for near-instant navigation. also, SSR might actually drop in popularity again in the future if web bundles (server responds with document + assets to initial request) turn out great because then SSR won't have as big of an advantage as it does right now. that being said, it's true that SSR was overly neglected when it's a very important and stable approach to delivering content. the big issue in the past was mostly that there was no good way of using the same templates for SSR and for the frontend. trying to make a modern web app when you're using something like Thymeleaf or Blade on the backend is a nightmare.
@@FunctionGermany JS was working totally fine for rich interactions before SPAs. That being said I like SPAs for apps (not websites) because they don't involve a server. The CPU power of all clients together will be vastly more than any server and not cost me a dime in hosting. This is huge. I feel like SSR is pushed for ANY situation to obviously increase cloud spending (the pockets of Vercel). Too many devs use Next for apps when SPA was the better choice. I still use Next for public websites.
I personally started with React and NextJS after years of custom building HTML/CSS and PHP OOP and I am really in love with NextJS and Typescript. P.s. great video I watch a lot of your content and you bring real value to the developer community. Thanks mate ✌
How…is using TypeScript a pain in CRA? There is a typescript template you can use when creating a new project if you want, but adding it to an existing CRA is as simple as adding a tsconfig file and just….starting to use TS.
You can use next js in almost every project. You can opt for ssg and csr based on the route. Though guarding route will lead to additional steps but it's going to be a fun in next 13 once it's stable...
I don’t like being forced into a frame work. There are always situations in the real world where you end up fighting the framework. And you end up with awful performance or terrible code. It’s like a totalitarian government that feels you what and how to do. Eventually it rubs against the people and they’ll rise up and get frustrated and the wheels come off. Openness and freedom (also to make mistakes) ultimately prevails. This is why the non-tightly packed framework language products are still there and being used and have a far longer software lifetime.
CRA with TS is a pain? What? Why? I'm with you, it's better to keep away CRA for new applications. But I still haven't seen a minute of video, and I see that CRA is not as bad as you say...
Not a single word of parcel. It's as fast, if not faster, as vite and you don't need to configure anything if you don't want to. The plugin ecosystem is bigger and feels now grown up.
Astro > Gatsby for one main reason- you can use the regular DOM, which means all those fun tutorials and student projects and documentation you may find online are much more likely to be in vanilla JS or Jquery. You can still find tons of React Docs, but I find due to being more general purpose, there's a bigger pool of code that you don't have to refactor if you stick to using the regular DOM vs virtual DOM.
i’m about halfway into the video so idk if you mention this later, but Astro is capable of both SSR and SSG- and the SSR features it has are actually really ahead of the game. I use Next 13 and Astro both very frequently, and I think both the Next and Astro teams are doing great, but I think Astro has the best SSR of basically any full stack framework. Next could probably beat it in the world of react, but for anything else Astro is amazing. I love using it with Svelte, also the create Astro CLI is probably the best CLI experience i’ve gotten from a create experience. If you haven’t tried Astro for SSR you’re seriously missing out
Just note Astro is MPA. Not SPA like normal React app would be. That being said Astro has been a lot of fun to use. Simple and powerful and I’m a Fred fan.
I'm a longtime WordPress dev and I've been hearing about Astro as a frontend framework for a WP backend. I'm curious if React is less capable inside Astro...I read (and probably misunderstood) that it's not possible to pass event handlers between components for a truly dynamic experience. Can you use context providers, routing and other features? I'd appreciate any enlightenment. What are the limitations of React in Astro?
@@ontheruntonowhere Yeah so the number one issue with Astro is exactly this. Because it uses "partial hydration" things like context providers won't really work. Now you can get the exact same effect through what Astro calls "nanostores" they're basically just Svelte stores, but those allow you to share context in a partially hydrated environment because the nanostores live outside of the DOM nodes. They're actually really nice to work with IMO. The reason why this is a problem is because it can make portling legacy code a real pain because you'd basically have to recode a lot of the UI logic for sharing state between components. I guess the good news would be that this rewrite would allow for faster compilation and runtimes, but IMO it wouldn't be worth it to rewrite considering all the existing support for WordPress, unless u really really wanted to do it. That's why I prefer using a fine-grain reactive framework like Svelte with Astro because the two pair really nicely together because they were both built to support similar design patterns. This docs page is really helpful if you want to learn more about this: docs.astro.build/en/core-concepts/sharing-state/ TLDR: There aren't any limitations on React in Astro, but using React in Astro could require some rewrites to the React code where state-sharing logic is defined.
@@MerkieAE Thanks for this explanation, very helpful. I'm not going to be rewriting anything (at least not yet) but the WP sites I build are generally more complex than a blog or marketing site. I typically interact with the backend a fair bit and I was imagining the React islands in my pages as fully-functional standalone apps. Now I guess I have to learn Svelte, something I've been consciously avoiding until I get used to React's concepts and methodology.
have been watching your content for a while but just realized missed to subscribe. As a self tought and still learning codder, your content have been short and to the point and was a great help so far. Mach Thank you.
Moving forward use a high pass filter in an equalizer to clear muffly frequencies in your vocals. The bass in your voice is hard to ignore. Tip for a tip
I tried switching my production build to Vite but run into a problem with code splitting. Turns out that the esbuild doesn't really respect the import order, and I had parts of a library undefined, because they were reexported before they had a chance to be imported.
If u relay on shopify support, well you will be really disappointed. Shopify has bad documentation, their development tools are like toys, they simply suck. Also why the hell they bought remix? It's open source...
The bigger problem with CRA is slow development cycle. They push features at an incredibly slow cycle which makes the tooling outdated compared to other stuff available in the community.
As a frontend new developer, it's really hard for me to work..when I got confidence using some frontend technology, in few days other is coming. Does everybody feels the same?
I just said this in a dozen comments here too, its totally unfair to spend time learning something because "youtube" said to and then a week later we are told that same thing "is not good anymore" and now have to spend another week learning a different language? HOW do we expect to get any work done like this?
Just recently suggesting to move from cra to vite and my senior happy with it, once i'm using vite i feel cra is so slow although configuring eslint on vite is a bit difficult
Web dev is an absolute goof show now with 100+ "frameworks" and its all dumb BS that makes like ONE thing slightly more easier to use but you have to learn an entire new syntax and codebase to use. What happened to simple JS?
Been working in react for 6 years, never used CRA….earlier created a custom config for React Redux using webpack, later on pretty much switched to React BoilerPlate.
Depends on your purpose. For starter and simple project just to learn React I suggest Vite or CRA. CRA starts to become bad when you have long and large project and there comes a time to upgrade. It was painful for me. Especially because dependency issues popping up over time and some part are hard to solve because CRA hold them. You can eject CRA but that leaves you on your own, even to the point where cannot upgrade CRA anymore. But overall, CRA is still a good option for small project. On the other hand, I used Vite not long ago for Sveltekit project. And damn, it is fast and pretty easy to use. Love at the first sight!
I couldn't hate create-react-app more if I tried. It's so slow, installs thousands of dependencies and makes for the worst developer experience out there. I'm glad Vite exists and I will never go back to CRA.
One of the things I liked about create-react-app was that it came with eslint installed. Is there an easy way to integrate eslint with Vite for React apps? Eslint is one of those things what I find tricky to set up but very useful.
I've never seen this guy's videos before. Does he have an industry job that requires him to ship code to production regularly, or does he just make UA-cam videos? I'm trying to get a sense of how much weight I should put into what he's saying.
"you shouldn't use CRA because it starts to become a problem as your project grows" *gives first example of alternative to use* "you won't be using this on big applications" ... i stopped watching at that point, no consistency just vague bullshit...
@@RILCOMusic I am not sure if you follow the same practise or not but wr follow a handshake. Backend and frontend we agree on the api fornat and then prepare to consume / produce at reapective ends. Some times being a front end guy I test my app using json-server and then its just the metter of last minute testing when actual implemebtqtion is done. You should give this a try reduces effort and tike for both the sides. HTH
Wow, incredible data! super interesting everything! Maybe put the links of all the pages that you visit for example vite, next, etc. Is just easier for us to scroll down while watching the videos and open the links right there. idk its my suggestion! The video is amazing and Ididnt knew anything that you said, so you've made my mind bigger in these minutes!
Personally, I can't stand CRA. It tries too hard to be everything all at once. It works great for people who are extremely new but if you've been using React for more than 2 years you're doing it wrong. Imo. On top of that the Webpack implementation of CRA is terrible, bloated and slow. We pack can be extremely fast if you don't use CRA.
It’s pretty hilarious to see all the chaos in the React ecosystem moving more towards what Angular has been for the longest time. I should just learn Angular 😂
That’s not what’s happening though, the shift in react land has been the move to full stack frameworks. Angular is still like out of the box react, purely Frontend focused, completely un opinionated about the backend.
That is what i exactly like about JavaScript frameworks that everything is open ended and i can use my own logic to begin with.. that's why i prefer Nodejs over Django or Spring boot.
I never heard an explanation of why using CRA means I am doing React wrong. Pretty bold claim. I think we all understand that any app generated from CRA needs stuff added to it before shipping it to production. I am sure it's fine for small/medium sized projects, as it has been fine for those types of apps for years until this video was made. I'm happy there newer tools coming out that may speed up the dev experience. Lastly, I've never had a problem using typescript generated by CRA. Again, I understand I will likely adjust the generated tsconfig.json file. I'm sorry to say I think videos like this one are just promoting FUD in favor of other competing tools.
Likely I've been using solidjs and loving it. Also dipped a bit into solidstart. It's buggy as hell and documentation is not good but otherwise really liking it. Can't wait for beta
Another great video and just in time for me, I'm moving from CRA to Vite, I faced several problems with Material UI that I depend on it and have my own components based on it, after a search I found that these issues are common with both of Vite and Remix, any idea or workaround to use Vite with MUI? Thanks
@@tasin5541 First Thank you for telling me that there is hope, for me, it works fine on the localhost, but once hosted I got "TypeError: u.map is not a function", I host on shared hosting on "Hostinger", after searching for a solution I knew that this is a common issue with BOX, ICONs components from the MUI, this link discusses the same problem with someone else but the suggested solutions didn't work for me. (I removed the link as UA-cam deletes my reply because of the link)
@@SmartSoftek I faced this problem once. Try deleting the node_modules folder and reinstalling the libraries again. Also stop the vite server first. Trivago/prettier-plugin-sort-imports library to always keep mui imports high in your import lists. This is my prettier config { "arrowParens": "always", "bracketSameLine": false, "bracketSpacing": true, "embeddedLanguageFormatting": "auto", "endOfLine": "crlf", "htmlWhitespaceSensitivity": "css", "importOrder": ["^[react*]", "^@mui/(.*)$", "", "^[./]"], "importOrderSeparation": true, "importOrderSortSpecifiers": true, "importOrderCaseInsensitive": true, "insertPragma": false, "jsxSingleQuote": false, "printWidth": 120, "proseWrap": "preserve", "quoteProps": "as-needed", "requirePragma": false, "semi": true, "singleQuote": true, "tabWidth": 2, "trailingComma": "es5", "useTabs": false, "vueIndentScriptAndStyle": false }
Hun, weird, 2 years ago that what every tutorial said… and i find ode that nobody told us that it was slow… and not production ready etc… Kinda sus, i mean REAL SUS, I hope nothing comes after vite and next 🤗
Is there some sort of library that transfers your code from CRA to Vite without endless copy / pasting? Because I am already pretty deep into the woods with CRA.
Hello, I am a student in data science and I would like to set up my research topic with facets for my thesis (sort of). Basically, I have data and I would like to create a site like an e-commerce site in which I return the automatic result just by making filters but no payment, just a visual of the document, author, title, etc and there I thought of react but there after following your tuto I don't know what to do. Personally I'm not too much into the world of programming. My question is the following: what do you recommend as a framework that can answer my question knowing that I want to use elastic search that I find nice and that can retrieve my data via a database.
We have a typescript react application using CRA and this makes it basically impossible to use micro frontends because it requires the module federation plugin. My question: What way would you recommend building a react app that would allow me to use module federation plugin to add micro frontends?
I hope there is a way to migrate from CRA to the alternative with minimal effort. Because dig in into a tons of components on the old project will be painful.
Tried to switch big project to vite from cra and build time increase to 10s. In dev mode all works fine, but after build, project just not started, only js errors. Also no ts error modals by default
I want to recreat my blog. I plan to post weekly there. So the content will be static, but I plan to have a lot of content in the future. Would NextJS be a Overkill? What about the CMS with Astro? WOuld Astro be better choice? Thanks!
Hi, I'm a a trainee working on my bootcamp project. We didn't use vite or react cra during the course(we didn't even use hooks). So I'm completely new to this and scared AF. Would you mind telling me if vite is suitable for beginners?
Kyle quick question if I have a create react app how do I port it to Vite or another framework? Or any of the others? Looking for a way to port things as best I can to like Next.js.
U recently posted a dynamic markdown editor on ur blog page. Is it not Dynamic ? If it is how did u build it using Gatsby or Astor for ur blog article page ?
You can’t make us stop!!!!
I'm gonna tell your mom!
@@Wanderlauch I’ll just learn nextJS while I’m grounded ¯\_(ツ)_/¯
"us" - you're alone, mate
🤣
You sre stupid if you using CRA over Vite... LoL! You will probably be fired from my company once we see react-scripts in your package.json.
Create-react-app is not too bad, but the biggest problem is that it seems development of it has completely stopped, with no commits in months and issues growing into the thousands. Probably because facebook laid off the whole team 😅
Are you just speculating, or do you have a reference for this?
It’s huge, slow, and outdated- that’s plenty of reason to stop using cra when better options out there.
Are you sure? The last commit was in September, just a few months ago.
@@knowledgenews5343 "no commits in months" you literally just proved his point
@@indiging8330😂
Yeah I just started using Vite and it feels like CRA but faster and better in just about every way, it only takes literally a few minutes to get started with it, definitely recommend.
Also I wasn't expecting it but this vid helped me solidify certain concepts such as static site generators and server side rendering. Thanks as always for putting out informative content that's also easy to understand. :)
nice, just fill your company with a billion different frameworks and tools that will probably be obsolete in less than an year (as history shows us) and make your projects basically impossible to maintain as almost no one knows how to use these things that were used to solve problems that usually don't exist
For real, oh now my react app builds 500ms quicker than before, I saved so much time! This is why the javascript ecosystem is a dumpster fire.
Next.js existed for few years already. I got to know about it few years ago, but it has already existed for a long time back then. Gatsby is pretty old too. These two will probably be the last to disappear, and probably not sooner than when React itself does. And then you can finally return back to our most beloved PHP, which would have existed for 30-40 years by then.
@@virtual5754 next JS cannot be used for every type of app. It performs doggshit when you have a complex app
I recently switched from CRA to Vite, and oh my dear Dante it's so much faster and smoother! I even posted about it on Facebook even though 90% of my friends aren't devs and have no idea what it means, just because I loved it so much as soon as I used it. I've even started using Vite for vanilla TS projects, because setting up a TS pipeline manually is a pain.
Agree! I'm a WordPress dev and I've started using Vite as the build tool for my themes and plugins. It's great.
Do you still use Facebook? Could've posted on LinkedIn and it's doable to have connections with most devs there.
@@nettojms5083 I do. It's how I keep in touch with most of my friends. I think of LinkedIn as a resume and job search site, not really as a social media site.
What's TS?
@@carldrogo9492 i think he means TypeScript
I've used Gatsby for a simple marketing site and hated it (sending my form with GQL was a pain in the ass).
Right now I'm learning Remix for a job interview and I'm pretty impressed so far :)
From my limited knowledge, using GraphQL for something like that is quite overkill to be honest.
Any details from learning Remix that I can know of? Would love to hear more from you
@@phucnguyen0110 Yeah... it was to send data to a homemade newsletter API.
As for Remix, the official docs is pretty nice, there's 2 tutorials that cover the basics pretty well, I think. :)
Take care, Phúc!
Me: Literally following documentation
UA-cam: You're doing it wrong
This video should not be taken as gospel...
The frameworks bubble is blowing up. People will have to actually learn web development. xD
Documentation is written by devs, UA-cam videos are from influencers.
I'm currently in the middle of converting my e-commerce site from NextJS to Astro and SolidJS and it is INSANE how much less JavaScript it uses.
But Next 13!
Hi, what you use in backend?
I use Laravel/PHP for backend API and then ReactJS/Astro for frontend, depending on what’s required. I am still using Linux server boxes for hosting with Apache/MySQL. Laravel fits in perfectly well. Easy to set up a local dev environment with docker.
I have always used Laravel for quick back-ends, very solid software with some nice design patterns. I would however not use it if you are using Astro. If you are using Astro you are probably trying to build an optimised website and a PHP backend will be such a bottleneck, that any speed improvements from Astro will be diminished.
@@jasperams Thanks Jasper. Bit more info: Astro is for marketing/static site frontends due to SEO benefits compared with React/Vue/Svelte/other SPA. There are usually some Laravel-served api endpoints that are helpful for pulling in blog post data at build time. Laravel/PHP is primarily for backend client portal and api endpoints specifically for client/admin login pages. For management sakes, I prefer to keep separate repos for different aspects of a business site. Are you using NextJS for everything? How do you set things up?
It's a shame testing rarely gets any mention on this otherwise fantastic channel. Configuring Jest can often be tricky in Node/front end, and while I enjoyed the speed boost from using Vite to build my React app, I struggled to configure Jest and Istanbul to work properly. I actually ended up scrapping the Vite and going back to the older way of setting up my app, which is Babel + Webpack. Slower, but now my unit + integration tests at least run. And testing works out of the box with create-react-app, too.
Honestly, Vite makes things so much more complicated but it's only saving grace is that it's faster
i'm kinda new to all this but isn't Vitest better for Vite?
@@disruptive_innovator Vitest is basically Jest for Vite.
Vitest.
i've built a couple apps with the T3 stack and it's been fun learning tRPC, works great with nextjs and prisma
What the heck is a T3 stack? Have seen it floating around.
@@neneodonkor an amazing fullstack framework built on top of nextjs with full typesafety.
They just cam out with a docs and the newest tRPC integrated. I am moving to that next after I finish what I am building now
T3 is one of the better stacks rn. It has type safety from frontend to backend. Auth and the database are 95% ready after creating the boilerplate. You only need the private keys to have it fully working.
And ofcourse tailwind
You'll never see Kyle covering the t3 stack cause he has beef with Theo. I'm still waiting for the day these two shake hands and call truce
Nice overview. I would like to supplement the "take nextjs further" part by stating: redwood and blitz upgrades your stack to a full stack monolith app. Where as Remix is an alternative to Next with a different approach to ssr
Maybe just use angular instead? Seems google has kept things up to date better than react at this point?
I personally love the ease-of-use for vite. It's really nice.
Also, Svelte seems really nice. Do you have any plans on making a Svelte video? Maybe a tutorial like your react notes app (loved it btw) but for Svelte?
I hope he does. Most of Svelte tutorials are kinda outdated so it would be really nice
@@seyseyseysey Hah, I can't even find a tutorial, let alone an outdated one.
@@kgaming7599 this is the issue that made me not want to learn svelte, I figured vue has the best of both worlds. the availability of tutorials & jobs, the easiness of use of the framework, and the availability of extensions and dev tools and plugins etc (aka the ecosystem) and how vast it is with the growing community
@@brhh Yeah, makes sense. Svelte seems really powerful though. You should give it a chance! ;)
@@kgaming7599 Svelte has really awesome documentation and lots and lots of examples and tutorial content on their site.
I still think it's still a good exercise to try and manually piece all the components together to get an understanding on how everything works at a lower level. Once you have a good understanding then certainly use a higher level framework.
@@internet4543 yup or in the context if using a meta framework eg next,astro but the same concepts apply
If you have the time, that is
Its really detrimental to release videos like these every few weeks when people are simply just trying to get a handle on what things are going to help them get a secure job in the field.
CRA is still totally viable to use.
Yeah we should wait at least 6 months before we release videos about the current landscape
0:52 What's the rationale behind the statement that typescript is a pain with CRA? Haven't felt any pain specifically using ts + CRA personally!
Was wondering as well...
But, no matter. This is just one person's opinion...
Also, most youtube creators feel they're under pressure to appear to know about all of the latest trends and this week's js framework.
This can sometimes steer people in the wrong direction.
UA-cam devs likes to throw out ultimatums, I guess to trigger more comments.
I wouldn't take this too seriousely. Afterall, we need to make our own decisions on what fits best for what we do.
Whenever youtube says "don't do xxx", I would approach with caution...
I left a similar comment before seeing yours. I’ve both started TS CRA projects from scratch using -template typescript, and I’ve added TS to existing CRA apps, I believe with the simple act of adding a tsconfig file to the project and that’s it.
I genuinely can’t imagine how it could possibly be any easier to get TS support than that.
Ok, I definitely prefer Next.js over CRA... BUT... the constantly changing landscape of the React ecosystem is absolutely insane. Decision fatigue, learning curves, and lack of standardization across the industry is exhausting and confusing.
Maybe because you invent constantly more and more new tools and frameworks instead of sticking to one well working one? It is community problem, which is a huge problem in frontend. People over and over bring new shiny toys, instead focusing on creation of reliable and long term sustainable apps build on one thing.
That's webdev though. Not just react. More stability in server side or thick client. But web dev is constantly crazy. I'd say it's honestly more stable these days than it was 10 years ago
and youd be wrong about that. More stable was having 5 languages to worry about, today there are literally countless codebases you can work in now and almost none of them are different enough to matter.
Kyle, you may wanna present each of them in detail. I'm curious what Gatsby uses instead of DOM. Are those that use jQuery too slow? How compatible are they if I add Redux, Jest, AntD?
Can you add the less popular alternatives and talk about them too? Have you tried UMI?
The comment section here really caught my attention. Surprisingly lots of useful info from everyone.
I mean I think Gatsby is mostly made for ssr so no redux here it's mostly just static pages rendered on the server
Though astro is in a bit more of a gray area
As someone who has been around in the web dev space since the end of the 90s, I find it interesting that we went from "generate everything on the server" (PHP, ASP) to "it's too slow, generate everything on the client" (React) to "it's too slow, generate most things on the server" (Next.js). Conveniently the push back to the server appears to line up perfectly with the rise of cloud services that charge for server resources 🤣. As usual, think for yourself and don't chase the latest trend without fully understanding the ins and outs.
' "it's too slow, generate everything on the client" (React) '
👆 this is kinda false. you're talking about single-page-applications in general and the reason for them was because server-side-rendering doesn't account for user interactions (unless you literally refresh on every click, very wasteful) and also tools like next.js will do SSR as well as load an SPA which then takes over the rendered page for near-instant navigation.
also, SSR might actually drop in popularity again in the future if web bundles (server responds with document + assets to initial request) turn out great because then SSR won't have as big of an advantage as it does right now.
that being said, it's true that SSR was overly neglected when it's a very important and stable approach to delivering content. the big issue in the past was mostly that there was no good way of using the same templates for SSR and for the frontend. trying to make a modern web app when you're using something like Thymeleaf or Blade on the backend is a nightmare.
@@FunctionGermany JS was working totally fine for rich interactions before SPAs. That being said I like SPAs for apps (not websites) because they don't involve a server. The CPU power of all clients together will be vastly more than any server and not cost me a dime in hosting. This is huge. I feel like SSR is pushed for ANY situation to obviously increase cloud spending (the pockets of Vercel). Too many devs use Next for apps when SPA was the better choice. I still use Next for public websites.
I think your video is aimed at hobby developers. CRA is completly fine for huge projects. It is one of the most stable and reliable toolset.
I personally started with React and NextJS after years of custom building HTML/CSS and PHP OOP and I am really in love with NextJS and Typescript. P.s. great video I watch a lot of your content and you bring real value to the developer community. Thanks mate ✌
Why use TypeScript?
For small projects and static sites, esbuild is a good choice. It is extremely fast. Only downside for me was lack of hot reload.
vite uses esbuild
Vite uses esbuild and it has hot reload
How…is using TypeScript a pain in CRA? There is a typescript template you can use when creating a new project if you want, but adding it to an existing CRA is as simple as adding a tsconfig file and just….starting to use TS.
I have been using Nextjs for quite a while now on multiple projects and its really good.
You can use next js in almost every project. You can opt for ssg and csr based on the route. Though guarding route will lead to additional steps but it's going to be a fun in next 13 once it's stable...
For a newbie like me CRA is an absolute go to
Learn the basics then switch to nextjs as soon as possible
@@CH-tv1cy i do have plan on learning NextJS soon, once I atleast build a functional app with react
I don’t like being forced into a frame work. There are always situations in the real world where you end up fighting the framework. And you end up with awful performance or terrible code. It’s like a totalitarian government that feels you what and how to do. Eventually it rubs against the people and they’ll rise up and get frustrated and the wheels come off. Openness and freedom (also to make mistakes) ultimately prevails. This is why the non-tightly packed framework language products are still there and being used and have a far longer software lifetime.
CRA with TS is a pain? What? Why?
I'm with you, it's better to keep away CRA for new applications. But I still haven't seen a minute of video, and I see that CRA is not as bad as you say...
RIP create-react-app
I still don’t understand what’s so bad about CRA even after watching this.
Astro is fullstack as well now much like nextjs/remix/etc, it has ssr, api routes, edge function support, etc
Not a single word of parcel. It's as fast, if not faster, as vite and you don't need to configure anything if you don't want to. The plugin ecosystem is bigger and feels now grown up.
I used to use Parcel all the time but kinda transitioned to just using Vite now
Astro > Gatsby for one main reason- you can use the regular DOM, which means all those fun tutorials and student projects and documentation you may find online are much more likely to be in vanilla JS or Jquery. You can still find tons of React Docs, but I find due to being more general purpose, there's a bigger pool of code that you don't have to refactor if you stick to using the regular DOM vs virtual DOM.
Then why are you watching a react video? Your comment should be: vanilla js dom manipulation > react
i’m about halfway into the video so idk if you mention this later, but Astro is capable of both SSR and SSG- and the SSR features it has are actually really ahead of the game. I use Next 13 and Astro both very frequently, and I think both the Next and Astro teams are doing great, but I think Astro has the best SSR of basically any full stack framework. Next could probably beat it in the world of react, but for anything else Astro is amazing. I love using it with Svelte, also the create Astro CLI is probably the best CLI experience i’ve gotten from a create experience. If you haven’t tried Astro for SSR you’re seriously missing out
Just note Astro is MPA. Not SPA like normal React app would be.
That being said Astro has been a lot of fun to use. Simple and powerful and I’m a Fred fan.
I'm a longtime WordPress dev and I've been hearing about Astro as a frontend framework for a WP backend. I'm curious if React is less capable inside Astro...I read (and probably misunderstood) that it's not possible to pass event handlers between components for a truly dynamic experience. Can you use context providers, routing and other features? I'd appreciate any enlightenment. What are the limitations of React in Astro?
@@ontheruntonowhere Yeah so the number one issue with Astro is exactly this. Because it uses "partial hydration" things like context providers won't really work. Now you can get the exact same effect through what Astro calls "nanostores" they're basically just Svelte stores, but those allow you to share context in a partially hydrated environment because the nanostores live outside of the DOM nodes. They're actually really nice to work with IMO. The reason why this is a problem is because it can make portling legacy code a real pain because you'd basically have to recode a lot of the UI logic for sharing state between components. I guess the good news would be that this rewrite would allow for faster compilation and runtimes, but IMO it wouldn't be worth it to rewrite considering all the existing support for WordPress, unless u really really wanted to do it.
That's why I prefer using a fine-grain reactive framework like Svelte with Astro because the two pair really nicely together because they were both built to support similar design patterns.
This docs page is really helpful if you want to learn more about this: docs.astro.build/en/core-concepts/sharing-state/
TLDR: There aren't any limitations on React in Astro, but using React in Astro could require some rewrites to the React code where state-sharing logic is defined.
@@MerkieAE Thanks for this explanation, very helpful. I'm not going to be rewriting anything (at least not yet) but the WP sites I build are generally more complex than a blog or marketing site. I typically interact with the backend a fair bit and I was imagining the React islands in my pages as fully-functional standalone apps. Now I guess I have to learn Svelte, something I've been consciously avoiding until I get used to React's concepts and methodology.
have been watching your content for a while but just realized missed to subscribe. As a self tought and still learning codder, your content have been short and to the point and was a great help so far. Mach Thank you.
Great video. I have been really enjoying Remix lately.
Moving forward use a high pass filter in an equalizer to clear muffly frequencies in your vocals. The bass in your voice is hard to ignore. Tip for a tip
I tried switching my production build to Vite but run into a problem with code splitting. Turns out that the esbuild doesn't really respect the import order, and I had parts of a library undefined, because they were reexported before they had a chance to be imported.
If u relay on shopify support, well you will be really disappointed. Shopify has bad documentation, their development tools are like toys, they simply suck. Also why the hell they bought remix? It's open source...
As a Canadian resident the thumbnail really excited me for a minute
The bigger problem with CRA is slow development cycle. They push features at an incredibly slow cycle which makes the tooling outdated compared to other stuff available in the community.
@@internet4543I was taking about CRA, edited my comment
Vite is so awesome. Spinning up a react app in seconds is so cool. CRA takes wayyyy too long.
Stop telling people to stop doing thngs
I wish my life was as well put together as this guys hair
As a frontend new developer, it's really hard for me to work..when I got confidence using some frontend technology, in few days other is coming. Does everybody feels the same?
I just said this in a dozen comments here too, its totally unfair to spend time learning something because "youtube" said to and then a week later we are told that same thing "is not good anymore" and now have to spend another week learning a different language? HOW do we expect to get any work done like this?
Just recently suggesting to move from cra to vite and my senior happy with it, once i'm using vite i feel cra is so slow although configuring eslint on vite is a bit difficult
I feel like I'm the only person who prefers using Deno with vanilla JS and a basic template engine. My web apps run fine 🤷♂
Web dev is an absolute goof show now with 100+ "frameworks" and its all dumb BS that makes like ONE thing slightly more easier to use but you have to learn an entire new syntax and codebase to use. What happened to simple JS?
For a while, this subject is something I've been looking around for. Thanks for putting this out.
Vite and Vitest are amazing and simple to setups. I like the Dev experience with these tools.
Is Vitest better than jest?
Hi Kyle! Thanks for the update and stay blessed
Been working in react for 6 years, never used CRA….earlier created a custom config for React Redux using webpack, later on pretty much switched to React BoilerPlate.
so what should i do to create a new react project? i am new to React-JS, please guide me, thank you very much.
Depends on your purpose. For starter and simple project just to learn React I suggest Vite or CRA.
CRA starts to become bad when you have long and large project and there comes a time to upgrade. It was painful for me. Especially because dependency issues popping up over time and some part are hard to solve because CRA hold them. You can eject CRA but that leaves you on your own, even to the point where cannot upgrade CRA anymore. But overall, CRA is still a good option for small project.
On the other hand, I used Vite not long ago for Sveltekit project. And damn, it is fast and pretty easy to use. Love at the first sight!
These are great suggestions. I've been using CRA for too long. Time to switch.
I couldn't hate create-react-app more if I tried. It's so slow, installs thousands of dependencies and makes for the worst developer experience out there. I'm glad Vite exists and I will never go back to CRA.
Congrats on the new home! I mean I think 🤔. Your setup reminds me of a "just moved in" feel. Still filling the home up kind of thing.
Kyle: "Create-react-app is bad"
Also Kyle: *uses it in almost every React vid*
Used
One of the things I liked about create-react-app was that it came with eslint installed. Is there an easy way to integrate eslint with Vite for React apps? Eslint is one of those things what I find tricky to set up but very useful.
I've never seen this guy's videos before. Does he have an industry job that requires him to ship code to production regularly, or does he just make UA-cam videos? I'm trying to get a sense of how much weight I should put into what he's saying.
its hard to tell with him honestly, I feel like his videos present conflicting info often.
"you shouldn't use CRA because it starts to become a problem as your project grows"
*gives first example of alternative to use*
"you won't be using this on big applications"
... i stopped watching at that point, no consistency just vague bullshit...
I like watching front end content but thank God I'm a c# dev, front end is becoming too complex and there is too much to choose from.
its just the mindset you have to change..... its not too complicated once you get used to it.
@@gnumanoj no dude, its absolutely too complicated. There were like 6 new frontend APIs released just this week. Its nauseating.
@@RILCOMusic I am not sure if you follow the same practise or not but wr follow a handshake.
Backend and frontend we agree on the api fornat and then prepare to consume / produce at reapective ends.
Some times being a front end guy I test my app using json-server and then its just the metter of last minute testing when actual implemebtqtion is done.
You should give this a try reduces effort and tike for both the sides.
HTH
Wow, incredible data! super interesting everything! Maybe put the links of all the pages that you visit for example vite, next, etc. Is just easier for us to scroll down while watching the videos and open the links right there. idk its my suggestion! The video is amazing and Ididnt knew anything that you said, so you've made my mind bigger in these minutes!
Personally, I can't stand CRA. It tries too hard to be everything all at once. It works great for people who are extremely new but if you've been using React for more than 2 years you're doing it wrong. Imo.
On top of that the Webpack implementation of CRA is terrible, bloated and slow. We pack can be extremely fast if you don't use CRA.
It’s pretty hilarious to see all the chaos in the React ecosystem moving more towards what Angular has been for the longest time. I should just learn Angular 😂
That’s not what’s happening though, the shift in react land has been the move to full stack frameworks. Angular is still like out of the box react, purely Frontend focused, completely un opinionated about the backend.
That is what i exactly like about JavaScript frameworks that everything is open ended and i can use my own logic to begin with.. that's why i prefer Nodejs over Django or Spring boot.
Hello Kyle, it's false in 2:17 now you have ssr support in the cli tool of vite it's not like nextjs or remix but now we can do that
i use vite + react for production project and is Amazing, both DX experience and user Experience
I think I hate being a web developer...
Where is my consistency😭
Assembly why did you leave us??
I really like nextJs but the market only asks for CRA
Hey Kyle! Great video once again, very informative abd useful. Thanks a tonne ✌🏻🥂
I never heard an explanation of why using CRA means I am doing React wrong. Pretty bold claim. I think we all understand that any app generated from CRA needs stuff added to it before shipping it to production. I am sure it's fine for small/medium sized projects, as it has been fine for those types of apps for years until this video was made. I'm happy there newer tools coming out that may speed up the dev experience. Lastly, I've never had a problem using typescript generated by CRA. Again, I understand I will likely adjust the generated tsconfig.json file. I'm sorry to say I think videos like this one are just promoting FUD in favor of other competing tools.
Likely I've been using solidjs and loving it. Also dipped a bit into solidstart. It's buggy as hell and documentation is not good but otherwise really liking it. Can't wait for beta
Another great video and just in time for me, I'm moving from CRA to Vite, I faced several problems with Material UI that I depend on it and have my own components based on it, after a search I found that these issues are common with both of Vite and Remix, any idea or workaround to use Vite with MUI? Thanks
What problems are you facing with vite and MUI? I'm working on several enterprise projects that use vite and MUI.
@@tasin5541 First Thank you for telling me that there is hope, for me, it works fine on the localhost, but once hosted I got "TypeError: u.map is not a function", I host on shared hosting on "Hostinger", after searching for a solution I knew that this is a common issue with BOX, ICONs components from the MUI, this link discusses the same problem with someone else but the suggested solutions didn't work for me. (I removed the link as UA-cam deletes my reply because of the link)
@@SmartSoftek you can share the link by putting a space before the dots (.)
@@tasin5541 Looks like UA-cam AI is so smart, please add /mui/material-ui/issues/31835 after GitHub main url
@@SmartSoftek I faced this problem once. Try deleting the node_modules folder and reinstalling the libraries again. Also stop the vite server first. Trivago/prettier-plugin-sort-imports library to always keep mui imports high in your import lists.
This is my prettier config
{
"arrowParens": "always",
"bracketSameLine": false,
"bracketSpacing": true,
"embeddedLanguageFormatting": "auto",
"endOfLine": "crlf",
"htmlWhitespaceSensitivity": "css",
"importOrder": ["^[react*]", "^@mui/(.*)$", "", "^[./]"],
"importOrderSeparation": true,
"importOrderSortSpecifiers": true,
"importOrderCaseInsensitive": true,
"insertPragma": false,
"jsxSingleQuote": false,
"printWidth": 120,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false,
"vueIndentScriptAndStyle": false
}
As always, everything in two words. Awesome.
Hun, weird, 2 years ago that what every tutorial said… and i find ode that nobody told us that it was slow… and not production ready etc…
Kinda sus, i mean REAL SUS,
I hope nothing comes after vite and next 🤗
That's all well and good, but when are we gonna get some guitar tutorials featuring the background Jackson? Give it a high z-index already!
I am boring that "Stop using bla bla" I never read article and watch videos like that. You can say "Better alternative of CRA"
Is there some sort of library that transfers your code from CRA to Vite without endless copy / pasting? Because I am already pretty deep into the woods with CRA.
I recently realized this. Thanks for instilling it again. I use vite
Hello, I am a student in data science and I would like to set up my research topic with facets for my thesis (sort of). Basically, I have data and I would like to create a site like an e-commerce site in which I return the automatic result just by making filters but no payment, just a visual of the document, author, title, etc and there I thought of react but there after following your tuto I don't know what to do. Personally I'm not too much into the world of programming. My question is the following: what do you recommend as a framework that can answer my question knowing that I want to use elastic search that I find nice and that can retrieve my data via a database.
Thank you for your interesting video. Useful insight before I start creating more web dev content ☺
We have a typescript react application using CRA and this makes it basically impossible to use micro frontends because it requires the module federation plugin. My question: What way would you recommend building a react app that would allow me to use module federation plugin to add micro frontends?
What would be the recommendation if I want to build a next js app, but only want static sites? Should I use Astro instead?
Totally agree, even just importing and using react on your own is even better than CRA
lol ok
Which backend language is best suitable for Reactjs?
NodeJs or Java?
doesn't matter
x86 assembly 😄
Doesn't matter, but .NET 7 is the simplest and fastest. You can even use .NET to create web and native apps.
Both.
if you know java go for java.
else don't waste your time. stay on node express. Learn Nextjs. All the best.
NextJS is super awesome I really do like it a lot. Super fast and easy to work with :)
API part is sooooo convenient..... everything in one place :)
I hope there is a way to migrate from CRA to the alternative with minimal effort. Because dig in into a tons of components on the old project will be painful.
Very easy to switch to vite. I switched just 2 weeks back
Always hated it. Can't add any babel plugins like pipelines without ejecting, which makes team members get all bent out of shape
Tried to switch big project to vite from cra and build time increase to 10s. In dev mode all works fine, but after build, project just not started, only js errors. Also no ts error modals by default
is next js easy to learn as a decent-good react developer ?
yeah, they have a pretty good tutorial on their site, you can get into it in a couple of days
@@Andres-it2du thanks buddy!
I want to recreat my blog. I plan to post weekly there. So the content will be static, but I plan to have a lot of content in the future.
Would NextJS be a Overkill? What about the CMS with Astro? WOuld Astro be better choice? Thanks!
Hi, Can you suggest me, flutter, i am confused react or flutter? I want to learn flutter. Flutter is best or react in these days?
Hi, I'm a a trainee working on my bootcamp project. We didn't use vite or react cra during the course(we didn't even use hooks). So I'm completely new to this and scared AF. Would you mind telling me if vite is suitable for beginners?
How often do you have to use CRA? Is the creation of X new tools on top of it worh it?
Kyle quick question if I have a create react app how do I port it to Vite or another framework? Or any of the others? Looking for a way to port things as best I can to like Next.js.
how do you know what somebody need? thank you
I'm sold, now how to migrate a moderate sized react SPA to vite is the question.
Also in Next Js , You can do ssg with ISR !!
hi bro, can we setup an activation license key for react app , if yes how? thank you
Been wanting to dive into next.js for a while. I think this is the sign
id love to use Vite but it doesnt work in Docker containers... still forced to use CRA until their bugs are worked out
U recently posted a dynamic markdown editor on ur blog page. Is it not Dynamic ? If it is how did u build it using Gatsby or Astor for ur blog article page ?