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

[@rumplstiltztinkerstein]

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

[@theyreMineralsMarie]

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 😂

[@LimitedWard]

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.

[@wundergraph]

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 🙏🏼

[@kairb]

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.

[@ayushvyas3401]

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

[@jineethehandsome1608]

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.

[@eldos704]

01:00 - StackBlitz, CodeSandBox 01:33 - Vite 02:40 - Nx 03:57 - NextJS 04:32 - Remix 05:06 - Gatsby 05:48 - Astro

[@anstbt]

thanks

[@phantomwizard5892]

Your videos just keep getting better and better. Thanks for these awesome videos

[@jeandelafuente1]

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!!!

[@jozzeh]

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.

[@evilmorty1197]

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

[@funnygames93]

Just on time! Thanks for the info, didn't know that create-react-app is outdated.

[@fred.flintstone4099]

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]

@@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".

[@L1Q]

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!

[@stijndcl]

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.

[@H0mework]

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.

[@cverde1234]

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

[@Exilum]

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.

[@sonnetsoftheapocalypse]

I just started learning react and this came to my rescue!

[@Ilya60623]

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!

[@reinoob]

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

[@thebongtwister]

Hey fireship, I'm a student & learning angular now. Need more angular videos from your end. Thanks from Iiiiiiiiindia

[@elco7956]

Always manage to learn something new from these short vids

[@NeverOutslayed]

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.

[@NOCDIB]

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]

For beginner is it fine?

[@andreschou9560]

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

[@thienhuynh7962]

Still waiting for tRPC in 100 seconds. Such a powerful tool and yet so underrated.

[@sum1179]

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

[@GabrielSoldani]

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.

[@krismatic_]

Somehow these concepts are being covered when I need them the most. Thanks Eric.

[@Clipppppclop]

Wow I was just looking up videos like this last night lol thanks

[@bitbyte-sb9re]

I don't like or comment on most of the videos available on KZbin but I must say your videos deserve a like before playing the video. 🙌💛

[@tobecontinued5757]

Perfect timing, I was just researching this

[@abhayzz03]

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]

If I am learning react should I have to learn tailwind?

[@davien001]

Thank you, learning react right now.

[@codeman99-dev]

Sweet, I needed this overview. Thanks.

[@pesterenan]

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

[@semmu93]

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!

[@Felipera_]

Not part of the scope of the video, but, Vite is also my absolute favorite for building libraries.

[@NielsGx]

I hate webdev, why is there 300 languages with 3000 frameworks and 30000 apis

[@GreenZinfidel]

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.

[@caesarazealad]

I don’t know how to write code. Loved the video, excellent work.

[@kentmiggalen9756]

6:56 I love how honest you are XD

[@zlatanonkovic2424]

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]

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.

[@bishopoftroy]

I need to take a 10 minute break and recoup after each fireship video. It`s relentless ))

[@BHVampireLF]

You always create content when I need it most, the matrix is strong with your channel.

[@suraj-ram7488]

We need a video that covers all features of Nx!

[@JohannesBrodwall]

Seven isn't even all! I've had good experience using parcel. It's also very pedagogical when you're getting started

[@fabianmarcus]

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.

[@Jebusankel]

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.

[@northernstar3956]

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

[@wolffparkinson]

After using nx + next + nest, i haven't been able to switch to anything else as my preference. Seamless web dev experience.

[@adivmt]

Vite is my favorite this days

[@anshukmishra4520]

Now I love vite thanks Fireship 🙏🙏🙏🙏

[@boring-person-rishabh]

Had just started nextJs 😂. Fireship to the moon chart 📈🔥

[@_Khrix]

Great! Can you do the same type of video to NodeJs backend?

[@theChandruR]

Please do a video on the future of low code no code tools/platforms and some current leaders in the market

[@cyberhighdiver]

Was wondering why you hadn't done this yet and you did 😆

[@farukkhan6324]

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.

[@Leto2ndAtreides]

It's interesting that nested layouts took so long to get active support.

[@harmmeijer6582]

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.

[@kale.online]

This whole channel is my resume now

[@abiriasdevelopmentchannel1512]

It would be really awsome if you will make a 100 second video about SWC :)

[@code2287]

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) 😔

[@BTS-BehindTheScenes13]

Such a great video , I would like to use information like on my channel

[@jesseparrish1993]

Glad I was an early adopter of next.

[@muditbharadwaj4508]

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

[@Roman-of9pl]

I guess Vite is the best choise to scaffold any js/ts app atm.

[@killerlion6]

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.

[@RicoGarza00]

Please do a course on the new next js

[@developer_hadi]

What about create next app? What is a better alternative for next js?

[@t3dotgg]

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

[@desireco]

Generative AI is the way , good video as always

[@filmfortbe]

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)

[@orangenal]

Are there issues with create-next-app as well? If so, please make a video on that too! 😄

[@TribalTapestry]

For programming a neighbourhood watch app. Watch would be a nice and scalable options next or remix?

[@allezvenga7617]

Thanks for your sharing

[@fryc.dominik]

What about a video about web components? How to create web components library, Lit vs Stencil and so on

[@MartinRojas]

There is one main drawback that currently the AWS SDK breaks on vite. There is an open GitHub issue but still ongoing

[@NxVernxual]

Thanks for thanking me :)

[@cauebahia]

Please make a video about module federation! Thanks

[@MailsonWei]

could you do a video about where to get a ton of data that can be use on the web application?

[@tiedye001]

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

[@notsojharedtroll23]

Lol

[@dingus4138]

Already had me dying in the first 20 seconds, you know it is going to be a hit.

[@LoveWithAdrish]

Vite is really awesome. ❤

[@operative3000]

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?

[@thedigitalceo]

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?

[@aledlaczego]

1:15 Always when I watch your videos with headphones I wonder if it is my child screaming right now or not ;P

[@priolo22]

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

[@radi4nt_]

Unexpected fireship video turns out to be the video you always needed.

[@porroapp]

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.

[@nissimdsilva8076]

If we have an existing project in CRA Can we migrate to the aforementioned options Which one would be the easiest of the lot ?

[@Kennedy_]

I primarily write backend python, im overwhelmed already

[@DaveSohan]

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

[@shsh01212]

But there’s templates for cra to set up ts and tailwind - what the purpose in using other tools then?

[@wisdomelue]

been using vite since last year october and i haven’t looked back since then

[@thatboymoti]

Literally started yesterday from npm to npx

[@lucaszapico926]

Fireship you are a light in the darkness that is Web dev😍 😂

[@LAVISHGOYAL]

Can you tell your VS Code Icons theme?