Create React App vs. NextJS vs. Vite

hey guys how's it going I'm back here with another video and today I decided to bring this video where I'm going to be comparing and contrasting create direct app Vite and next.js so all three of those are extremely useful tools that are very popular right now in the industry and they're mainly used to generate a react application however despite their similarity and functionality and purpose they are very different and there's definitely pros and cons into using them and I see it as of right now that the most widely used out of those it's also the worst option so for that reason I wanted to make this video to provide you guys with my opinion obviously not everything you should follow straight from what I'm saying you should make your own decisions but I'm gonna lay out what I think and my thoughts and uh you guys can make a decision based on that so before we get into the video if you guys could leave a like And subscribe I would massively appreciate it it will help push my videos to more people and I'll be eternally grateful if you guys could do so so with that in mind let's get into the video [Music] [Applause] [Music] [Applause] thank you so first of all let's start out with the most popular one and the big one that everyone knows which is create react app so what happens is this was actually initially developed by Facebook and it was meant as a tool for you to just generate and bootstrap a react application in a very simple way in order for you to get started working on your react apps so Facebook kind of knew that when you one of the main issues with starting a new technology or a new framework is the fact that sometimes you have a lot to learn in the beginning it's annoying to have to configure a bunch of stuff before even starting to learn the syntax it's also annoying to have to handle stuff like Babel or webpack so what Facebook did is they created this tool which would allow developers to just go into their command line type in a command generate a react application really quickly which runs perfectly fine inside of their computer and for that purpose create direct top is actually amazing so like I said it literally has zero configuration in a lot of my videos I use create react app because of the Simplicity of it you just run the command create red tapping to your computer it will generate an application you don't need to deal with Babel you don't need to do it with webpack or any other build tools it's all done for you also another smaller thing but also really important is that the fact that create react app allows you to have live reloading of your your application so like just like if you're building a backend in node.js as an example you have to install an external package called nodemon and it will automatically refresh every time you save the page that already happens with uh create react app right when you're writing your react application you make a change and you save the file it will reload your browser to represent the new changes inside of your website so that's a small thing but it's pretty cool that correct react app already put that because now it's a staple in the industry uh I can't imagine having to to reload everything every time I make a change right it's pretty nice and fast it decreases the time you have in developing your applications also to some extent create direct app generates optimized bundles of your react application that ensures that your react app is running at some standard of performance the thing is create react app is amazing for um beginners but it's the thing is it's just for beginners and when I say beginners especially recently I realized that it's actually for people who are literally just starting to learn react because the limitations of create react app is out of this world so basically some of the main cons of using Create direct app is the first one is a big one which is it doesn't provide any support for server-side rendering especially in today's world server side rendering is really important because it helps you with your SEO it allows search engine crawlers to properly index your pages meaning that it will rank higher in search engines like Google right and this is extremely important nowadays which uh other Frameworks and technology and tools like nextges which is what we're going to be talking next I already allow you to do that so it's actually their main purpose so uh redirect app not having any support for that makes it very hard as an option to choose also one of the main benefits of create react tab which is the fact that it has zero configuration is one of its main problems because if you want to make later on any sort of change in your Bible or any changes on webpack uh it will be really hard because it was all made already for you right and it's made in a way such that uh you don't have to deal with anything which again makes it harder for you to change in the future if you need to to do so you would have to eject your app and that would literally expose all of your configuration files so what I'm just trying to say is that it will overly complicate what um if you were to build your own configuration it would be much easier so that's definitely one of its bigger problems but the thing is Crate work tap is good for a beginner if you're a beginner don't be afraid of using it but because of its limitations it has even been recently removed as a recommendation from the react team in the documentation I think that was mainly fueled by uh a a friend of the channel called Theo from the Ping Labs Channel uh he was very passionate about this and I saw that he made a PR for the react team and they actually removed the the recommendation for create react app so maybe nowadays we'll see it being used even less uh but it's definitely something that I wanted to mention and those are the pros and cons so now let's talk about nextgs so before we talk about white I actually want for each of the tools to actually show you guys how to build an application or generate an application in react using those tools so let's start off with create react app it's as simple as it can be all you have to do is install node.js into your computer and you would come over here to an empty folder I'm in vs code as you can see and all you have to do is actually just run npx create react app just like this then you could put a folder for which your application will be created since I'm already inside of a folder I'm just going to put a dot and press enter and it will start generating an application for us and when it's done as you can see uh we'll have over here a simple application in react uh it has a bunch of Border plate files with some code as you can see but it's pretty much done you don't have to have any configuration done it's all done for you and all existing as you can see inside of your application so this is how you generate with create react app now let's start talking about nextgs so next JS is nowadays one of the most popular tools out there in the web dev community and um there's a reason for it because one of the main problems with create rectap is completely solved with nexgs which is the idea of server side rendering so next was developed by versel to allow developers to build applications with server-side rendering static generation and API routes it's a simple way for you to to read your API and your front end without having its main focus on client-side rendering which is what create react did now some of the main like obvious benefits of this is the fact that it improves your SEO by a lot like it's it it will allow search engine web crawlers to index your page and just read all of the content of it uh if you want a deeper explanation to why server side rendering does this I do have videos on xjs which I go more in depth but keep in mind that this is one of the main benefits of server side rendering and Nexus makes it possible for you to do so also nexjs is a very simple built-in uh implementation of API routes which facilitates development of your backend I think it's pretty simple to integrate the your front end and your back end together using next and uh it's just a nice thing it it decreases the time you need to to organize and and develop your your full stack app also to increase performance next.js automatically splits and bundle those your code into chunks so that it will optimize the reloading time of your application so it has increased performance in that sense and in other senses as well that are directly related to its server-side rendering functionality now what are the negatives of next Jazz well to be honest it's better than create react app in my opinion in almost every sense and the only negative would be to say that it has a steeper learning curve to some extent so if you're a real beginner I would still recommend you to start learning react without next.js and by using something like create react app and then transitioning into learning something like server-side rendering in react it has different syntax to some extent it has some functions that you need to learn some abstractions that you have to learn so to some extent it can take a bit of time to learn it but honestly I don't even know if that's a big con because uh everything should take time to learn right so I definitely think netjs is a really good option compared to create track tab which is what we just talked about it is definitely a winner so before we get into fight let's go over how to generate a next JS application inside of your computer so similar to create direct app we're going to be using a command in our command line tool and it's actually very similar it's called We're going to run npx and then run create next app just like this and then a DOT and as you might imagine it would generate a nextgs application I'll be back when it's done generating and as you can see when it's done this is how your next.js application will look like so there's a bunch of folders that are a bit different from create react app as you can see we have a Pages folder and this is meant for generating different routes in your application it's actually pretty cool if you want to generate a new routes in your react App instead of using something like uh reactor Dom which is very common in create react app you actually just have to create a new file here like if I wanted to create a home page I can just do this now this is not a tutorial on next yes but I just wanted to show you this and there's a bunch of other stuff as well again there's not a lot of configuration and next.js but you can do so if you want to um which is pretty cool finally we're going to be talking about Vite which out of the three options is actually the one that I have had least experience with but recently I've been working with it and I actually pretty enjoyed it and I think I might be using it for my future videos as well so white was actually initially created by the creator of ugs and it was meant to provide us with a build tool and development server which allows us to have faster development time so its main positive right off the bat is the fact that it uses the native ecmascript modules feature in modern browsers which further allows us to have faster development and build times that means that White's development server is incredibly fast and that's definitely a positive and I noticed that so definitely keep that in mind also white uses rollup which is a JavaScript module bundler and that allows it to to have smaller production builds so it uses this tool that is really useful because it aligns with the format that we just mentioned that white uses as well which is ecmascript or ES modules it follows the same thing and overall just helps with performance and size in our projects also invite you have very flexible configurations so it's kind of in between a create direct App application which there's no any no configuration to an application that you build from scratch so it's right in the middle where you can add configuration if you want to you can configure whatever you want but it's also it helps you with a predetermined configuration as well so I would say that Vite is actually more for developers that prioritize speed and uh kinda I would recommend it to be like for medium to large scale projects I wouldn't say that a beginner needs it but honestly if you want to learn as a beginner it works just as well as create react app so even better actually so I would definitely recommend doing it as well okay everyone so now let's see how we can generate application using Vite now one thing I want to say which I completely forgot to say uh some people complain that I say Vite and the incorrect pronunciation it's actually pronounced Veet I know for a fact I already I know this it's even in their website uh I just amused to say invite for no reason my first language is not English so I don't know if that's even an excuse but you get what I mean I like to say a fight uh the best I can do is just tell you guys that the actual pronunciation is Veet I'm just used to saying it that way so that's why I'm being calling it that way but yeah that's basically it let's generate an application using this so the way we do this is by running npm we ignore that the way I do this call me if you need create Vite press enter it's going to ask for a name for our project I'm gonna call this I don't know social media website press enter it's going to ask us what do we want to do with value right Vite can actually be used for not just a react application it can be used to create view it was created by the owner review so obviously it wouldn't be just for react uh but the important thing is that we can do it with reacts I'm going to choose react over here uh do we want it with typescript with JavaScript see there's like so many options that we can use so it's a pretty good tool actually I'm going to choose typescript just to make it different uh and as you can see here it is it has it's super fast which is insane right there was basically no time necessary like for me to actually run this the other ones took a while to install everything this one is pretty cool and this is how the format actually looks like ignore all the red lines it's just yes code being stupid but yeah this is how the app kind of looks like again if you want to configure they allow you to configure a bunch of stuff they have a vite.config.ts file as well if you're using typescript but yeah that's that's basically how you generate your application using Veet or Vite but yeah that's basically it so fine finally you might be asking so which one is best well like I said each of them have their own purposes and their own use cases I would say that create track tap can be used for beginners if you're anything above a beginner you shouldn't use a great track tab we don't need the exception of people like me who are producing content for beginners uh but if you're building a real application you should be using something other than create direct app because it's simply not that good of a tool now as in a comparison between Vite and xjs I would say that it really doesn't matter it depends on what you want both of them support server-side rendering which is the important part here now white has a a different approach to server-side rendering compared to next JS which I honestly even prefer but the thing is it doesn't really matter now at this point you can choose whatever whichever one you want because both of them have really nice use cases the thing is I've seen xjs being used more so I would say maybe for jobs in small startups or small size to medium size companies maybe an xgs can be a better option that's all up to you and I provided you guys with my opinion so that's that's basically it thank you so much for watching my video If you enjoyed it please leave a like down below and comment what you want to see next subscribe because I'm posting uh every week and I'll massively appreciate it and yeah that's that's basically it really hope you guys enjoyed it and I see you guys next time [Music] [Applause] [Music] [Applause] thank you [Music] [Applause] [Music]

Channel: PedroTech

Views: 55,961

Keywords: computer science, crud, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, create react app, create-react-app, vite, nextjs, cra, cra vs nextjs, vite vs nextjs, vite tutorial, nextjs tutorial, react tutorial beginner, react rant, theo pinglabs

Id: mLNq3SanPkk

Length: 15min 40sec (940 seconds)

Published: Wed Mar 22 2023