7 better ways to create a React app
Vložit
- čas přidán 26. 08. 2024
- What is the best tool for starting a new React project in 2023? Let's look at 7 good alternatives to create-react-app for starting a new ReactJS web development project.
Subscribe to @nxdevtools for more awesome dev content!
#javascript #webdevelopment #reactjs
💬 Chat with Me on Discord
/ discord
🔗 Resources
- React Apps with Nx nx.dev/getting...
- Create React App Github Issue github.com/rea...
- 10 Rendering Patterns on the Web • 10 Rendering Patterns ...
🔥 Get More Content - Upgrade to PRO
Upgrade at fireship.io/pro
Use code YT25 for 25% off PRO access
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- How to start react project as a beginner
- Getting started with Vite for React
- Build standalone react apps with Nx
- Getting started with Next.js
- Next.js vs Remix
- Gatsby vs Astro - Věda a technologie
The most important thing I learned about javascript is that every tutorial is outdated and should not be trusted. Thanks for shining a light on the dark fireship.
Web dev is a mess.
That's why I loved turbo and html over the wire from the Rails team. No need for these shenanigans
@@fullmetaltheorist front-end web dev
This comment thread is a mess
@@fullmetaltheorist only FE
Choosing modern technologies is such a gamble. 2 years ago nobody would have guessed that Vite would become the new standard for bootstrapping a react app. I'm glad my decision to use it on all new projects at my company paid off.
I remember years back when KnockoutJS and AngularJS were both around the same popularity, but all of the trends pointed towards Knockout being the winner of that race. The company I was working at at the time chose to go with KO...
Tech singularly
@@segfault_000 goes to show how that turned out, considering I didn't know about knockoutjs until now lol
Can Vite be used with Webpack?
Not really, unless you're an absolutely moron who knows nothing about technology. It's pretty easy to analyze which new technologies will be commonly used in the future 😂
Javascript/Typescript developers: Wow so many amazing options!
Me, a .NET developer: I never knew so many buzzwords could be crammed into such a short video.
currently i develop in js previously i used c#
I completely agree with you!
web programmers get super excited when they can do things that other languages do natively
Same here. Been doing .NET web and windows apps for way too long and all this stuff sounds like a nice change.
Insane how your videos and content is only getting better and better. This account is a gem for all levels of developers. Thank you!
I remember learning typescript with fireship in about 10 minutes. While other courses took like 1.5 hours to explain the same, but worst
@@brandondev8745 Fireships Websocket in 100 Seconds video taught me more about websocket than other 10+ minute videos. This channel knows only quality
@@brandondev8745 Yes, I agree, it's amazing how @fireship explains you better and faster than chatgpt. Could we say that @Fireship is John Connor ? 🤔
Moral of the story: Use vue
I do hope one day Fireship does a video on WunderGraph. Would be a lifetime achievement for us 🙏🏼
my problem with the js ecosystem is that nothing works out of the box as expected. Want to add TS? thats a day gone. Want to add linting, theres another day
Have you tried Deno?
@@sle6423add permission to ask the question
u cannot understand js with the mindset of start building immediately.... you have to take time to understand the unseen " the implicit"
@@abahiduh3246 no
I think it's like that everywhere where you don't have "batteries included".
Take java, you need to setup a bunch of stuff as well, but you only need to do it once, then you'll have your boilerplate ready for the next project.
Rust or deno on the other hand, they already have most things out of the box, because the that's how they were designed.
I haven't looked back ever since I switched from CRA to vite, so easy to setup and blazing fast compared to CRA
I think i'm the only one still using CRA... Any tips on migrating to Vite?
@@feeadftth Vite is fast and the experience is overall extremely good. Vite is very similar to CRA, but you have to use a plugin to be able to use the "require" syntax. You should not have any major issues while migrating.
CRAy more 👶🏻
@@feeadftth Just spent a week trying to migrate a project at work. Massive fail. I have no clue what I'm missing, but when launching the app I only get a white screen and no errors in the console. I have a React Error boundry set up, and not even that is showing up. It's a pain...
It'@ quite easy to migrate but there can be some problems with specific packages
A video that we all absolutely needed but never knew we needed
If JavaScript is any good, why are JavaScript devs constantly changing and rewriting it?
@@illegalsmirf It's not like Javascript is changing as a language (it is but not that fast). Multiple frameworks are developed because... they simply can? A lot of potential in JS so far.
Perfect timing. Just decided I would start learning react and just heard that the default create app was lacking and have literally been searching yt and forums for a comparison of the alternatives.
If you are just starting to learn react, CRA is just as good as anything else. if you're starting a new project, then use anything but CRA.
there's a package called create-react-sandbox that makes a minimal react environment that you can mess around with react in
I can highly recommend Vite, not only for React projects, but for any type of JavaScript or TypeScript project.
and in 6 months comes another new tool :D
@@groovebird812 Yeah, sure, maybe, but for what it is worth, I've used Vite and found it a breeze to develop with. If you don't like it, just remove the package and go back to running "npm run start".
01:00 - StackBlitz, CodeSandBox
01:33 - Vite
02:40 - Nx
03:57 - NextJS
04:32 - Remix
05:06 - Gatsby
05:48 - Astro
thanks
When I chose to learn react, I decided to start with NextJS. I do not regret it one bit, despite having to learn a meta-framework together with it.
What resources did you learn next from?
@@neofox2526 Most of the time, I just do a project. I start a project, then learn from the documentation, google & stack overflow. I like to learn by tackling the issues I have along the way. It's way less smooth sailing than following a tutorial, but I like it better that way. Also, for this project I had copilot.
Did you try Svelte?
@@jaideepshekhar4621 Didn't have the occasion to. Might do so one day. As a fireship viewer, I've seen my fair share of Svelte propaganda.
@@jaideepshekhar4621 Svelte is not yet on the level of React if we're talking about building large apps using graphql. There are more libraries in React than Svelte. For example, in Apollo Client, there's a support for React but the Svelte version is maintained by someone else and looking at issues, it seems not maintained as compared to natively maintained React by Apollo.
Maybe a year or two, Svelte can catch up.
I hate webdev, why is there 300 languages with 3000 frameworks and 30000 apis
I ask myself this all the time. As my career goes on, I just keep thinking how everything is the same. It's just doing the same thing at a system level in the end.
Why not
If you think that, you're thinking like the rest of the over-engineering nerds. Rather than saying you need to know all of them, master one of them, preferably one with good community support. It's like buying a smartphone, there are thousands, but you'll only choose in a couple dozen models from the top 5 manufacturers right?
I think this speaks volumes about the foundation web development is built on. If there was enough demand to justify the continued creation of insane numbers of language extensions and frameworks. The foundation might kinda suck.
Because js is a really trash language lol, and now the others just follow the idea hahahahah
The worst thing about CRA isn't just that it's slow, but the fact that you get a new random security vulnerability warning every other week by a peer dependency of CRA.
It brings back fond memories of learning ember js as a first frontend framework in 2014 when there still wasn't a cli and ember data was in beta. Documentation was horrible because each new version brought breaking changes. Yet I loved the added value over developping apps entirely with jQuery. Hearing from it makes me want to go and see what happened to it through the decade
It's actually much improved. Still has its issues but the DX is dramatically better IMO
Your videos just keep getting better and better. Thanks for these awesome videos
I just started learning react and this came to my rescue!
There's a trick with server side rendering with vite where you create different html files for different routes and just point it on the config file
Planter CLI can be used with Vite or CRA starter. It's still a bit rough around the edges but
it gives a starting folder structure and commands to create components, hooks, ...
The CLI is quite customisable so it doesn't force you into a certain way of working.
I only knew about CRA until last week when a developer at the company that I work in showed us how to start a project with Vite.
It was like magic happening before my eyes.
If you think vite is magic wait until you hear about parcel. It's truly zero config, you just install whatever dependency you want and the CLI does the work for you. Bundlers, transpilers, task runners, tests, ci workflow, etc... becomes a breeze.
@@charlesm.2604 Parcel is nice when it actually works, HMR is supper buggy with Parcel2
this video made me realize how outdated my javascript ecosystem knowledge is and honestly i prefer it this way... keeping up with all the constant changes and "best practices" would be a full-time job in itself!
Still waiting for tRPC in 100 seconds. Such a powerful tool and yet so underrated.
Your student here. Funny because the first one you show us in the course is CRA!!! You are a part of the issue Jeff!! /j
I agree with the slow development builds of CRA, I personally use both Vite and CRA to start my React projects, I like to use cra for my personal projects because of what it comes with, I faced an issue in vite with tailwind where hot reloading sometimes just stopped and I had to restart the server again, with CRA i never faced the problem again. I think CRA still has a lot of potential and is an amazing tool for a lot of beginners who just wanna code and worry about confusing pointless bugs later.
Exactly. I had the same issue with Vite's hot reloading + react typescript. I was forced to go back to CRA. It might be good but it still has some way to go.
I'm just thinking about switching to Vite from CRA. What is the cause of the weird pointless bugs you're talking about?
@@jackrdye i think it’s more or less the issue of its build. It works fine with TailwindCSS but sometimes it just stops hot reloading and you have to restart the server again. Its a fine switch also remember that if this issue comes up just press r in the terminal, its the shortcut to restart the server quickly.
@@abhayzz03 Thanks :)
If I am learning react should I have to learn tailwind?
Somehow these concepts are being covered when I need them the most. Thanks Eric.
WTF, I can't keep up with web development, really.. it's insane how fast things change... You learn something now, two months later, it's 'outdated'...
it was useful to me cause i thought theres only was 1 way to create-react-app ... but confusiing when it comes to what to choose and I understood 30% of what u tried to explain hehe
Just on time! Thanks for the info, didn't know that create-react-app is outdated.
Hey fireship, I'm a student & learning angular now. Need more angular videos from your end. Thanks from Iiiiiiiiindia
i would LOVE a video like this but for Native options. With SvelteKit 1.0, a re-summary of Expo/ React Native/SvelteKit Native/NativeScript/Flutter and all the other options for making an Android/IOS project off the same repo would be very very nice!
6:56 I love how honest you are XD
i have to start next week to create my first project and didn't even know you have all these options to create a react JS app. THANKS!!!
I love the fact that you have to learn a new framework ever few years in order to keep up with progress. Keeps you moving.
It’s insane. Where does this end? The landscape is just littered with all these frameworks that I’m supposed to keep up with in other to be considered an “experienced” developer.
Quality recommendations 🙏
Also obligatory “create-t3-app is the best way to use Next”
I actually expected him to at lest give T3 an honorable mention, but I guess it is just so much more than just a way to start your react app
You always create content when I need it most, the matrix is strong with your channel.
This was very timely video for me, thank you! I just tried react to build an SPA and now moved it to vite-swc-ts with no problem. Could even setup single file output with a vite plugin!
I need to take a 10 minute break and recoup after each fireship video. It`s relentless ))
Yet another great parody video Jeff! Of course no one would really believe that js development is this complicated.
As someone who only came into contact with vanilla js this is truly beyond confusing.
@Quantum Astrologer What are your confusion points?
@@quantumastrologer5599 Many more things to learn! Godspeed.
Vite is my favorite this days
This video came at the perfect time. I just migrated a project over from CRA over to the T3 stack at work and it's glorious.
I’m leaving this comment so that whenever someone like it I will come here back and see this again
Astro looks pretty nice! No JavaScript where it isn’t needed really scratches my itch for eliminating bloat and it seems like it does so without sacrificing developer experience.
1. Intro - 0:00
2. Why CRA sucks - 0:34
3. Instant dev environments - 0:58
4. Vite - 1:32
5. Nx - 2:40
6. Next.js - 3:56
7. Remix - 4:30
8. Gatsby - 5:05
9. Astro - 5:47
I literally started learning react first since I saw I’d have to relearn HTML, JS, and CSS anyways and this came up so I can disregard the first part of the tutorial I learned. Thank you, I won’t make my first noob project as slow now.
Always manage to learn something new from these short vids
Such a great video , I would like to use information like on my channel
I'm a backend developer who just started a React course and figured there was a better way to start a project than CRA. This video was at the top of my search results and it was posted less than a week ago. Thank you so much for this. I chose Vite.
For beginner is it fine?
I don't like or comment on most of the videos available on CZcams but I must say your videos deserve a like before playing the video. 🙌💛
Not part of the scope of the video, but, Vite is also my absolute favorite for building libraries.
Perfect timing, I was just researching this
We need a video that covers all features of Nx!
Thank you, learning react right now.
I don't do web dev at all and have basically no experience with it, yet somehow I am rapt with attention for every one of your videos on the topic.
pretty much the same, tbh I am just entertained by any kind of development-related content, and Fireship has a way with presentation
@@javierflores09 yeah, I stopped doing web development back in 2018 (at the time I was pretty well versed in using vue.js), but find these videos amusing, particularly for the obscure memes. Never thought I would see a Katt Williams meme in a video about react.
Unexpected fireship video turns out to be the video you always needed.
I've always felt web programming has no structure I've struggled with it as a beginner multiple options for a certain job and they don't replace, their all competing with each other...which makes learning one feel like a waste....coding sucks (how I feel rn) 😔
Wow I was just looking up videos like this last night lol thanks
Can you do a video about Bolt 5 CMS, there aren't a lot of tutorials available, in spite of being very developer friendly (and cheap to deploy)
Nx is really cool, and you can use it with next and basically any other rendering framework
Edit: ah shit now I look like a paid actor
Lol
Last project I've worked on, I used Vite template (react typescript) and after go long in the project, the vite build production Not working In mobile browser, I was stuck at this point for 3 days work and after that decided to return to create react app and it worked fine. So please be carefully when use vite !
After using nx + next + nest, i haven't been able to switch to anything else as my preference. Seamless web dev experience.
1:15 Always when I watch your videos with headphones I wonder if it is my child screaming right now or not ;P
I don’t know how to write code.
Loved the video, excellent work.
Sweet, I needed this overview. Thanks.
Interesting how you mentioned Theo but not `create-t3-app`. Lol.
Theo's burner account
Seven isn't even all! I've had good experience using parcel. It's also very pedagogical when you're getting started
been using vite since last year october and i haven’t looked back since then
I don't have experience with vite yet but do with vue and it constantly breaks on minor updates to the point where I suggest using --frozen-lockfile or ci on a public demo app (that is no no longer maintained).
Maybe vite doesn't suffer from this but my experience trying to refactor and maintain a project for 3 years (luckily no more) does not give me confidence if/when I use it for something that needs to be maintained for a long time and just rewrite the whole thing isn't an option.
As someone who just started learning React, what do you guys think is the best to do. Stick with CRA untill im more comfortable or swtich immediately? Whats the best of these alternatives for beginners?
I'm just past the beginner stage (barely past it in fact) and my view is that it's best to stick with CRA until you understand the role it plays and you can set up a basic React project with your eyes closed (just repeat it over and over until you can). Then move onto Vite. I would never have appreciated what Vite is and does without setting up 30+ CRA learning projects first.
What about create next app? What is a better alternative for next js?
This whole channel is my resume now
Based on my calculations, this video will be epic
He did the math
Does anyone know in which language the install scripts of the frameworks are written? I am in particular interested in the ability to choose with arrow keys between options and to visualize the result with icons. I looked around for some bash snippets but haven't found really good examples so far.
Vite is really awesome. ❤
Hey man, love your videos
Can you please make more videos on astro
(Maybe a tutorial video on your second channel)
Also Thank you for your content keep it up
I'm probably doing something wrong
but I had to go back to CRA from VITE for three problems:
1) in debug the breakpoints disappear
2) "jest" doesn't fully support "vitejs"
3) I had problems with the local npm packages on my pc
Please make a video about module federation! Thanks
The meme at the end lmao
0:57 Next .bs
1:32 not Next.js
2:39 Next.js without 'e' , 't' and '.js'
3:56 Next.js
4:30 !Next.js
5:06 Staticnext.js
5:46 Smol.js
there is a new took coming out every week for react i think there is a lot of scope of improvements and it will take some to stabilize and till then i am working on node.
Had just started nextJs 😂. Fireship to the moon chart 📈🔥
CRA does what it says, create a react app. Of course there are better options us as developers can opt for and that’s good. And if we are to do away with CRA specifically which option should we swap it for and what would make that a fair choice for the community at large?
Please do a course on the new next js
Was wondering why you hadn't done this yet and you did 😆
Fireship you are a light in the darkness that is Web dev😍 😂
Generative AI is the way , good video as always
Please do a video on the future of low code no code tools/platforms and some current leaders in the market
Are there issues with create-next-app as well? If so, please make a video on that too! 😄
It would be really awsome if you will make a 100 second video about SWC :)
I guess all of these 7 options are for something either heavy or customer side based applications. We have CRA for back office application which will be used by like 20 people internally. I absolutely see 0 problems with such approach. Everything works perfectly fine.
My personal pet peeve is React itself and its lack of 2 way binding, which results in more boilerplate code.
But for internal apps SSR and SSG are completely irrelevant.
I guess Vite is the best choise to scaffold any js/ts app atm.
Congrats man, now Theo is going to be smug on Twitter all day now. I'm okay with this and it pleases me.
If we have an existing project in CRA
Can we migrate to the aforementioned options
Which one would be the easiest of the lot ?
Quit using CRA 8 months ago. I was so frustrated that I never used it again. Vite is far better.
To this day I still don’t have a solid grasp on what Gatsby really provides. And people always seem to describe it in the most general vague way.
Content heavy static sites? What does that even really mean?? What’s the difference between a normal static site and a content heavy one? Why can’t I just use Vite?
There should be a disclaimer at the beginning of the video if the product recommended in a list is the product that is sponsoring that video
Great! Can you do the same type of video to NodeJs backend?
Can you tell your VS Code Icons theme?
Can u do a video on sst?
There is one main drawback that currently the AWS SDK breaks on vite. There is an open GitHub issue but still ongoing
Glad I was an early adopter of next.
For programming a neighbourhood watch app. Watch would be a nice and scalable options next or remix?