Create React App has proved to be absolute hell on every project I've used it on. As I remind everyone who will listen - magic is usually not free it comes at a cost. Same with tools that turn your database into an API and so on.
I am a student dev that started learning React right when the pandemic started. I was being taught the methods of using class components before hooks were ever a thing and midway of learning I was expected to create projects with old code that was no longer maintained. Because of this I had to teach myself and found myself relying on CRA. Teaching myself hooks since the program that I went into didn't know anything about them yet made me abandon learning to code while I worked on other parts on my life, but recently I have been pushing myself to finish out the program, and honestly these videos help me a lot. Thanks for putting so much effort into the community, and I hope to catch some of your live streams :)
Dont use CRA just do: create empty project folder npm init -y install react, react-dom, typescript (optional) install bundler (vite or webpack) adjust bundler config - possible extensions for react like hot reload - vite has easy configuration setup - this is where u also add some utility extensions like obfuscator (optional) add eslint and tsconfig (optional) add testing libraries if ur into tdd create entry file (index.tsx) thats it for SPA
TBH this feels like asking every driver to be able to fix a broken engine. I don't want to spend weeks on end learning all this stuff, I want to type a single command that will make a React app that works so that I can start programming. I know there is a cost to be payed, but saying "Just do everything" manually isn't a great answer IMO. Maybe a boilerplate starter React app repo that can be cloned would be better?
@@karelhrkal8753 yes it is nice to just type once. thats why i investigated what is the simplest react setup and this is what i come up with. i created a lightweight cli library for managing monorepo setup like NX. this is one of the templates i made. now when i want to create a new react or any nodejs project. i just need 2 commands, generating the monorepo structure and generating this react template. then i can go on from there, generate express template... and so on and so on. so i can put them all in one codebase. i really dont like using other boilerplate without knowing what is happening under the hood. cause it feels like im missing something.
@@deamorta6117 I agree that you should at least have an understanding about what is happening, just like a car driver should know that the expanding gas explosion in the engine is what is moving the car, even thought it is not strictly necessary to drive the car. However, since you are making your templates, you are in the "making my own engine just so I can drive a car" land, which you simply can't expect from every developer.
Thank you for this. I'm a (mostly) back-end C# dev who just got a requirement to add a front-end to a service and my only real "modern" front-end work has been with Angular. This was extremely helpful for someone who hasn't really worked with React, aside from random bug fixes to existing legacy/older React codebases.
Hey! You are a back end C# dev? If you or anyone have time for a project, please reach out to my contact info on my profile! Comment section always clutch 😆
Great video! Not a professional frontend dev so I'm probably in that group of people who are more likely to use something like CRA just to get started quick on a side project. Going over the history of the problems + listing solutions in 1 video was really helpful for me
As someone who started using NextJS relatively recently, I feel like the docs were pretty clear about what is on the server vs client. getStaticProps, getServerSideProps, etc, were made clear to be buckets that won't be included in the client build which is great.
Sorry if I didn't catch it, but I think you missed the secret 5th option: learn the tooling and do your own thing for maximum flexibility. Only time I've used CRA was to eject a test project and learn from the webpack and other configs. Have avoided it otherwise cause of how opinionated it was. It sounds like a great example of the law of leaky abstractions. Thanks for the exposure to these other options though, great video!
Create-react-app is one of my favorite commands, but as usual as a developer, if there's anything we can improve, we need to know, right? So thanks Theo ✌🏻
Been lurking your channel for past couple of weeks. Just commenting to say thanks for doing all of this, FOR FREE. Incredible information, looking forward for more vids like this!
I am a student and in the course i own on react, it is focused on specifically using cra all the time and it was nice and cosy at first but every thing was too bloomy so i decided to eject to actually read the scripts cra generates for me and i was shocked at how many things i learnt more and how many thing were just an unnecessary dep(not necessary to me for you it may be different) so i went ahead and implemented some of that in my projects and i think it was a good learning experience for understanding how webpack works with different configurations and ways to configure it.
I'm glad it wasn't just me thinking this. It's hard to know when you work on your own. When I look at frontend code and see node modules I've been thinking, "WTF is this doing here?!"
Really loved this video, it felt like a conference presentation just so much better and much more educational. This inspired me go through the entirety your yt channel. Would love to see more of such content.
Personally I have avoided CRA ever since I realized what ejecting did. But, imo, a decent official template is an important thing to have. It is the template that newer devs will use and expect it to be an example of "the correct way" of doing things. It can be daunting for newbies if instead they are told to use a framework or set up tooling themselves.
in my experience, a tool like cra is the absolute worst experience for a noobie, since i have zero idea what's going on also, parcel is really nice and supports react and more out of the box, painfully easy to use
@@alext5497 at some point the scripts can get pretty advanced with really large webpack-configs (if you use webpack). And not having to worry about how to get code-splitting, hot-reloading, fast build times etc is really great. Thats why I started with CRA, and still continue to use other tools like next and remix.
@@ed_iz_ed Of course you have no idea what's going on. You're a newbie. You're not supposed to know what's going on. That's literally how learning works.
A. This video is phenominal, it was a really good breakdown of this subject B. Using remix for about a month now, and honestly happier with it than any NextJS thing I've ever worked on. It's a bit more opinionated than NextJS, but IMO Better docs, and the nested routing and the loading strategy that comes with it actually feel incredible to me. It does feel less mature than NextJS, it also looks like Next will be adding a nested routes feature soon, super curious about how that will go.
I've been using Remix for the last few of months and I agree with everything above. I'd also add that actions are great. With them forms are much simpler in Remix than in my experience with both Next and CRA apps.
Lol, there's a new best thing every month. It's a waste of time learning anything until the industry decides to massively adapt a technology like they did with React.
@@tijldeclerck7772 funny thing with Remix is it’s actually modernizing the oldest ways of getting data from and sending data to a web server. So while I generally agree with your “new thing of the month” sentiment, Remix is, in a way, the “old thing of months past”
My phone must of heard me talking about using Vite to replace CRA for a SPA application because this was the first thing that popped up in my feed when I got off work today...
Oh god am I thankful that when I joined the JS front-end world, I caught the early NextJS bandwagon early on and never had to use CRA other than my side projects
Hello Theo, Why did you say you don’t recommend MaterialUI? Is it because the implementation of the libraries are bad or you don’t think a UI kit library helps you much? I’m really curious
I am happy using c-r-a thus far, when the time comes to use something else, then I'll revisit your video. But so far it works, not everybody needs to be on the latest, greatest, shiniest, trendiest tool out there.
Can you change video's name to "CREATE-REACT-APP" instead of "CREATE REACT APP"? Just for junior/new developer in many countries understands the same thing.
Saw your vid and migrated 4 React projects from CRA to Vite. I'm totally happy with the decision (SSR isn't relevant here) so thank you very much for pointing out.
As someone who is just getting back into web dev after 10 years or so, it's pretty funny to hear someone gush about server-side rendering. How the pendulum swings.
I fucking love your channel, no bullshit tutorials, no 5 minutę guides. Just real, raw talk and a lot of practical information. LOVE your work keep it up
I used this to explain developer opinions to my grandparents. They’re elementary school teachers from the 60s and they could follow this argument. That’s how common sense this.
I'm going to be guiding some interns at my company as they are starting with react and this video really helped me a lot. When I was an intern we used cra and it would seem to me that using cra now is gonna be fine as well since it's recommended and stuff but after trying it now i saw how MUCH it became basically... Thank you very much for the video haha. Would love to listen about the material ui as well
But the auto polyfilling for Node standard library modules was done by Webpack, not CRA. I have never used CRA so it may have done extra, I don't know. I believe Webpack 5 changed the way it automatically included polyfills.
I've been using CRA for months now and every month I noticed problems on my project, didn't know this was the reason why. Such an eye opener. I am tempted to migrate to NextJs or vite, but our group had already started using React on our capstone project which is due in 4 months so I guess I'm stuck with that.
My guy, you can just strap in Vite without touching your code base. Figuring it out will take you like... A whole day or two or less if you focus hard enough but will save you A LOT OF FREAKING TIME. Like our professional code base before on CRA was 3 mins for saving 1 file. But then when I configured it to run with vite, 1sec or less then build time from 15 mins to 5 or 6. Like do it my guy. It would save you a lot of time.
I need elaboration on the comment, which was under Vite use cases: Owning your build could be potentially valuable(electron). Is value in reference to financial incentive? If so why do the other builds options effect value.
Create React App was always bad. Except for its original purpose, which was letting people quickly try out React without having to learn a ton of webpack configuration first.
This is the most informative, down to Earth, and digestible comparison I have ever seen. You're also hysterical. Subscribed and turned on notifications. Thanks!
Real talk though, what do you use instead? Just put your react app together from scratch? I’m relatively new, taking one of the most popular react courses and CRA is just a given, assumed to be used from the beginning. I see that he’s doing some kind of alternative with nextJS, but it doesn’t seem very maintainable. Also, love this format. Very listenable, a lot of information without having to watch everything he does.
Why be so arrogant, man? Your content is good, no need to be like this :/ CRA had its moment and was a great step to keep the React community growing! I used it a lot, it was very valuable to me at the time because we had to copy all of those endless webpack configs. No need to shame it with comments like “use it if you are underpaid”, that’s so disrespectful, specially because it made easier for a lot of React beginners to experiment with it.
Interesting points. The question is what is your suggestion to use. If I want a react SPA and don't care or want SSR, and don't want to build custom tooling. I.e. environment variables, autoprfizer as an example
@@t3dotgg Vite, Could be that replacement, but it's not quite there yet for use in a corporate environment for a project that needs to be stable for years and developers will be onboarding. The CRA Documentation is much better and its stable. Your points are valid, but from experience in corporate projects Vite is not there yet as a replacement.
One of the main reasons you see this issue in a lot of crypto apps, is one of the main wallet providers(WalletConnect) injects polyfills. There are long-awaited pending updates on it. This package has always been intended for front-end use, just poorly designed. Likely due to early CRA supporting this behavior.
Well its 2023 and NextJs will automatically poly-fill crypto-browsify as the fallback for the node crypto. So is this really a problem with CRA or a problem with the JS community as a whole.
At work we are part of a platform team that all use an internal shared lib. Started a new project that needed to use that lib. At first I was happily using parcel. But the shared lib required a specific project setup from a template that is using Craco. Really not looking forward to the day when it needs upgrading or the thing falls apart. Here's to hoping for the best!
Very nice video I’m a beginner in web dev and even if your topics are quiet advance for me I really like how you focus on the different topics I’m learning so much. This one interest me a lot as I’m starting with nextjs. Very nice job thank you for your dedicated work.
Problem with vite is many many many react packages are super coupled with webpack / babel and becomes really quickly a nightmare to make them all work with vite.
Interesting - would like to hear more about the packages you experienced issues with. I shipped a react app built w/ Vite for a year+ with maybe a single issue in Rollup 🤔
@@t3dotgg - react-intl goes nuts in TS mode, because the babel plugin get called at the wrong time and accesses the untranspiled sources. Need to write a plugin for it (fortunately not too complicated) and install shitload of babel dependencies. And it still kind of doesn't work because (if i remember well) when the plugin is called AFTER transpilation, the JSX is not what it's supposed to be with webpack + babel so components can't be found for parsing. Because of that, all the translations have to be "pre-declared" outside components and then fed to the translation components (pre-declared translations are parsed correctly because they're out of JSX). - relay has the same kind of weird problems because it relies heavily on babel. Don't remember the very specifics, just that it took a super long time to make it work and it's not 100% perfect. - build / dev is really not the same. Packages that work in dev may break at build time and vice versa. You finally fixed your build, you restart the dev server and now dev is broken (but build is working). This mostly happens when you deal with a package that's been written / compiled / tested exclusively with webpack in CRA mode. Obviously vite is right here, not CRA, but when you're in enterprise mode, and can't spend 1 month on a problem, facing this shit is a huge kick in your teeth makes you want to rollback to CRA because "it works". :) You can try to use react-markdown (the remarkjs version) if you want. Don't know if they fixed their stuff in version 8, when i tried, they were at version 7 and i had to use version 5 to make it compile both in dev / build. Or sometimes, even better, they work in dev, you build, the build compiles but when you execute the build, you get tons of errors with missing polyfills. Just FYI, im not a frontend dev but backend, and not js but ruby. I love react, I love JS but they're not my specialty and my frontend devs are quite junior. So from my point of view, vite makes my life harder than CRA. I know that technically, they don't compare though. I'm checking your vidz to get rid of CRA + f craco, but in a way that i can handle economically speaking ;). Also, the experience im describing here is from 1y ago, so maybe things got better since.
I really enjoyed this, but would have loved some info on why one should not use GraphQL over databases. The reason for asking is that I am seeing architects encourage this approach to unify multiple databases with the aim of creating a single schema for a very complex organisation
Agree overall, but it really seems like using Next for SPAs is fitting a square peg into a round hole. If you have to do as much hacking as that article implies just to make it work, it's a sign that you should be using a different tool (probably vite).
I don't get it. RCA is made for single-page javascript apps without a backend. Next.js is a tool to build full websites with a backend. I use both. I would never compare them, it's just stupid. Just because they use React? If I need to build a single-page app that does not require SEO, cashing, or server-side rendering. Why would I use next.js and deal with that overhead?
CRA didn't polyfill NodeJS packages, Webpack 4 did that. People on that issue were complaining that upgrading react-scripts to use Webpack 5 broke the Node polyfills
I don't think Pete was actually advocating polyfilling node in the browser. He's not dumb. I read that to mean frontend probably shouldn't use npm. But with the acknowledgement that its too late to undo it. Probably the only way forward is to start enforcing engines or required feature declarations.
Agreed Pete isn’t dumb but his stance was hard to follow here, especially in defense of CRA’s chaotic polyfilling. His “stance” might be that this is all bad, but his statement was that the polyfilling was a better middle ground. That statement was a bad one
I'm not too familiar with the web3 issue you pointed in the first minutes of the video but it's reasonable for a programmer to try to import a package that allows you to fetch and then display blockchain data on the browser. Although you pointed that backend vs. frontend delimitation isn't stressed enough in node community, I don't see what the solution is for new devs and even senior ones to detect whether a package is browser-friendly.
I had this problem, then with a google search found out the solution, to switch to a different package, namely ethers which does explicitly support browsers
CRA and React's untethered support for it, without mentioning the very serious problems for production applications mentioned in this video, is an abomination that leads tons of new developers, including myself 2 years ago, into the wrong direction from the get go. React's docs mentions what an SPA is, but fails to mention when you should NOT use it and fails to make the association of MPA's with NextJS. As a new dev you have no idea what an SPA is to begin with. So, you automatically choose the first option on their long list of suggested ways to work with React to get started. Coupled with all the Udemy, LinkedIn and most RUclips courses, no one ever helps to know that using CRA was a mistake to begin with for any serious project. This ends up causing loads of companies to end up with CRA apps when the intention was never to be stuck with an SPA to begin with. The more you buy into react-router the more stuck you get. React's docs should have a clear warning that says most production apps are NOT meant to be built as SPA's and probably state some reasons why. Now, most devs who think they've mastered React have learnt how to build MPA's that are actualls SPA's using react-router. This seems insane once you realize what's actually going on. Junior devs then just copy these truly bad patterns thinking that the now Senior FE dev, who used CRA when they were still learning React, has their back. I was blind but now I see. Thanks Theo! I wish you had a React course,. Though, this video is way better than any intro to React I've ever seen. I'm probably going to binge watch your YT videos on a regular basis now. Where else have I been led astray...
First off, I loved the video, I watched the whole thing. Taught me a lot and I think I've had my head in the sand for awhile. I can agree that using CRA to start a production project in 2022 isn't the way to do it. But to say that there's no value in it at all... I don't know. When you're just starting out, you don't even know what tools are available to you. Using CRA, you can jump straight into trying out React code - should you like it and decide to check out what's actually included in your project, you'll find a lot of tools that you might've not even known existed. I think there's value in that alone. Again, I liked the video. It was a good breakdown of the topic.
My very first react project was an empty cra. The second one had a custom config webpack with scss loader added, babel, react and the hotloader manually installed. After a few days of trying to get it to work I felt proud of myself. Then I tried to hook it to Firebase and we're not going to talk about how that went. EDIT: okay okay, my actual very first react project was the gatsby starter BUT it doesn't count because at that point I don't think I had ever even opened a package.json file. Once I saw how fucking HUGE it was I just wiped that shit off my machine
I really dislike the opinionated folder structure of both Next and Remix. Does not scale well for large applications. If I could feature slice the code I’d use it right away.
Since you're talking about routers in this video (really appreciate it, i want to move from CRA and craco for a long time already, gonna give it a shot), do you have experience / opinions on relay and especially routing with relay query preloading? Man this shit is underdocumented, with no good library. Implemented it once with toooooons of react-router hacks, dont want to do it again. Unfortunately, seems that the relay community is not ready yet to release anything about it. Any thoughts you might share is more than welcome. Thanks And no, vite is "veete" because it's a french word (means "quick"), so this creator is right
Relay is such a compelling promise that seems impossible to deliver on :( I’ve seen it work **kind of**, with some INCREDIBLY talented engs DIYing all the missing tools around it Sadly feels like Relay was built to fit into a specific Meta slot, and the result is no public happy path. Very sad. Lmk if you get it working 👀
@@t3dotgg actually, i digged into react-location and it seems promising to achieve such thing. I love relay but it comes with very very strong "rules". Main problem are - it's almost impossible to write generic components (because dependency to schema, and because queries are compiled, no duck typing, static types are not living in JS world) - its not extensible - if a feature is missing, facebook will pretty much try to tell you nicely to GFY - the doc / tools / examples are extremely poor, and using the "next gen" is even worse because the doc is absolutely nothing. That said, i'm using it for 3 years in production, and for most of the situations, it really makes things easier than redux (never tried rtx, was just checking)
i am 30s-years-old and newbie who is learning the React and express, node.js & typescript...i cant understand 70% of what U said but now...i am seriously worring about what should i use to make my website
As a beginner react dev, after knowing the benefits of Next.js, Remix and Vite; I can safely say that create-react-app is just like training wheels for learning react but it's in no way useful in production.
It is definitely useful in production. In fact, I think it is still the most used way. Just because there are better options doesn't mean they will be handy for your career. The market is full of job postings of companies using CRA, you absolutely can't say the same about Remix and Vite. It's useless knowing a framework if no one in the industry uses it, unless you're just working on your own project.
@@tijldeclerck7772 It is definitely used* in production, not necessarily useful. Your second sentence doesn't mean a lot either, just because it is used or the most used way doesn't necessarily mean it is the best.
the browser has its own crypto API (which funnily enough has been ported to node and is fully usable in node v.19), why would you use a polyfill from node's crypto module ?
Nice breakdown, however my opinion is that starting from scartch is worse than ejecting. I for one, find it easier to understand and maintain complex code/config than having to research and write my own. Do you mind sharing the name of the blackboarding app please? 🥺
Great video Theo and while almost all you say is true - remember this - what you have and enjoy today in the react / nest / world is the result of the hard work of many developers before you, your tone of ancient/bad/rough is going to apply to you within a decade. Human ideas always exceed the clean capabilities of software dev, so in short focus on the new how to rather than the time consuming needless ranting, it wastes a lot of peoples time.
5:00 Love the content, sometimes a bit negative but I can't blame you most of the times. btw, as far as I know a polyfill had nothing to do with your compile process, babel-polyfill maybe, but a polyfill won't replace your Array.map but It will add a map method to it's prototype that's behind the scenes just a for loop instead of native code provided by your engine or browser. I am pretty sure I am right haha but feel free to correct me if not
Can't say I have ever used CRA (it became a thing after I was already invested). I fully understand why it's there. The frontend javascript ecosystem is massive and React is just a small part of that. For those who are new to the front end choosing which libraries to use and how to configure your project is hard work. There's a lot to think about and many pitfalls. Having CLI tools that can scaffold entire projects for you is really beneficial for those people. You only have to focus on learning one technology at a time. I fully agree that many scaffolding tools (not just CRA) enforce outdated mantras and teach bad habits. However, sometimes is a necessary evil especially if you don't want to scare away new talent. That said I wouldn't expect an intermediate or senior engineer to still need it. By then they should be familiar with the ecosystem enough to know how to cut the fat. I definitely wouldn't recommend starting a new product on it. (and LOL's crypto polyfills). There's some silly stuff out there, that one is a doozy.
"Sometimes the creators are wrong". I'm sure you've heard this clarification ad nauseam, but the GIF creator was trying to be "cute" maybe(?) with co-opting the peanut butter brand, however "vite" is the actual French word for "fast", so it can only be pronounced "veet" to make any sense. In 2023, we should shy away from anglicizing simple words.
I came in from nuxt dev, working on CRA app that's already been ejected, I told them I want migrate everything to next if they don't agree then I'm out
I just found out that create-react-app is pretty slow and has more RAM usage compared to creating a webpack config yourself, that's why I stopped using it since my PC is such a potato and can't even afford a mid-gaming PC just for web dev😂
I'm still around 20 minutes of video so I might be missing something. I'll edit the comment later if I feel there is anything to add. For what I understand the problem with CRA is having a bunch of polyfill for stuff that wasn't meant for client side to run on the client side. If I'm not stupid and I don't install a server package on a client application, then I won't have any real issues with CRA, right? Cause so far I haven't had any issues in any of the production ready apps I work on, but they are pretty simple apps so I guess there is that as well just wondering what would be a real scenario of something that would actually break because of CRA itself and not because people are trying to use stuff in a way they are not meant to be used
Ive been developing react for 8 years it was my understanding Next was to create static websites?? not reactive and stateful applications or SPAs, SASS apps ext. seriously asking can I build an app for instance in Next that uses redux and Axios like an interactive dashboard with forms and realtime data? Also are we stuck using modules? or can we implement SCSS in Next?
Yes you can, build dashboard or sass applications with it. It just allows you to pre render data or routes during build time as well as SSR. Really it just adds additional features doesn't remove any of the functionality of CRA. Yes you can use scss and pretty much any of the popular styling solutions.
You can serverside generate the index.html with all the metadata you need and still use just vite as an spa, if metadata is all you need and you dont need to care about some ssr.
It's called Scaffolding. These are old problems that have been discussed and solved in one way or another for other languages. When it comes to any JS, I find that developers tend to want to reinvent the wheel instead of learning from the past. For instance, what JS is doing now, was possible in AS 3 over a decade ago. Scaffolding is also used in Ruby on Rails, and is frowned upon, because project structure is always domain specific. CRA is a good tool for prototyping a project, but when you start implementing domain logic, you need to adapt your project structure so it scales according to your domain.
Horror story. I had to migrate an ejected CRA class-based project that only ran on Node V10. It wasn't fun.
I’m so, so sorry
Dear god.
God bless you
My condolences
Was it in a team? What was the budget? How long did it take? How much did you get paid?
Create React App has proved to be absolute hell on every project I've used it on. As I remind everyone who will listen - magic is usually not free it comes at a cost. Same with tools that turn your database into an API and so on.
Preach. I was the unfortunate person to upgrade an ejected CRA project and it was NOT fun to say the least..
I am a student dev that started learning React right when the pandemic started. I was being taught the methods of using class components before hooks were ever a thing and midway of learning I was expected to create projects with old code that was no longer maintained. Because of this I had to teach myself and found myself relying on CRA. Teaching myself hooks since the program that I went into didn't know anything about them yet made me abandon learning to code while I worked on other parts on my life, but recently I have been pushing myself to finish out the program, and honestly these videos help me a lot. Thanks for putting so much effort into the community, and I hope to catch some of your live streams :)
Dont use CRA just do:
create empty project folder
npm init -y
install react, react-dom, typescript (optional)
install bundler (vite or webpack)
adjust bundler config
- possible extensions for react like hot reload
- vite has easy configuration setup
- this is where u also add some utility extensions like obfuscator
(optional) add eslint and tsconfig
(optional) add testing libraries if ur into tdd
create entry file (index.tsx)
thats it for SPA
Vite templates do almost all of this for free, I’d just use those
@@t3dotgg i definitely agree, i just like to make it hard for myself mwahaha
TBH this feels like asking every driver to be able to fix a broken engine. I don't want to spend weeks on end learning all this stuff, I want to type a single command that will make a React app that works so that I can start programming.
I know there is a cost to be payed, but saying "Just do everything" manually isn't a great answer IMO. Maybe a boilerplate starter React app repo that can be cloned would be better?
@@karelhrkal8753 yes it is nice to just type once. thats why i investigated what is the simplest react setup and this is what i come up with. i created a lightweight cli library for managing monorepo setup like NX. this is one of the templates i made. now when i want to create a new react or any nodejs project. i just need 2 commands, generating the monorepo structure and generating this react template. then i can go on from there, generate express template... and so on and so on. so i can put them all in one codebase. i really dont like using other boilerplate without knowing what is happening under the hood. cause it feels like im missing something.
@@deamorta6117 I agree that you should at least have an understanding about what is happening, just like a car driver should know that the expanding gas explosion in the engine is what is moving the car, even thought it is not strictly necessary to drive the car.
However, since you are making your templates, you are in the "making my own engine just so I can drive a car" land, which you simply can't expect from every developer.
Thank you for this.
I'm a (mostly) back-end C# dev who just got a requirement to add a front-end to a service and my only real "modern" front-end work has been with Angular. This was extremely helpful for someone who hasn't really worked with React, aside from random bug fixes to existing legacy/older React codebases.
Hey! You are a back end C# dev? If you or anyone have time for a project, please reach out to my contact info on my profile! Comment section always clutch 😆
Great video! Not a professional frontend dev so I'm probably in that group of people who are more likely to use something like CRA just to get started quick on a side project. Going over the history of the problems + listing solutions in 1 video was really helpful for me
Try Vite instead of CRA and see if you like that more
As someone who started using NextJS relatively recently, I feel like the docs were pretty clear about what is on the server vs client. getStaticProps, getServerSideProps, etc, were made clear to be buckets that won't be included in the client build which is great.
Sorry if I didn't catch it, but I think you missed the secret 5th option: learn the tooling and do your own thing for maximum flexibility. Only time I've used CRA was to eject a test project and learn from the webpack and other configs. Have avoided it otherwise cause of how opinionated it was. It sounds like a great example of the law of leaky abstractions. Thanks for the exposure to these other options though, great video!
Create-react-app is one of my favorite commands, but as usual as a developer, if there's anything we can improve, we need to know, right? So thanks Theo ✌🏻
create-t3-app is coming along nicely :)
I swear I've been banging on about this for years. Since Next 7 or so, there's been no reason to use CRA IMO.
I’m about to 2 seconds away from just throwing away our production app and start from scratch
Been lurking your channel for past couple of weeks. Just commenting to say thanks for doing all of this, FOR FREE. Incredible information, looking forward for more vids like this!
26:23 “Create React App is a legacy project and we should treat it as such.”
Sums it all up.
Super useful stuff! Where can I find your notes?
I am a student and in the course i own on react, it is focused on specifically using cra all the time and it was nice and cosy at first but every thing was too bloomy so i decided to eject to actually read the scripts cra generates for me and i was shocked at how many things i learnt more and how many thing were just an unnecessary dep(not necessary to me for you it may be different) so i went ahead and implemented some of that in my projects and i think it was a good learning experience for understanding how webpack works with different configurations and ways to configure it.
CRA served its purpose for a long time, but others tools have surpassed it some time ago. That's it.
I'm glad it wasn't just me thinking this. It's hard to know when you work on your own. When I look at frontend code and see node modules I've been thinking, "WTF is this doing here?!"
Really loved this video, it felt like a conference presentation just so much better and much more educational. This inspired me go through the entirety your yt channel. Would love to see more of such content.
me too, I could even felt the cringe at the same level
Personally I have avoided CRA ever since I realized what ejecting did.
But, imo, a decent official template is an important thing to have. It is the template that newer devs will use and expect it to be an example of "the correct way" of doing things. It can be daunting for newbies if instead they are told to use a framework or set up tooling themselves.
in my experience, a tool like cra is the absolute worst experience for a noobie, since i have zero idea what's going on
also, parcel is really nice and supports react and more out of the box, painfully easy to use
Am I the only one that writes my own scripts? It's not hard
@@alext5497 at some point the scripts can get pretty advanced with really large webpack-configs (if you use webpack). And not having to worry about how to get code-splitting, hot-reloading, fast build times etc is really great. Thats why I started with CRA, and still continue to use other tools like next and remix.
@@ed_iz_ed Of course you have no idea what's going on. You're a newbie. You're not supposed to know what's going on. That's literally how learning works.
A. This video is phenominal, it was a really good breakdown of this subject
B. Using remix for about a month now, and honestly happier with it than any NextJS thing I've ever worked on. It's a bit more opinionated than NextJS, but IMO Better docs, and the nested routing and the loading strategy that comes with it actually feel incredible to me. It does feel less mature than NextJS, it also looks like Next will be adding a nested routes feature soon, super curious about how that will go.
I've been using Remix for the last few of months and I agree with everything above. I'd also add that actions are great. With them forms are much simpler in Remix than in my experience with both Next and CRA apps.
Lol, there's a new best thing every month. It's a waste of time learning anything until the industry decides to massively adapt a technology like they did with React.
@@tijldeclerck7772 funny thing with Remix is it’s actually modernizing the oldest ways of getting data from and sending data to a web server. So while I generally agree with your “new thing of the month” sentiment, Remix is, in a way, the “old thing of months past”
@@tijldeclerck7772 if you don't like learning things you're in the wrong industry.
My phone must of heard me talking about using Vite to replace CRA for a SPA application because this was the first thing that popped up in my feed when I got off work today...
Oh god am I thankful that when I joined the JS front-end world, I caught the early NextJS bandwagon early on and never had to use CRA other than my side projects
Hello Theo,
Why did you say you don’t recommend MaterialUI? Is it because the implementation of the libraries are bad or you don’t think a UI kit library helps you much?
I’m really curious
I am happy using c-r-a thus far, when the time comes to use something else, then I'll revisit your video. But so far it works, not everybody needs to be on the latest, greatest, shiniest, trendiest tool out there.
Can you change video's name to "CREATE-REACT-APP" instead of "CREATE REACT APP"?
Just for junior/new developer in many countries understands the same thing.
Saw your vid and migrated 4 React projects from CRA to Vite. I'm totally happy with the decision (SSR isn't relevant here) so thank you very much for pointing out.
As someone who is just getting back into web dev after 10 years or so, it's pretty funny to hear someone gush about server-side rendering. How the pendulum swings.
I fucking love your channel, no bullshit tutorials, no 5 minutę guides. Just real, raw talk and a lot of practical information. LOVE your work keep it up
I used this to explain developer opinions to my grandparents. They’re elementary school teachers from the 60s and they could follow this argument. That’s how common sense this.
this is like a developer soap opera, fantastic!
I don’t think I’ve ever gotten a compliment this good before
I'm going to be guiding some interns at my company as they are starting with react and this video really helped me a lot. When I was an intern we used cra and it would seem to me that using cra now is gonna be fine as well since it's recommended and stuff but after trying it now i saw how MUCH it became basically... Thank you very much for the video haha. Would love to listen about the material ui as well
Have been using vite for a while now, and its lot faster than cra.
But the auto polyfilling for Node standard library modules was done by Webpack, not CRA. I have never used CRA so it may have done extra, I don't know. I believe Webpack 5 changed the way it automatically included polyfills.
I've been using CRA for months now and every month I noticed problems on my project, didn't know this was the reason why. Such an eye opener. I am tempted to migrate to NextJs or vite, but our group had already started using React on our capstone project which is due in 4 months so I guess I'm stuck with that.
My guy, you can just strap in Vite without touching your code base. Figuring it out will take you like... A whole day or two or less if you focus hard enough but will save you A LOT OF FREAKING TIME. Like our professional code base before on CRA was 3 mins for saving 1 file. But then when I configured it to run with vite, 1sec or less then build time from 15 mins to 5 or 6. Like do it my guy. It would save you a lot of time.
I need elaboration on the comment, which was under Vite use cases: Owning your build could be potentially valuable(electron). Is value in reference to financial incentive? If so why do the other builds options effect value.
Create React App was always bad. Except for its original purpose, which was letting people quickly try out React without having to learn a ton of webpack configuration first.
This is the most informative, down to Earth, and digestible comparison I have ever seen. You're also hysterical. Subscribed and turned on notifications. Thanks!
Real talk though, what do you use instead? Just put your react app together from scratch?
I’m relatively new, taking one of the most popular react courses and CRA is just a given, assumed to be used from the beginning. I see that he’s doing some kind of alternative with nextJS, but it doesn’t seem very maintainable.
Also, love this format. Very listenable, a lot of information without having to watch everything he does.
If building a standard SPA, use Vite. If you need SSR, use Next. That’s the point of the video lol
Why be so arrogant, man? Your content is good, no need to be like this :/
CRA had its moment and was a great step to keep the React community growing! I used it a lot, it was very valuable to me at the time because we had to copy all of those endless webpack configs. No need to shame it with comments like “use it if you are underpaid”, that’s so disrespectful, specially because it made easier for a lot of React beginners to experiment with it.
Interesting points. The question is what is your suggestion to use. If I want a react SPA and don't care or want SSR, and don't want to build custom tooling. I.e. environment variables, autoprfizer as an example
1:01:06
@@t3dotgg Vite, Could be that replacement, but it's not quite there yet for use in a corporate environment for a project that needs to be stable for years and developers will be onboarding. The CRA Documentation is much better and its stable.
Your points are valid, but from experience in corporate projects Vite is not there yet as a replacement.
Thanks for the video !!!. What's your opinion about NX generators as alternative to CRA ?
Like…Angular….? My opinion is burn it to the ground.
One of the main reasons you see this issue in a lot of crypto apps, is one of the main wallet providers(WalletConnect) injects polyfills. There are long-awaited pending updates on it.
This package has always been intended for front-end use, just poorly designed.
Likely due to early CRA supporting this behavior.
Well its 2023 and NextJs will automatically poly-fill crypto-browsify as the fallback for the node crypto.
So is this really a problem with CRA or a problem with the JS community as a whole.
At work we are part of a platform team that all use an internal shared lib. Started a new project that needed to use that lib. At first I was happily using parcel. But the shared lib required a specific project setup from a template that is using Craco. Really not looking forward to the day when it needs upgrading or the thing falls apart. Here's to hoping for the best!
Please do rant about UI frameworks!
Coming very very soon!!!
Very nice video I’m a beginner in web dev and even if your topics are quiet advance for me I really like how you focus on the different topics I’m learning so much. This one interest me a lot as I’m starting with nextjs. Very nice job thank you for your dedicated work.
Problem with vite is many many many react packages are super coupled with webpack / babel and becomes really quickly a nightmare to make them all work with vite.
Interesting - would like to hear more about the packages you experienced issues with. I shipped a react app built w/ Vite for a year+ with maybe a single issue in Rollup 🤔
@@t3dotgg
- react-intl goes nuts in TS mode, because the babel plugin get called at the wrong time and accesses the untranspiled sources. Need to write a plugin for it (fortunately not too complicated) and install shitload of babel dependencies. And it still kind of doesn't work because (if i remember well) when the plugin is called AFTER transpilation, the JSX is not what it's supposed to be with webpack + babel so components can't be found for parsing. Because of that, all the translations have to be "pre-declared" outside components and then fed to the translation components (pre-declared translations are parsed correctly because they're out of JSX).
- relay has the same kind of weird problems because it relies heavily on babel. Don't remember the very specifics, just that it took a super long time to make it work and it's not 100% perfect.
- build / dev is really not the same. Packages that work in dev may break at build time and vice versa. You finally fixed your build, you restart the dev server and now dev is broken (but build is working). This mostly happens when you deal with a package that's been written / compiled / tested exclusively with webpack in CRA mode. Obviously vite is right here, not CRA, but when you're in enterprise mode, and can't spend 1 month on a problem, facing this shit is a huge kick in your teeth makes you want to rollback to CRA because "it works". :) You can try to use react-markdown (the remarkjs version) if you want. Don't know if they fixed their stuff in version 8, when i tried, they were at version 7 and i had to use version 5 to make it compile both in dev / build. Or sometimes, even better, they work in dev, you build, the build compiles but when you execute the build, you get tons of errors with missing polyfills.
Just FYI, im not a frontend dev but backend, and not js but ruby. I love react, I love JS but they're not my specialty and my frontend devs are quite junior. So from my point of view, vite makes my life harder than CRA. I know that technically, they don't compare though. I'm checking your vidz to get rid of CRA + f craco, but in a way that i can handle economically speaking ;).
Also, the experience im describing here is from 1y ago, so maybe things got better since.
yeah but honestly, what's the cat lipsync thing called I LOVE IT
I really enjoyed this, but would have loved some info on why one should not use GraphQL over databases. The reason for asking is that I am seeing architects encourage this approach to unify multiple databases with the aim of creating a single schema for a very complex organisation
Agree overall, but it really seems like using Next for SPAs is fitting a square peg into a round hole. If you have to do as much hacking as that article implies just to make it work, it's a sign that you should be using a different tool (probably vite).
do you have a vid how to setup cat avatar like yours?
I do not - pretty simple stuff thought! VTuber Studio is really cool, available on steam
I tried CRA again a while back and quickly switched to Next because of the way CRA is configured. Too much of a headache to use.
I don't get it. RCA is made for single-page javascript apps without a backend. Next.js is a tool to build full websites with a backend. I use both. I would never compare them, it's just stupid. Just because they use React? If I need to build a single-page app that does not require SEO, cashing, or server-side rendering. Why would I use next.js and deal with that overhead?
CRA didn't polyfill NodeJS packages, Webpack 4 did that. People on that issue were complaining that upgrading react-scripts to use Webpack 5 broke the Node polyfills
I don't think Pete was actually advocating polyfilling node in the browser. He's not dumb. I read that to mean frontend probably shouldn't use npm. But with the acknowledgement that its too late to undo it. Probably the only way forward is to start enforcing engines or required feature declarations.
Agreed Pete isn’t dumb but his stance was hard to follow here, especially in defense of CRA’s chaotic polyfilling. His “stance” might be that this is all bad, but his statement was that the polyfilling was a better middle ground. That statement was a bad one
I'm not too familiar with the web3 issue you pointed in the first minutes of the video but it's reasonable for a programmer to try to import a package that allows you to fetch and then display blockchain data on the browser. Although you pointed that backend vs. frontend delimitation isn't stressed enough in node community, I don't see what the solution is for new devs and even senior ones to detect whether a package is browser-friendly.
I had this problem, then with a google search found out the solution, to switch to a different package, namely ethers which does explicitly support browsers
Off topic, what noise cancelling are you using? I was using NVIDIA Broadcast but it wrecks my audio quality.
I'm not a professional but a hobbyist. but I'm having issues with CRA. Is using Vite a good alternative since it's so light and simple?
CRA and React's untethered support for it, without mentioning the very serious problems for production applications mentioned in this video, is an abomination that leads tons of new developers, including myself 2 years ago, into the wrong direction from the get go.
React's docs mentions what an SPA is, but fails to mention when you should NOT use it and fails to make the association of MPA's with NextJS. As a new dev you have no idea what an SPA is to begin with. So, you automatically choose the first option on their long list of suggested ways to work with React to get started. Coupled with all the Udemy, LinkedIn and most RUclips courses, no one ever helps to know that using CRA was a mistake to begin with for any serious project. This ends up causing loads of companies to end up with CRA apps when the intention was never to be stuck with an SPA to begin with. The more you buy into react-router the more stuck you get.
React's docs should have a clear warning that says most production apps are NOT meant to be built as SPA's and probably state some reasons why. Now, most devs who think they've mastered React have learnt how to build MPA's that are actualls SPA's using react-router. This seems insane once you realize what's actually going on. Junior devs then just copy these truly bad patterns thinking that the now Senior FE dev, who used CRA when they were still learning React, has their back.
I was blind but now I see.
Thanks Theo! I wish you had a React course,. Though, this video is way better than any intro to React I've ever seen.
I'm probably going to binge watch your YT videos on a regular basis now. Where else have I been led astray...
First off, I loved the video, I watched the whole thing. Taught me a lot and I think I've had my head in the sand for awhile.
I can agree that using CRA to start a production project in 2022 isn't the way to do it. But to say that there's no value in it at all... I don't know. When you're just starting out, you don't even know what tools are available to you. Using CRA, you can jump straight into trying out React code - should you like it and decide to check out what's actually included in your project, you'll find a lot of tools that you might've not even known existed. I think there's value in that alone.
Again, I liked the video. It was a good breakdown of the topic.
5:10 What a concise explanation of a polyfill.
I never use create react app. Why I’m watching this
This was a great overview in an area that I needed to refresh myself on. Thanks for the clear and concise walkthrough!
My very first react project was an empty cra. The second one had a custom config webpack with scss loader added, babel, react and the hotloader manually installed. After a few days of trying to get it to work I felt proud of myself. Then I tried to hook it to Firebase and we're not going to talk about how that went.
EDIT: okay okay, my actual very first react project was the gatsby starter BUT it doesn't count because at that point I don't think I had ever even opened a package.json file. Once I saw how fucking HUGE it was I just wiped that shit off my machine
I really dislike the opinionated folder structure of both Next and Remix. Does not scale well for large applications. If I could feature slice the code I’d use it right away.
Fwiw I’ve had great luck “feature slicing” the hell out of Next. I even do that in the video here lol
I can't believe you didn't add "slow build & re-compile times" in the "bad" section for CRA.
Since you're talking about routers in this video (really appreciate it, i want to move from CRA and craco for a long time already, gonna give it a shot), do you have experience / opinions on relay and especially routing with relay query preloading?
Man this shit is underdocumented, with no good library. Implemented it once with toooooons of react-router hacks, dont want to do it again. Unfortunately, seems that the relay community is not ready yet to release anything about it.
Any thoughts you might share is more than welcome. Thanks
And no, vite is "veete" because it's a french word (means "quick"), so this creator is right
Relay is such a compelling promise that seems impossible to deliver on :( I’ve seen it work **kind of**, with some INCREDIBLY talented engs DIYing all the missing tools around it
Sadly feels like Relay was built to fit into a specific Meta slot, and the result is no public happy path. Very sad. Lmk if you get it working 👀
@@t3dotgg actually, i digged into react-location and it seems promising to achieve such thing.
I love relay but it comes with very very strong "rules". Main problem are
- it's almost impossible to write generic components (because dependency to schema, and because queries are compiled, no duck typing, static types are not living in JS world)
- its not extensible
- if a feature is missing, facebook will pretty much try to tell you nicely to GFY
- the doc / tools / examples are extremely poor, and using the "next gen" is even worse because the doc is absolutely nothing.
That said, i'm using it for 3 years in production, and for most of the situations, it really makes things easier than redux (never tried rtx, was just checking)
Can't find the link to that tips site he mentions about 35 mins in. Anyone has it?
init.tips :)
@@t3dotgg Thanks, sorry man I couldn't make out what you said in the video. Thanks for that!
Vite and pnpm are my favourite now
i am 30s-years-old and newbie who is learning the React and express, node.js & typescript...i cant understand 70% of what U said but now...i am seriously worring about what should i use to make my website
Unfortunately CRA is the worst part of react ecosystem right now
Hello Theo,
Why is react router not recommended?
As a beginner react dev, after knowing the benefits of Next.js, Remix and Vite; I can safely say that create-react-app is just like training wheels for learning react but it's in no way useful in production.
It is definitely useful in production. In fact, I think it is still the most used way.
Just because there are better options doesn't mean they will be handy for your career. The market is full of job postings of companies using CRA, you absolutely can't say the same about Remix and Vite. It's useless knowing a framework if no one in the industry uses it, unless you're just working on your own project.
@@tijldeclerck7772 It is definitely used* in production, not necessarily useful. Your second sentence doesn't mean a lot either, just because it is used or the most used way doesn't necessarily mean it is the best.
the browser has its own crypto API (which funnily enough has been ported to node and is fully usable in node v.19), why would you use a polyfill from node's crypto module ?
Hi Theo, I usually don't comment on videos (think this is my first one), but I just wanted to say great content keep it up :) Thank you
Nice breakdown, however my opinion is that starting from scartch is worse than ejecting. I for one, find it easier to understand and maintain complex code/config than having to research and write my own.
Do you mind sharing the name of the blackboarding app please? 🥺
Not a fan of starting from scratch either - that’s why I recommended three different solutions :)
Excalidraw is my go to drawing app
What about apps behind auth where SEO doesnt matter? And have other backends to consume? Would you still recomnend Nexjs over Vite?
Great video Theo and while almost all you say is true - remember this - what you have and enjoy today in the react / nest / world is the result of the hard work of many developers before you, your tone of ancient/bad/rough is going to apply to you within a decade. Human ideas always exceed the clean capabilities of software dev, so in short focus on the new how to rather than the time consuming needless ranting, it wastes a lot of peoples time.
5:00 Love the content, sometimes a bit negative but I can't blame you most of the times. btw, as far as I know a polyfill had nothing to do with your compile process, babel-polyfill maybe, but a polyfill won't replace your Array.map but It will add a map method to it's prototype that's behind the scenes just a for loop instead of native code provided by your engine or browser. I am pretty sure I am right haha but feel free to correct me if not
This video made me so glad that I'm a Vue developer.
What is the na,me of the app you are using for the sketches man? Thank you and love you vidoes btw!! Cheers!
Can't say I have ever used CRA (it became a thing after I was already invested). I fully understand why it's there. The frontend javascript ecosystem is massive and React is just a small part of that. For those who are new to the front end choosing which libraries to use and how to configure your project is hard work. There's a lot to think about and many pitfalls. Having CLI tools that can scaffold entire projects for you is really beneficial for those people. You only have to focus on learning one technology at a time. I fully agree that many scaffolding tools (not just CRA) enforce outdated mantras and teach bad habits. However, sometimes is a necessary evil especially if you don't want to scare away new talent. That said I wouldn't expect an intermediate or senior engineer to still need it. By then they should be familiar with the ecosystem enough to know how to cut the fat. I definitely wouldn't recommend starting a new product on it. (and LOL's crypto polyfills). There's some silly stuff out there, that one is a doozy.
Did you watch the video?
Imagine that Pete guy calling an actual part of the language specification "ESM activism cancer" - what's actually wrong with him?
"Sometimes the creators are wrong". I'm sure you've heard this clarification ad nauseam, but the GIF creator was trying to be "cute" maybe(?) with co-opting the peanut butter brand, however "vite" is the actual French word for "fast", so it can only be pronounced "veet" to make any sense. In 2023, we should shy away from anglicizing simple words.
Is there any blog about how crap the CRA is?
I came in from nuxt dev, working on CRA app that's already been ejected, I told them I want migrate everything to next if they don't agree then I'm out
I hate how CRA doesn’t have any way to pack web workers. It’s bitten me several times.
There's a lot of grunting noises in this video...
I wish I would have found this channel way earlier. Great content exactly what I was looking for!
I just found out that create-react-app is pretty slow and has more RAM usage compared to creating a webpack config yourself, that's why I stopped using it since my PC is such a potato and can't even afford a mid-gaming PC just for web dev😂
I'm still around 20 minutes of video so I might be missing something. I'll edit the comment later if I feel there is anything to add.
For what I understand the problem with CRA is having a bunch of polyfill for stuff that wasn't meant for client side to run on the client side. If I'm not stupid and I don't install a server package on a client application, then I won't have any real issues with CRA, right? Cause so far I haven't had any issues in any of the production ready apps I work on, but they are pretty simple apps so I guess there is that as well
just wondering what would be a real scenario of something that would actually break because of CRA itself and not because people are trying to use stuff in a way they are not meant to be used
If you don’t recommend redux for next.ja what state management library do you recommend?
Ive been developing react for 8 years it was my understanding Next was to create static websites?? not reactive and stateful applications or SPAs, SASS apps ext. seriously asking can I build an app for instance in Next that uses redux and Axios like an interactive dashboard with forms and realtime data? Also are we stuck using modules? or can we implement SCSS in Next?
Yes you can, build dashboard or sass applications with it. It just allows you to pre render data or routes during build time as well as SSR. Really it just adds additional features doesn't remove any of the functionality of CRA. Yes you can use scss and pretty much any of the popular styling solutions.
You can serverside generate the index.html with all the metadata you need and still use just vite as an spa, if metadata is all you need and you dont need to care about some ssr.
Yes but now you have to write that server generator, effectively rolling your own SSR
"the recommended way to start an ew application" when a typo fits perfectly
Your channel officialy became "ATHLEAN-X", Create react app is killing your gainz.
Can RazzleJS be also one of the alternatives to CRA?
My eyes have been opened by this video, no more create-react-app
It's called Scaffolding. These are old problems that have been discussed and solved in one way or another for other languages. When it comes to any JS, I find that developers tend to want to reinvent the wheel instead of learning from the past. For instance, what JS is doing now, was possible in AS 3 over a decade ago. Scaffolding is also used in Ruby on Rails, and is frowned upon, because project structure is always domain specific. CRA is a good tool for prototyping a project, but when you start implementing domain logic, you need to adapt your project structure so it scales according to your domain.
Did you, uh, watch the video?
this advice doesnt apply to beginners who just wanted to learn right ? right ?
It definitely does apply lol. Start with Vite or next