hi guys in this blog we're gonna start building our new web app that's called Robo friends in this suitable friends you can see there are some cards in which there are robots and with their names and email and also you can see that whenever we type any name it will figure out the name of that robot like just plain so we're gonna build this so before building it we are gonna use the tool and that Facebook provides so that developer can easily write only the react code and do not do a lot to worry about what going on under the hood so that's called create react app what it do that it will just we're gonna write any react code and it will convert that react code into the older JavaScript code so that our browser can and the suit that we act code so yeah so we're gonna install through any px create react app and the name of the app in here you can see the npx is not a typo it just package runner tool which comes after the version of 5.2 of npm i have already installed or i have already used command i have used i have created a new folder react course and in there i'm i have go to the react course folder by using CD and I have used npx create react app in the name of the app that you want and it will install it will take some time I have already installed it and then I have gone to the CD Robo friends the app folder and I have opened in our visual studio code and you can see in here that this is the visual studio core Robo friends app you can see in here that this is the name yeah Robo friends and we're gonna see what the package dot JSON what are the scripts and what are the dependencies are their first two main are react and react - Dom react what is used for like base which is used for creating a UI or creating view and there is one react - Dom this is what we use when we are gonna use for the web app there is one other another like other Dom's other yeah there Dom like react native which is used for apps there is a react 360 that is for VR apps so yeah and in here there is one react scripts and this is the one important because this truth is that we are seeing all the or using the create react app yeah in this it will convert the code that we are going to write in the source folder and it will convert that script into some other code or other codes and it will sewn into the browser so we don't have to worry about any paper or web back in here there are some scripts you can see what other scripts are here there is one n start start is what will we do first I have already used the NPM start so you just have to write like this if you are new just write npm start just enter it and you can see what is going on and this is what will be sewn into your browser or into your command prompt and when you open into your browser you can see this is what it looks like and yeah and there is one build build is what we used for we run this script man we are gonna use this our project into production like anyone can see on our project so that's when we are gonna build use our build script this test testing and we're gonna use this one when we're gonna taste some cases oh yeah and there is one exact exact we are gonna use when like we're gonna configure our some they have a configure babel and web pack so not to worry about exactly we don't have to use exact here so now we are gonna see in our apt our chairs in app dodgers you can see that we have first imported to react from react because this is what we do when we're gonna show any any view so this you can see in here this div tag and all the things that are written here this is what we see in our project in our localhost 3001 this is what looks like and in here you can see that how can we import some CSS you can import through dot slash F dot CSS or import some SVG file our image file this is how can we do we will see how can we how can we write how it is written in code and here this you can see this is a functional component called app this is functional component app you can convert this into an class component app we will see how can we do this and there's one more features about offer react app create react app like whenever we like we're gonna change something like hello and if we save it we don't have to like refresh the browser or anything we can see that it will be reflected back to the browser instinct or it will say take one or two second if the project is big so so this is how this is important but there's one thing how it is linked to the like we cannot see any index or the HTML file so this is what necessary in here so you can see there is one app and there is one here you can see in the exodia's let's see what it is an indexer yes yeah you can see in here in the extra chairs in here you can see the app and the same app that we have used in here so yeah this is the one that have imported it that is the describing to this app dot J's file in here you can see that we are gonna use react Dom dot Ranger it will like react on will be rendering this app component and in the all app component is linked to the document dot get element by ID root so there is one route ID somewhere so where it is so we're gonna just look into our public folder in public folder is where in the extra xtml and we open it index dot HTML you can see oh there is one the extra HTML file in here in here you can see you there is one deal ID equal to root so this is how it is linked you can see this is how it is linked to this index of J's if you are not like I'm just babbling about something you can see in here our inspector in here you can see divide equal to root and in here there is the plus equal to AB you can see that the same thing are written there in our code and when we open like components you can see there is one component app but there is nothing in there because because this is one component that was written so yeah so this can we say that we have like interstate something about like from the top what what it is going on how these all are linking how these all are linked and now we're going to just build our this simple or sample react project into this Robo friend set yeah thank you