7 better ways to create a React app

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

[@murifox_]

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

[@smallcatgirl]

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.

[@segfault_000]

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]

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

[@eldos704]

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

[@atabiti_1337]

thanks

[@turk_bleda]

I wish I could staple this comment for my personal KZbin comment section.

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

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

[@musilicks]

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

[@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

[@phantomwizard5892]

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

[@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

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

[@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

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

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

[@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

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

[@funnygames93]

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

[@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

[@aoe2dog]

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

[@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

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

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

[@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

[@kentmiggalen9756]

6:56 I love how honest you are XD

[@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

[@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 :)

[@abhayzz03]

@I_killed_that_beard_guy its not a necessity but i will say do it. Tailwind is majorly used in many industry level projects right beside bootstrap, both are really beneficial to learn

[@thienhuynh7962]

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

[@elco7956]

Always manage to learn something new from these short vids

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

[@carvalho1990]

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'...

[@krismatic_]

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

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

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

[@tobecontinued5757]

Perfect timing, I was just researching this

[@NielsGx]

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

[@MatttKelly]

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.

[@matioszkea2524]

Why not

[@69k_gold]

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?

[@execration_texts]

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.

[@GuilhermeHCardozo]

Because js is a really trash language lol, and now the others just follow the idea hahahahah

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

[@bishopoftroy]

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

[@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. 🙌💛

[@davien001]

Thank you, learning react right now.

[@sonnetsoftheapocalypse]

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

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

[@codeman99-dev]

Sweet, I needed this overview. Thanks.

[@Clipppppclop]

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

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

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

[@adivmt]

Vite is my favorite this days

[@Dev-Siri]

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

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

[@solutionanalysts1]

Unlock the secrets to efficient React development! Explore 7 better ways to create a React app, from tools and techniques to best practices that boost your productivity.

[@suraj-ram7488]

We need a video that covers all features of Nx!

[@caesarazealad]

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

[@musilicks]

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?

[@thatboymoti]

Literally started yesterday from npm to npx

[@skilledmohammed]

I’m leaving this comment so that whenever someone like it I will come here back and see this again

[@Felipera_]

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

[@boring-person-rishabh]

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

[@BHVampireLF]

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

[@JohannesBrodwall]

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

[@kale.online]

This whole channel is my resume now

[@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)

[@anshukmishra4520]

Now I love vite thanks Fireship 🙏🙏🙏🙏

[@RicoGarza00]

Please do a course on the new next js

[@zastvari2730]

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?

[@GregDowns]

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.

[@radi4nt_]

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

[@developer_hadi]

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

[@aledlaczego]

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

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

[@BTS-BehindTheScenes13]

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

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

[@wolffparkinson]

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

[@jesseparrish1993]

Glad I was an early adopter of next.

[@TribalTapestry]

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

[@cyberhighdiver]

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

[@LoveWithAdrish]

Vite is really awesome. ❤

[@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

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

[@Roman-of9pl]

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

[@abiriasdevelopmentchannel1512]

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

[@theChandruR]

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

[@rene6194]

i am new have no idea what he is talking about. Could someone please share some recourses to build up a deeper understanding.

[@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 ?

[@anch95]

As a SD newbie myself, I literally found myself scouting for scripts that can quickly create an app skeleton instead of downloading the literal 100s of modules and random shit, every time I need a blank slate. I ended up downloading PNPM, that uses symlinks to global modules instead of bloating with copies. It still doesn't work as I expected.

[@pixelsonic8610]

@Fireship is it possible to use python as the backend for a frontend react app? If so I would love a tutorial on it!

[@ServetTonga]

you can use any backend language for a react app, it's worth to know CORS

[@Jishanthegodev]

Yes

[@mustafadabah7377]

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 !

[@jerondiovis6128]

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?

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

[@draido-dev]

Based on my calculations, this video will be epic

[@michaelanthony4750]

He did the math

[@lucaszapico926]

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

[@cauebahia]

Please make a video about module federation! Thanks

[@danvilela]

One thing I don't get about Astro.. If you need interactivity, you'll add React. Wouldn't that make the performance go down to React level? Cause all I see is the benchmarks from a blank astro project, which doesn't seem to abide to a real world use.

[@LAVISHGOYAL]

Can you tell your VS Code Icons theme?

[@Leto2ndAtreides]

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

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

[@MartinRojas]

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

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

[@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

[@_Khrix]

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

[@desireco]

Generative AI is the way , good video as always

[@thesanjithkumar]

Can u do a video on sst?

[@Kennedy_]

I primarily write backend python, im overwhelmed already