7 better ways to create a React app
Ғылым және технология
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-started/react-...
- Create React App Github Issue github.com/reactjs/reactjs.or...
- 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
Пікірлер: 568
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.
@fullmetaltheorist
Жыл бұрын
Web dev is a mess.
@murilloparreira5333
Жыл бұрын
That's why I loved turbo and html over the wire from the Rails team. No need for these shenanigans
@ko-Daegu
Жыл бұрын
@@fullmetaltheorist front-end web dev
@imrobbinganyonewhotalkstom4881
Жыл бұрын
This comment thread is a mess
@beefbox
Жыл бұрын
@@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.
@ach31337
Жыл бұрын
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...
@DarkzarichV2
Жыл бұрын
Tech singularly
@javierflores09
Жыл бұрын
@@ach31337 goes to show how that turned out, considering I didn't know about knockoutjs until now lol
@mdmathewdc
Жыл бұрын
Can Vite be used with Webpack?
@uziboozy4540
Жыл бұрын
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.
@priolo22
Жыл бұрын
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
@ogredev
Жыл бұрын
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!
@brandondev8745
Жыл бұрын
I remember learning typescript with fireship in about 10 minutes. While other courses took like 1.5 hours to explain the same, but worst
@goran5844
Жыл бұрын
@@brandondev8745 Fireships Websocket in 100 Seconds video taught me more about websocket than other 10+ minute videos. This channel knows only quality
@AndroidChileDemos
Жыл бұрын
@@brandondev8745 Yes, I agree, it's amazing how @fireship explains you better and faster than chatgpt. Could we say that @Fireship is John Connor ? 🤔
@s1nistr433
Жыл бұрын
Moral of the story: Use vue
@wundergraph
Жыл бұрын
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
@sle6423
Жыл бұрын
Have you tried Deno?
@Abrifq
Жыл бұрын
@@sle6423add permission to ask the question
@abahiduh3246
Жыл бұрын
u cannot understand js with the mindset of start building immediately.... you have to take time to understand the unseen " the implicit"
@keemkorn
Жыл бұрын
@@abahiduh3246 no
@TheRanguna
Жыл бұрын
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.
01:00 - StackBlitz, CodeSandBox 01:33 - Vite 02:40 - Nx 03:57 - NextJS 04:32 - Remix 05:06 - Gatsby 05:48 - Astro
@anstbt
2 ай бұрын
thanks
I hate webdev, why is there 300 languages with 3000 frameworks and 30000 apis
I haven't looked back ever since I switched from CRA to vite, so easy to setup and blazing fast compared to CRA
@feeadftth
Жыл бұрын
I think i'm the only one still using CRA... Any tips on migrating to Vite?
@ruriko1237
Жыл бұрын
@@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.
@coldestbeer
Жыл бұрын
CRAy more 👶🏻
@VeniMitev
Жыл бұрын
@@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...
@mashup_editor
Жыл бұрын
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
@illegalsmirf
Жыл бұрын
If JavaScript is any good, why are JavaScript devs constantly changing and rewriting it?
@navuyi3243
Жыл бұрын
@@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.
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.
Your videos just keep getting better and better. Thanks for these awesome videos
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!!!
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!
Just on time! Thanks for the info, didn't know that create-react-app is outdated.
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.
@sayon1995
Жыл бұрын
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.
@westingben2341
Жыл бұрын
there's a package called create-react-sandbox that makes a minimal react environment that you can mess around with react in
I just started learning react and this came to my rescue!
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
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
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!
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
Hey fireship, I'm a student & learning angular now. Need more angular videos from your end. Thanks from Iiiiiiiiindia
Somehow these concepts are being covered when I need them the most. Thanks Eric.
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
@0oEo0
Жыл бұрын
It's actually much improved. Still has its issues but the DX is dramatically better IMO
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 can highly recommend Vite, not only for React projects, but for any type of JavaScript or TypeScript project.
@groovebird812
Жыл бұрын
and in 6 months comes another new tool :D
@fred.flintstone4099
11 ай бұрын
@@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".
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
Wow I was just looking up videos like this last night lol thanks
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.
I don't like or comment on most of the videos available on KZread but I must say your videos deserve a like before playing the video. 🙌💛
Sweet, I needed this overview. Thanks.
Thank you, learning react right now.
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.
@I_killed_that_beard_guy
4 ай бұрын
For beginner is it fine?
Perfect timing, I was just researching this
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.
@neofox2526
Жыл бұрын
What resources did you learn next from?
@Exilum
Жыл бұрын
@@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.
@jaideepshekhar4621
Жыл бұрын
Did you try Svelte?
@Exilum
Жыл бұрын
@@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.
@arvi8843
Жыл бұрын
@@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.
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.
6:56 I love how honest you are XD
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.
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.
Not part of the scope of the video, but, Vite is also my absolute favorite for building libraries.
I don’t know how to write code. Loved the video, excellent work.
I need to take a 10 minute break and recoup after each fireship video. It`s relentless ))
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.
@charlesm.2604
Жыл бұрын
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.
@ItalianVoid
Жыл бұрын
@@charlesm.2604 Parcel is nice when it actually works, HMR is supper buggy with Parcel2
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.
@matija-ziberna
Жыл бұрын
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.
@jackrdye
Жыл бұрын
I'm just thinking about switching to Vite from CRA. What is the cause of the weird pointless bugs you're talking about?
@abhayzz03
Жыл бұрын
@@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.
@jackrdye
Жыл бұрын
@@abhayzz03 Thanks :)
@I_killed_that_beard_guy
4 ай бұрын
If I am learning react should I have to learn tailwind?
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.
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.
@javierflores09
Жыл бұрын
pretty much the same, tbh I am just entertained by any kind of development-related content, and Fireship has a way with presentation
@LJdaentertainer
Жыл бұрын
@@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.
You always create content when I need it most, the matrix is strong with your channel.
We need a video that covers all features of Nx!
Seven isn't even all! I've had good experience using parcel. It's also very pedagogical when you're getting started
Now I love vite thanks Fireship 🙏🙏🙏🙏
Such a great video , I would like to use information like on my channel
Great! Can you do the same type of video to NodeJs backend?
For programming a neighbourhood watch app. Watch would be a nice and scalable options next or remix?
Had just started nextJs 😂. Fireship to the moon chart 📈🔥
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
When the version (currentVersion +1) and then (currentVersion +2) versions of these tools come out, will they be backward-compible or will they have breaking changes so that you will have to spend the year to fix existing code only to preserve existing functionality?
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.
@ngusumakofu1
9 ай бұрын
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.
After using nx + next + nest, i haven't been able to switch to anything else as my preference. Seamless web dev experience.
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.
One issue is using WASM in your react project. I could only ever manage getting it working with Webpack from CRA. Still figuring how to get it working on Vite.
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)
Vite is my favorite this days
Yet another great parody video Jeff! Of course no one would really believe that js development is this complicated.
@quantumastrologer5599
Жыл бұрын
As someone who only came into contact with vanilla js this is truly beyond confusing.
@erkeliwood6037
Жыл бұрын
@Quantum Astrologer What are your confusion points?
@sondernfy
Жыл бұрын
@@quantumastrologer5599 Many more things to learn! Godspeed.
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
Thanks for your sharing
Was wondering why you hadn't done this yet and you did 😆
Glad I was an early adopter of next.
If we have an existing project in CRA Can we migrate to the aforementioned options Which one would be the easiest of the lot ?
There is one main drawback that currently the AWS SDK breaks on vite. There is an open GitHub issue but still ongoing
It's interesting that nested layouts took so long to get active support.
Generative AI is the way , good video as always
Vite is really awesome. ❤
Please do a video on the future of low code no code tools/platforms and some current leaders in the market
Can you tell your VS Code Icons theme?
It would be really awsome if you will make a 100 second video about SWC :)
Are there issues with create-next-app as well? If so, please make a video on that too! 😄
Please do a course on the new next js
Excuse me, but did I miss the moment they dropped typescript support in CRA? All the time I used it (meaning until a month ago) ts was available out of the box. What are you talking about, mr. Fireship?
Quality recommendations 🙏
@t3dotgg
Жыл бұрын
Also obligatory “create-t3-app is the best way to use Next”
@yourplayer5
Жыл бұрын
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
Is there a no code drag and drop builder for REACTJS? nocode is the way forward
But there’s templates for cra to set up ts and tailwind - what the purpose in using other tools then?
I love you fireship!
Thanks for thanking me :)
Unexpected fireship video turns out to be the video you always needed.
What about create next app? What is a better alternative for next js?
Do you have any plan for Scalia on pro ?
I'm supposedly an advanced user and still find somethings confusing. Vite isn't like a webpack replacement? So can't we use Vite + Next.js?
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.
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
Please make a video about module federation! Thanks
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?
Nice insight
What do people think of the t3 stack?
This whole channel is my resume now
could you do a video about where to get a ton of data that can be use on the web application?
One thing that is keeping me away from vite is the lack of error layout, like the one CRA has...
good video, i'd go with ng new
1:15 Always when I watch your videos with headphones I wonder if it is my child screaming right now or not ;P