Don't Use Create React App in 2023
Вставка
- Опубліковано 20 сер 2024
- My last Create React App video was way too long and I wanted to start a new series so...yolo.
Create T3 App: create.t3.gg/
Vite: vitejs.dev/
Astro: astro.build/
Remix: remix.run/
#t3stack #fullstack #webdevelopment
ALL MY VIDEOS ARE POSTED EARLY ON PATREON / t3dotgg
Everything else (Twitch, Twitter, Discord & my blog): t3.gg/links
I started project at work a bit over a year ago based on CRA. Back then this is the thing I knew that was "recommended way to start a SPA react app". Vite etc were appearing but I was afraid it wouldn't support everything we needed.
I finally switched those apps from CRA to Vite last week. Even on the base skeleton app we use to start new PoC/demos based around our technology, it went from many seconds to literally 300ms, to build the production version of the app. It's above a factor of 10. The HMR speed is insane too. From a couple seconds to virtually instant updates.
All thanks to your previous video where you explained ppl should stop using CRA, and that Vite provided the same features and a better developer experience. I just had to add a package to handles "externals" with Vite (it was a sine qua none condition for our projects), and done. No more react-scripts, no more complex webpack configuration.
This story makes me way too happy and I really hope others can have the same wins from this vid 🙏
@Mr Nobody how hard was it to make the switch from Webpack to Vite?
tfw ThePrimagen has become the real face of Rust, not the crab or the R logo 😂
When CRA first came out it was such a revelation, no longer having to manually setup/update webpack. Even though I had become quite the proverbial wizard at it, moving over to CRA was a no-brainer. Now, the problem is, people at my org are not as easily convinced that moving over from CRA to something better is worth it as it was when we moved over to CRA
because it probably isn't
@@aerocodes don't know man, I think the outrageous speed difference between say CRA and Vite is pretty worth it, IMO.
Theo is wearing the same shirt in the suggested video thumbnail. Obvious room for improvement in the algorithm.
This is my fault tbh
I have used CRA many times and I have seen that it installs a lot of stuff in the project. With VITE the project is lighter, starting you can decide what and whether to install along the way. Of course if you use Next, create-next-app is great, but whether to use it or not depends on the project.
I also started to use Vite due to your reccomendations and I have to say that i am quite impressed with it so far. It's fast and it works surprisingly well without a lot of attrition
Short , Simple , Informative and well dressed theo. Who said the perfect video doesn't exist 👏👏
super excited to see what Turbopack can do! Thanks so much for the awesome video!
its kind of annoying playing peekaboo with your right eye
I don't even remember if CRA was the issue but moving to vite / t3 for several projects now has got me doing what I want to do when writing code, and much much less of solving issues that have nothing to do with what I've written.
This advice is bs. The HMR difference between Vite & Webpack 5 is like 0.5s on a project with 250 components. The diff is even smaller if you work on a proper machine instead of €100 potato. And then Webpack 5 is 2-3x faster to start + has built in support for module federation should you need it.
Oh man thank you! Finally a short but thorough explanation.
Subscribed! I found you through how well you held yourself to in a recent high profile tech conversation. You’re tech knowledge is amazing!
Nice and to the point :) I think if your main problem with the tools is the build speeds, then there's not much more to say. I also enjoyed the longer CRA video, for what it's worth. But it's definitely harder to consume something that long.
esbuild is still not stable
For production builds yes - for dev environments it's essential.
A valid reason imo to use CRA over Vite is for the support of module-federation. I know Vite also has a module-federation plugin, but it does not support all the features we needed. The plugin only support hot-reload in the host app for example. Also good dependencies sharing was lacking at the time.
We used CRA to get all the basic config and override it with CRACO to apply module-federation to the config.
Why use CRA and CRACO when you can just use webpack normally? CRACO should be used when you're in too deep on a CRA project, but if you know you need module federation up front you should own your whole build config
@@TheBswan because CRA gives good default setup, we tweaked it more with CRACO then just module-federation.
Daliban operative DETECTED
There's an app I maintain at work that uses CRA and uses a "fetch-everything-then-render" pattern where we make a few API calls on mount that return massive payloads which contain every piece of data the app could possibly need and then use WebSockets to keep state in sync with the server.
THE DX IS SOOOO BAD! I WAIT LIKE 5 SECONDS EACH FILE CHANGE TO SEE IT APPEAR ON THE PAGE!
theo looks like roadrunner
Any Hack Reactor grad knows very well what a nightmare it is to set up Webpack manually.
Regarding CRA, I think you said it best on your last video about CRA: "CRA is a legacy project and should be treated as such."
I'm creating my first ReactJS app in VS Code using Create-React-App (learning ReactJS), been waiting for at least 15minutes while it's doing... something.
What do I see while browsing for tutorials? A three minute, twenty-one second video telling me I done goofed.
Thanks Theo!
Recently joined a project where the webpack configs were custom written… Lighter modules but longer response time, which isn’t a valuable trade off.
I find myself waiting 6+ secs for the rebundling, and it sucks so much esp cos I’ve been mostly living in Nextjs land for months now
Beginner Laravel developer, but i can't miss your videos. I really like how you break things down.
My problem with cra is : speed I don't have time to wait for it to create ......, Vite is just 1min I'm ready to start doing my work
Great video, I’m not sure how I found your channel but your takes are interesting and keep me hooked!
I just started my latest project using Vite and it’s like a breath of fresh air. Simple install lightning fast updates.
Great video - I appreciate the quick explanation about create-react-app, why it is like it is, and why it was made. Hats off to the people who made it, no doubt their tool did something huge for the developer base, but as has been mentioned, times have moved forward, and new tools exists to make the dev experience better - but no doubt CRA has huge impact in regards how those tools work.
MongoDB: The real problem would be AWESOMMMEE (i need help convincing my boss to use postgres/mysql)
A question I think about a lot, one of the things that make t3 stack so attractive, is that you have everything connected and integrated.
But what would you do if you want the same web app you developed with t3 stack as a native IOS/android app?
Would you rewrite everything with react native? Even though the UI is the same?
or maybe use Ionic with capacitorjs to just render the whole application inside a web view( which can result in poor performance but one code base stays)?
P.S:
I know you can build with flutter a web app and a native app at the same time, but the performance of flutter is kinda sh!* overall, so that’s an option.
P.S.2:
Asking because I have a new project I have to build which I really want to use t3 stack on, but we also need to build an application and we don’t have time to spend on coding 2 codebases….
check out create-t3-turbo (for tailwind) or the tamagui expo starter repo
Can you make a video about your thoughts on svelte and svelte-kit?
I loved using vite, but I’m stuck with create react app at work because the front ends I develop are all going to be micro frontends and the vite build processes generates files that I cannot integrate with the frontend wrapper they use.
hairs hanging in front of eyes!! what a style!
I'm seeing a lot of people mention Vite issues when it comes to creating the production build of the app.
Having a faster dev experience doesn't mean anything to me if the end (bundling) experience is going to be a headache to get working
Good shit. As usual
I'm a bit proud that I stopped using CRA in 2018 because of boilerplates and configs what you had to eject sooner or later.
One point: Vite uses esBuild for dev rebuilding, but Rollup for the actual build. Esbuild is faster, but Rollup is better at minifying and cleaning out dead stuff.
I actually thought J was subscribed but I was not. Now I am.
I haven't used cra, but I like webpack's various options and plugins.
In particular, I think webpack is the best tool for using module federation.
The biggest complaint about CRA seems to be the part where you have to eject.
They hide options for custom settings.
So react is installed separately + webpack + esbuild-loader.
It seems the best to take the advantages of build speed and webpack at the same time.
I like this *not quite a rant* video.
I still remember moving from Gulp and Grunt to Webpack and thinking "Oh this is an overengineered complicated mess" Webpack never got better.
I would like to see Storybook also move away from webpack or offer an alternative bundler.
The thing is that the javascript community throws projects away too fast. Aways something new, the reason webpack is slow is more a node.js fault than webpack's. Now we decided to throw away webpack to create something new and get rid of all the plugins it contains, I love the t3 stack though, this is just a rant on the js community
Jeez dude, I didn't even notice you're below 100k... Your vids are so nice, I guessed you were several hundred thousands at least
This men can see future
my experience is that porting existing big applications from webpack to vite is almost impossible, especially when you've got a big package.json and multiple entrypoints. ofc I've tried it like 6mo ago so that maybe changed.
last time emotion was not working properly in dev mode
100% right once again. tutorials on the web really need to stop promoting CRA as well. the faster we can move on from webpack the better.
i think vite nowadays should be the more standard "default" choice the community should promote for beginners.
That's I use vite js react template with swc!
It did take a long time to compile to update the page in development enviroment using create-react-app, it is time to switch to vite, Thank you very much 🙏🙏
As a frontend developer I don't know what to do now lol
Theo don't you want Module Federation.
Easily the biggest increment in SPA reactJS tech next steps for making a enterprise scalable front end app.
CRA means, everything will work out of the box. Vite means MVP will work out of the box but some edge cases must be configured.
CRA means everything will work out of the box slow
@@Sybeats and if the end result is buggy or just not working, what's the point of the speed?
At work, working on a project another teammate started few months back on CRA and its so slow and our internal UI library crashes on vite due to legacy IE11 supporting code 😭
One day, I caught a video where you just seemed to talk down to everyone. So I blocked the channel. Then I saw another video of yours through a friend… needless to say, I unblocked the channel and have watched every vid. Sorry for the early judging and thanks for saving my career numerous times 😂😂
you people aren.t maddened by those 6 vunerabilities they haven't fixed an year later , it ruins the aesthetic and dependabot will keep screaming at you
Hey Theo, what are you looking at when you do these videos? It looks like you’re looking off camera at something
Is there a wizard that will tell you what best language, framework etc to use based on a few question?
"Senior Dev"
@@niorad website?
chat gpt by open ai
@@nikkoazz thinking more about me answering questions. Chatgtp doesn't ask questions
Fireship had a video ~4 months ago comparing different js frameworks which might help you a bit.
Hey, Theo! Do you plan to launch create t3 app for React Native someday?
Any thoughts on svelte kit 1.0 for ssg and SSR? Specially the way they load data both on client and server
Is the dev server faster with create-t3-app? One of my biggest gripes with CRA and, I'm assuming, webpack, is that the dev server that auto-reloads on code change is ridiculously slow.
Do you have ~8 pairs of headphones in the background?
was that intro a gmm reference? lol
Remix is wonderfull choice
Didn't it was released in 2016?
Very cool video
In 99% of cases Create-React-App is the best choice, so stop saying that "we should stop using it". It's like saying that we should all stop eating carrots, because there are people out there allergic to it.
I can see Remix and NextJS having alternatives for webpack, what about Vite? What does it use to replace for webpack?
Vite itself is a replacement to webpack. It's a build tool not a framework.
@@nexxel I see, thank you
Theo I really like that shirt. Can you respond to my comment and tell me where you got it?
Liar ! Use it people . Use it use it
Did NPR Radio buy Theo?
Me waiting for 5 mint to load my dev server
face { overflow:hidden; } don't cover the pretty face pls
ill stick to cra
we used CRA at work years ago. i want to transition to Vite now but it dosent seem too easy to migrate old projects :/
truee
Don't use react in 2023
What would you suggest?
Nonsense
svelteKit
I'm sorry you're still having to address this 🥲