ReactJS setup with Vite, ESLint and Prettier | Ultimate guide to setup a React project.

[Music] foreign [Music] it's been because of my professional career and stuff I've been working as a full stack developer with tech JS and Java as my thing so that's why I wanted to revive this channel as well to upload videos regularly so the topics I'll be covering is will be you know related to react.js springboard Java stuff so today's video is one such of a thing related to react there so this is quite a simple and uh you know shorter video I'm doing this is many people ask me what is the best way you can start with a react app what are the tools you need so that's what I'm gonna show you today like the best uh you know productive tools you can use to set up a react app initially and how to go about it these extensions or the tools which I'm gonna mention will help you with your productivity uh you know readability of your code and stuff so it's it's it's nice to uh you know incorporate this in your daily development whether you're doing a freelancing or are professionally so yeah let's get started now the things I want to mention is we'll install a react app using wheat not create react app tool I will come back to it why we are not using it in a second second thing is we will be uh using the visual studio code for our you know coding purpose start thing is we'll be installing some of the plugins and writing some configurations to you know uh make sure our code is formatted properly and it is a good readability and stuff so that's the thing we'll get started first thing is why not create react app so if you see this this is a legacy uh react documentation if you see it's a older one basically and go to installation and create a new react app if you see they're using this tool create react app to create or get started with react.js now the thing is they are more done from this officially if you go to the newer docs these are newer doc under react.dev and if you see the recommending has to use a framework you know reactges itself is a framework but on top of that they are using uh you know they're asking us to use a framework to set up a react app and the very first thing that pops pops up when you say a framework for reactors is Nexus now Nexus is uh cool uh we can set up a reactorflow from this but if you're a beginner on getting started with the react.js development this might become a little heavier on the side because you don't or might not need a server level and stuff uh if you're or if you are using your own custom backend like springboard Java Etc or python for say so that's why um what you can do is uh will settle on a middle ground like if you can search for this tool called wheat now I understand it is vit and you wanna pronounce it as white but why it is weird we can see as simple as that it is French word called wheat which means far so that's what they claim like this is faster than the uh whatever the tools which you're using uh before like create reactor now if you go to get started section here this um is a pretty good dock which you want to go through and understand um you know how to set this up and stuff and they have the supported templates here and you can see react is one of them and the other comments all this to use to set up this read and get started with react so let's do that first uh I have this uh folder created called react setup setup react and already um ignore this part because this is deleted okay so now what I'm gonna do is I'm gonna clear this and uh and copy this and we're going to be using uh npm not yarn and make sure node is installed in your system I'm gonna I'm gonna just uh you know copy paste this uh inside our tool and after you do this it will ask you a couple of questions first thing is Project name what I'm gonna do is you see you saw that um I have deleted a folder I'm gonna rename it as the same or you can just say anything any any project name you want I'm gonna just say setup react with and of course it will give us the options for all the Frameworks that we can set it up with and we're gonna choose react and we can use a either use typescript or JavaScript in our case we are going to use JavaScript right so just click on JavaScript or select JavaScript that is out of habit click click okay now it has all the settings needed now what we're gonna do is we're gonna go into the directory and install the dependencies we have chosen right so you can just go set up react you can just Tab and you can install the dependencies first and uh it's gonna take some uh seconds not even a minute to get all the things installed right now once that is installed we'll preview an app like preview the react app however it looks like and you can see the difference between um create react app and this how it looks and we can go through the folder structures as well in a minute I'll let it install okay now it is installed properly now what you can do is um fire it up we can use npm run Dev to fire it up and you can see it is running in this thing 5173 you can just go to localhost 5173 and you see uh beat plus react and it is up and running successfully yes we have installed read hooray okay now don't want this go to another tab I'm in the same project and I'm gonna go to the thing we've created and gonna you use the shorthand to open the vs code now vs code is the most recommended editor for um you know development for reactors or any JavaScript for that sake and you can see uh there's a difference between create react app and how this folder is structured you can see in this HTML is in the root but um in in CR it was inside and you can see uh all the stuff looks good and very less resources for that uh so this is up uh what we're gonna do is for now minimize this minimize this as well and we gonna do some of the popular plugins installation so will help you to format the code and follow some of the rules right which will help you be a better developer in react so I'm gonna do install it as a Dev dependency because we don't need it in production we are using this only for our development purpose so we can do npm install iPhone dslint so it installs the eslint uh to your application and what you're going to do is we're gonna initialize this with the configuration so uh what you can do is npm inner dot eslint slash config why this is needed is we're gonna uh enforce uh code styling and some of the formatting stuff which takes care of how your code looks and professionally right so just do this and if you as soon as you click enter and it will ask you what is the purpose of you installing eslint for us it's not just for checking syntax and find problems it is for checking syntax find problems and uh tell me if there is a code cell that I need to be changed so we will pick the third option and of course we are going to be using uh JavaScript here and uh react is our framework and do your does your project use typescript of course no and where does your code run it is browser and how would you like to define a style for your project now you can define a custom style or it is recommended to um you know follow a popular style guide right so we can use use a popular style guide and you can use the Airbnb one and of course we're gonna have this configuration file as a JavaScript file and uh you can just click on this and it will show all the dependencies which you have listed which is needed for this to um configuration so you just select yes or to install it and we'll be using npm as our package manager just select that and it will start with the installation of all the dependencies okay yep now I see all the uh successfully created RTS and CGS file and if you go here you can see here and let's see uh the thing we have selected it's from Airbnb and we'll close this for now and if you go to app.jsx it's already showing us errors like why and what so I'll say this so we'll close this for now and we need some custom configuration for us for example let's say I want uh eslint to save like format the code and whenever I save a file right so and we're gonna do that before that we're gonna install uh two of the most recommended plugins or I say extensions for so what you're gonna do is I've already installed them so I'm gonna uh ask you to go and search if you can search your ESL and it is by Microsoft uh if you are not installed it install it and the second thing which I'm gonna um recommend is prettier can go ahead and install this I have it already because I do development regularly on this uh vs code so after this uh come back here come back to the root folder and create a new folder called um doubt vs code right so if you can as soon as you see vs code it is a directory for um uh you know only uh this folder basically is read only by vs code editor so you can go ahead and create a new file called settings.json now uh you might be thinking what am I doing so if you go to the settings and if you go to settings here there are settings defined here for this vs code and if you click on this Json this is the same thing it is a settings.json which will be read by our vs code so we need some custom configuration that's why I'm creating a settings.json and inside dot vs code directory so now the thing is I'll I'll add this configuration I will explain why so don't worry I'll uh add this into a GitHub gist and I will leave that link below in the description you can get it from there and just save this and what it means is um select the default formatter which we have in which we have installed the plugins and you can see format on Save is true for this editor and not only for JavaScript react but entire editor we are making it true so that whenever whatever the file you um save it will format certain things at least and this is for settings for prettier some of the settings which is required like use tabs and the tab width you can Define there are a lot of settings you can explore um will keep it simple very simple and we'll see the magic happen right I'll go to app.jsx just make sure um like I'll just save this file I'm doing control layers right now and you see here some of the things are formatted I'll do again I will undo this change you can see no semicolon here it says missing chemical and missing semicolon I'll as soon as I click on save it goes away now what is this react must be in Scope when using jsx so what you can do is uh what it means is you want to import react it is not a mandatory now but it is always a better thing at least I do it you see you see I've as soon as I imported this react there is already an import uh here you for as you state when I click on save it combines these two that's how it will make your life easier these plugins and this configuration now what it says is uh Missing an explicit type attribute four buttons so we can fix that by using type is equals to um submit and you see I've used single code as soon as I save this it says it is turned into double quotes now the thing is it says count is already defined because we have account here it's not an issue but you can always change this and yeah that is it and this is this is the relative path you can fix it anywhere now I'll minimize this one and open the browser minimize this as well and we have some error and you can see and I don't need this basically I will remove this and you can see that I have the the wheat logo is gone that's fine I just wanted to show you we can fix it but um I don't want to make this video any longer so this this app is up and running now the one thing uh one advantage of wheat is because it says it is fast it comes up with a hard reloading Factor what I mean by hot reloading is as soon as you make some change let's say this idea there's a paragraph here I clear this and I click on save as soon as see this this component is re-rendered and I uh under it click on save as soon as I click on save it is open here so that's how we can enforce the code styling and formatting and stuff um here for example let's say I have some deep viewer and I have some H1 heading this is heading now I'm not done anything so as soon as I add this and click on save you see this is entirely this thing now I can do one more thing as well just to show you um I can say this is paragraph paragraph and I click on Save see it is formatted and we see as soon it is reflected here so that's how this plugins and uh you know this configuration works for you uh and help you to write a clean and better code it's uh you know better as we said earlier it's a good practice to have this since your early stage of development so that it will make you a better developer so yeah that's it for this video if you have any questions drop those uh in the comments below I will try to answer all of them and I have some exciting react.js projects lined up which I'll be uploading on this channel so stay tuned Please Subscribe and uh yeah thank you

Channel: Caffeine Coder

Views: 4,672

Keywords: ReactJs, React, Vite, Eslint, Prettier, Vscode, React setup, ReactJs setup, Best ReactJs, Create react app, CRA, Visual studio code, Visual studio, React configuration, Vite configuration, 2023

Id: TYxEydiqazc

Length: 16min 9sec (969 seconds)

Published: Wed Jul 19 2023