7 better ways to create a React app

Подписаться 3,1 млн

Просмотров 524 тыс.

50% 1

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

Наука

Опубликовано:

2 фев 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 571

@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

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

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

@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

@phantomwizard5892 Год назад

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

@funnygames93 Год назад

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

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

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

@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

@sonnetsoftheapocalypse Год назад

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

@elco7956 Год назад

Always manage to learn something new from these short vids

@eldos704 Год назад

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

@anstbt 3 месяца назад

thanks

@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

@krismatic_ Год назад

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

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

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

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

@tobecontinued5757 Год назад

Perfect timing, I was just researching this

@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

@Clipppppclop Год назад

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

@davien001 Год назад

Thank you, learning react right now.

@codeman99-dev Год назад

Sweet, I needed this overview. Thanks.

@thebongtwister Год назад

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

@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

@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 5 месяцев назад

For beginner is it fine?

@bitbyte-sb9re Год назад

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

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

@thienhuynh7962 Год назад

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

@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

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

@bishopoftroy Год назад

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

@kentmiggalen9756 Год назад

6:56 I love how honest you are XD

@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

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

@BHVampireLF Год назад

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

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

@I_killed_that_beard_guy 5 месяцев назад

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

@Felipera_ Год назад

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

@cyberhighdiver Год назад

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

@caesarazealad Год назад

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

@suraj-ram7488 Год назад

We need a video that covers all features of Nx!

@NielsGx Год назад

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

@MatttKelly 25 дней назад

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 22 дня назад

Why not

@anshukmishra4520 Год назад

Now I love vite thanks Fireship 🙏🙏🙏🙏

@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 10 месяцев назад

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.

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

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

@NxVernxual Год назад

Thanks for thanking me :)

@boring-person-rishabh Год назад

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

@adivmt Год назад

Vite is my favorite this days

@LoveWithAdrish Год назад

Vite is really awesome. ❤

@kale.online Год назад

This whole channel is my resume now

@radi4nt_ Год назад

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

@BTS-BehindTheScenes13 Год назад

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

@allezvenga7617 Год назад

Thanks for your sharing

@desireco Год назад

Generative AI is the way , good video as always

@jesseparrish1993 Год назад

Glad I was an early adopter of next.

@the_real_briel Год назад

I love you fireship!

@Leto2ndAtreides Год назад

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

@_Khrix Год назад

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

@JohannesBrodwall Год назад

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

@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

@theChandruR Год назад

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

@aledlaczego Год назад

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

@wolffparkinson Год назад

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

@abiriasdevelopmentchannel1512 Год назад

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

@RicoGarza00 Год назад

Please do a course on the new next js

@orangenal Год назад

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

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

@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

@uditkatyal5090 Год назад

awesome content sir always!

@cauebahia Год назад

Please make a video about module federation! Thanks

@bignah4872 Год назад

Sick!

@shateq Год назад

Nice insight

@dingus4138 Год назад

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

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

@fryc.dominik Год назад

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

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

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

@ggwp5787 Год назад

For a newbie like me, vite it is.

@developer_hadi Год назад

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

@MailsonWei Год назад

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

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

@lucaszapico926 Год назад

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

@thatboymoti Год назад

Literally started yesterday from npm to npx

@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

@RRJR720 Месяц назад

good video, i'd go with ng new

@adaliszk Год назад

Would have been fun to see an extra option with Qwik to be truly on the cutting edge! 😇

@user-pq2gz7ec2y 7 месяцев назад

cool video)

@TribalTapestry Год назад

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

@draido-dev Год назад

Based on my calculations, this video will be epic

@michaelanthony4750 Год назад

He did the math

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