React JS v19 Tutorial #2: Installation & Creating Our First Website with React.js in Hindi (2024)

Hello, what's up guys, my name is Vinod Bahadur Thapa and today in this video we will see ReactJS version 19 installation. So guys, today in this video we will see our first website using ReactJS, which you will see when you run it. Welcome Vinod Bahadur Thapa, hello world, welcome, your name, hi, your name. You can write anything, I will do it for you today. So today's video is literally very important because today we will see how we can install React on our computer screen. And what are the things we need to keep in mind before installing React. So guys, we are going to cover all that today in this video, so without any delay, let's go to our computer screen. Alright guys, so we have come to our computer screen, creatingreact.js project. We have already covered these three particular sections in this video. So these two things we have to cover today, that is setting up the development environment and creatingreact.js project. So guys, let's set up our development environment. In which, before installing React.js, we should have node.js. No matter what, node.js is very important because it will not work without it. And then second thing is we need to have one code editor. Now this is totally up to you. Look, there is no alternate for node, you will have to use node.js. But, this part of Visual Studio Code is totally up to you. If you want to use Sublime Text Editor, you can use it. Atom, I guess it is discontinued now, but still people use it. If you want, you can use it. Then there is JetBrains, NeoVim, Notepad. I guess many people still use Notepad and Notepad++. So you can use that too. There will be many such code editors that I have missed. But if you prefer, then you can code on your own code editor. There is no such thing in this, but we need it. Alright, these are some things that I will tell you. But first, let's do this work. Alright guys, you can see that I have come to the browser. And if you haven't subscribed yet, please do it. So, come here. Here you need to write node.js. And don't worry guys, you don't even need to write this. I am just showing you how it looks. Because I am going to share PPT with you. And CTRL and if you click on it, then by default you will go to node .js. See, by default you will go. I am going to share everything in PPT. You will get the link in the description and comment section below. So here guys, you just have to remember this. Whether you are a Windows user, whether you are a Mac user, whether you are a Linux user. So you just have to select that particular one. And make sure to use the long term support. Long term, LTS will be written. LTS will be written at the top. Because it is written here as well. So, I mean to say, use the LTS that you see at the top. Because it is for long term support. The current one may be a little buggy. But it doesn't happen. But still, to stay on the safe side, select LTS. So guys, here with the help of package manager, you can install it if you want. But I recommend, if you are using it for the first time, then you may not get this much idea. Then go to the pre-built installer. Click on the pre-built installer. Here also see, I want this particular version. And which operating system do I want? So this. And running, whatever your 6486 is, you select it. And simply click on download. And this is it guys. Now simply, I mean Node version, whatever it is, it must have been installed. So guys, you can see, once it is installed, you will see a prompt like this. If not, click on open file. Then you have to click on run. You can see the space, so now you don't have to do anything. Next, I accept. Next, your program file, will be installed in this particular program file. Then next. And then next. And then, leave it automatically. So it will take a few seconds. I will meet you. Alright guys, you can see that it is properly installed. Then click on finish. Open CMD, PowerShell, whatever you have. We are opening it just to check that it is properly installed. You have to type node-v. And oh my god! It's a 20.13.1 which is properly installed. You can add npm and leave it like this. Then your node package manager will be installed like this. So we come back to our PPT. Now we have to install Visual Studio Code. I will click on it. So you will come back to our Visual Studio Code. Same here, macOS, Windows or Linux. Whatever you have, you can download it. Next, next, next. Once your work is done, then you can directly search and you will see something like this. Alright, so you can see the welcome for the first time. Let's go here. By the way, I would like to tell you that you may not be able to see this. But I have set my settings to the right. So that tomorrow, whatever I do, my code will always be here. Don't worry, you can see it on the left. You can see it on the left, but don't worry. Now come to the file. Now come to the open folder. You can see that I have created a folder by coding in my F drive. I will create a folder here. React YouTube Thapa. Enter it. If you also like, then write here React YouTube Thapa. So that you also know that whatever you are doing in this, whatever you have seen in the Thapa Technical channel, that is it. It will be easy for you to refer later. I have selected. Simple. Now I have come. These options come, whether the files you have created are dangerous or not. You trust this author. Let's click on yes. Remove the welcome. After removing the welcome, your folder is ready like this. You can see very clearly. This is your folder. There are some icons. Let it be. Now you have to do is press CTRL and then backtick. If you press CTRL and then backtick, then you get your terminal. Where you can install React. Okay. I will go here. If you work again, then you have to go back here. On PPT. This is my work. So that we can easily manage our code. On safe. Permit should be equal. Slint is a tool that guides you whether your code is proper or not. As per rules or not. You will know later. There are 4 ways with which you can create React. First is custom. Use your own transpiler, bundler, configure and install. But who does it? No one does it. Second is Create React App. By the way, it is very popular. Even my course was on this. But now React is saying don't use Create React App. Instead use VEET. VEET is a free open source JavaScript build tool. It helps front end developers to make awesome website in a snap. So that is your VEET. We are going to use VEET in this course. You can also use Meta Frameworks. But we will learn React later. So let me tell you these things. When you come to official website. Let's go to learn. And quick start. Let's go to installation. Start a new React project. Watch carefully. If you want to start a new React project. What did they say? See, First they said use Next.js, second use Remix, third use Getsby, fourth use Xbox. That's it. We have to learn React. And team of React says use their framework. It means you have to learn JavaScript. But JavaScript team is saying don't learn JavaScript, learn React. But still let me show you one thing. Can I use React without a framework? Obviously, I have to use React without a framework. Yes, definitely use React without a framework. Then you can use either a VEET or a Parcel. Here you can see either a VEET or a Parcel. They didn't mention about Create React App. So we will use VEET. If you click on VEET, you will come to official website. And one thing I want to tell you. Fun fact. VEET's port number is 5173. Many of you might be thinking why 5173? Because by default, React and Next's port number is 8080. It's a series of 8000. Even PHP's port number was 3000. But VEET chose 5173. What could be the reason behind it? Check out this video. You will enjoy it. Because VEET's port number is VEET. Check out this video. You will enjoy it. Alright. Let's go back to VEET. We will click on Get Started. Let's scroll down. You can install all these things. And here we have this official website. We can use Node Package Manager. We can use Yarn. We can use P and PM. And now we have this Burn. Burn is also your package manager. If I click on it, you will get something like this. Now this Burn You can't use Burn directly. So what we will do? Let me tell you. First of all, you type Burn and hit enter. You can see that I can see this much. I can see this much because npm install burn you have to type this. Then you can use Burn which is a package manager. You can use it. Let me tell you why I am using Burn. I want that version 19 which is latest similarly our package manager should also be latest. So this is fast all in one javascript run time. Burn, Dyno server and even faster than Node. Not only that see here. Burn is an npm compatible package manager also. Burn is a dangerous all rounder. If I show you see here. If you use Yarn then it is 33 times slower than Burn. If you use npm then it is 29 times slower than Burn. If you use pnpm then it is 17 times slower than Burn. And see how fast Burn is. That's why we are going to use Burn in this. And I want throughout this course to give you react query, sets just end just end ecosystem latest latest I am introducing it in front of you. So that's why we are going to use Burn. You have to write npm install burn simple. You can see here. Hit enter and now come back to build. Copy this. Burn create build So burn create and hit enter. Give project name react-thapa What do you want to select? Vanilla, Vue, React. Now there are multiple options. Either we can go with TypeScript or Vanilla Javascript. For the time being we will go with Javascript. And I have already uploaded a complete project on React with TypeScript. Please check it out. Hit enter. This is it. Now we will cd react hit enter Why did I do this? Because they told me cd react first npm install npm run You can write npm here. You can also write burn. Because we are using burn. So write burn install. See how fast your work is done. See here it is automatic. See here everything is automatic. I didn't do anything. We get everything by default in React. Again press back tick. My work is done. Now they said you have to run it. You can write burn run and then dab. Else you can write burn and then dab. It gives you so much power. See our work is done. See it is running on 5173 instead of 5174. Why it is running on 5174? Because it is running on 5173. My project is running on 5173. You can select India from here. Click on it. You get all the data by default. Many things I will add are default. So that you can be excited. We will do many things in future. We will add pagination. Whatever it is. Localhost is running on 5174. For now I will remove the abort. This is it. By default you can see it on your computer screen. It means success. Your React is properly installed. Click on it. It will increment. Let's do one thing. We have the source folder. In next video we will do project overview. There is app.jsx. Whatever it is. You can see it here. This app.jsx is being used in main .jsx. This main.jsx you can see getElementByIdRoot you will get it on index.html. This is your actual html file in your React application. Where you have already made a div whose id you have given as root. Whatever data you have inside this is this data. This file is an app component. In this app component this is your data. This is your component. I will hit this component. Finish. I have removed everything. I have written a simple function in javascript. const app This is my fat arrow function. I know you feel it is too small. I will make it bigger. I will return here. We said Hello Vinod My name is Thapa Technical. Because you know me by this name. Hello Thapa Technical. Whatever file you create you have to export it. I will export it. I have already exported it. Now I have to get it. Don't worry. Whatever I have created I have passed it here. It goes to my index.html file. We are running it. Now I will go here. Hello Thapa Technical. How do you feel? This was your first website using react.js. I hope you liked it. Because seeing your name with the help of react is a big thing. By default the style you see is app .css index.css which is being used here. If I remove it, you will see something normal which is traditional. Even if you feel Hello Thapa Technical Oh my god! I have to do so much. But in reality you have done nothing. You have done only what you normally do in html. You have to do this. You have written an extra function. We will see this later. Everything else is already given in react. You don't have to think so much. You will know later. Here is one quick update for you. I have already told you. Here is an important update for future viewers. I want to tell you one thing. React version 19 was released long ago. But it was in beta stage. Recently on 15-16 May they did a conference where they finally advanced it to RC stage. But when I am uploading this series it is not in stable version but it is in RC stage. It means that it is in RC stage which means it is stable now. Everything I am telling you about version 19 is actually version 19. Don't think that it is old. It is not version 19. This is version 19 which is in RC candidate stage. I just want to tell you that I am going to do an extra step to install react. If you are watching this after 1 or 2 months then you don't have to do this step. By default version 19 will be installed. But if you are watching this video then you have to do this extra step. If you have any problem in this case then please comment. I will definitely help you. I hope now you know that it is in RC stage. It means it is almost stable but it is going to be release. Because it is official in 15-16 May. Today is 24th. I will show you package.json file which you can't see now. But now you can see it. Here we have this package.json file. In next video I will show you the overview. You can see our dependency is still 18 .2 and then 18.2. It means if you install it it is still 18.2. Because in official site it is still 18 .2. But now we can use 18.2 or 18.3 or we can directly use version 19. Because our series is all about version 19. You don't have to do anything. Just delete these two parts. What I did? I deleted it. Press CTRL and then backtick. Whatever is running press CTRL and then shift to delete. Just clear it. Now what you have to do? You want version 19 right? So burn, install, react, at the rate, R and then C. What I wrote here? Burn space. If you are using NPM or YARN or NPM then just let it be. Install, react, at the rate, RC. Release Candidate. Now you come here and hit enter. Oh my god! It is so fast. Now you can see finally it's a version 19. Oh my god! Here we have our version 19. Now whatever code we write will be in our version 19. But not only this. Whenever you work with react then react is a declarative. Do you know why react is a declarative approach? Because we have a react dome which is working behind the scenes. We don't have to do anything. So we need react dome. I deleted two. Control and then backtick. Same piece of code. Instead of react, react-dom. React-dom. You have to write and hit enter. Oh my god! I want to burn and then dab again. Basically I want to run it. Now you can see I can hit enter very easily. My react is version 19. My react-dom is version 19. Finally it's installed. It's stable in RC stage. But after 2 or 3 months you don't have to do this step. Initialization will automatically make your version 19. I'll go back and end here. Welcome to your website in version 19. I hope you liked the video. I'm telling you again if you have any doubt at any moment don't worry. Don't worry. I'll help you. We have a discord server. You can join there. But if you comment I'll help you. I think it's a big thing for you. I'll personally solve your doubt. So don't delay. Do comment. I'll be happy if you succeed. Yes, we did it. If there is any error in your react installation paste the error so that I can share the solution with you. Please like the video. Share it with your friends. Next target is 1 million subscribers. If you haven't subscribed yet click on the bell icon so that you don't miss daily awesome videos. See you in the next video. Thank you so much. Take care.