What is React.js? Get started with React using Vite

here is a react app using v it has jsx it has state we're importing css straight into javascript files we have different components in different files and it's all a little bit overwhelming in the beginning but i want to show you what a react app kind of looks like right now and then in the rest of this video i'm going to take a big picture look at what react actually is and how you can start working with react because react is the most popular front-end library for building applications that is declarative it's component based and if you learn how to build apps with react you're also able to easily learn how to build apps using react native and react desktop to build an entire cross-platform experience but like i said this isn't really a tutorial on how to use react it's more of an overview on what react is and i'll make more tutorial videos on react in the future so if you're not subscribed already make sure you subscribe now so you don't miss those videos [Music] so let's start by making an app using just vanilla javascript and then we can compare that to the same app using react so i'm going to start by making an index.html page here and this app is just going to be a button that someone can click and every time they click on that it's going to keep track of how many times it's been clicked and just display that in ap tag so i'm going to need a p tag for the number of times it's been clicked and a button that someone can actually click and then i'll give both these an id so the p tag can be uh clicked text and the button can be clicked button and then i'll also need a javascript file so i'll link to that we'll just call this vanilla.js i'm going to make the vanilla.js file first thing i'm going to do is grab those elements so i'm going to need the count what did i call it uh oh no not clicked clicked text equals boom that is not quite right but close and then the clicked button that was right on and then yes i want a click event i'm going to keep track of the amount of times it's been clicked so i'm just going to create a variable for that every time it's clicked we'll increment that by one and i'm going to set the text of this element to be the count but i'm actually going to put this in a template string and there we go so every single time this button is clicked we will increment this count variable and then we're going to update that elements in our html to display what the current count is so if we open the index.html file in google chrome we should see this app working i didn't put any text in that button uh what should we put in here click me i'm gonna have some default text like count zero okay that's good enough let's refresh this boom okay click me boom and every single time it just increments by one isn't that nice so there's two things i want us to pay attention to here one is that we are managing the state and the ui independently of each other so this p tag should always represent the current count that this variable has but every single time we modify the value of this variable every time we modify the state we also have to make sure that this p tag is up to date with the current state so we're always responsible for managing that and in a small app it's not too bad but this will get more difficult as our app gets bigger the other thing is that there isn't really a good plan for managing state i just have this variable out here in the open and even if i just went and tried to add another click button with another p tag here i'd probably have to have like one and and two uh this isn't gonna scale well i'm gonna start duplicating everything and it's just not a good plan for managing the state and the ui that really just needs to represent the current state so let's take a look at how we would build this with react and if we just look at what react is for a second it's a javascript library for building user interfaces so it's just a library that's going to help us build a user interface it's declarative we don't specify how to update our ui like we are in this code we just specify what our ui should represent and react will kind of handle the rest and we'll see that in a moment it's component based so there's a plan for separating out the individual pieces of our ui into separate components and separate files which makes it easier to organize our code and makes it easier to code in general and this last one here is interesting because of react native and react desktop that allow you to basically write the same code in the browser and for mobile apps and for desktop apps and it will actually run natively on each system but for us right now it's just another browser library so what i'm going to do in my html file is comment out this existing code and because this is a library the first thing i'm going to do is import react using a cdn and then i'm going to create a react.js script file and i'm not going to create any html right now because react manages all of that ui for us so i'm going to create a react.js file and i want that same p tag and button and when you click the button it just increments the count and that's displayed in the p tag and that to me is a single component and when we have some elements or some logic that can be represented as a single component you put that in a function in react so i'm going to create a function called counter and every component starts with a capital letter this isn't the same as a class or a constructor function it is a different thing and in here i'm going to create a count variable that is set to zero because in this component is where we manage the state and the ui and remember this isn't a tutorial this is more of just an overview of react so i'm going to go a little bit faster through the code examples than i normally would when we're working with react we don't create our elements in html we create all of them in our javascript files so a component like this in a javascript file like this has to return what elements need to be made when we create this component so i need to return my p tag and my button right here and what i'm actually going to do is return a div that contains the p tag and the button and the way we do that in react is react create element there's a div that will contain a p tag and that button oh my god co-pilot love you and i don't really care about these ids so i'm going to remove them but for the button we want to detect an on click event and that is going to update the count by one value but we actually need to modify this count variable first because in react this has to look like this using react.use state so that anytime this variable is updated using the setcount react will update the ui and this is important because we don't have to tell react how to modify what the element is displaying we are just saying that there is a p tag that p tag contains this text and it contains this bit of state here this count state and any time that that is modified react you are responsible for making sure that just this piece of the ui is updated to represent that state so this looks actually a bit messy a bit weird but let's just see this in action so that we can see it working and there's nothing on the page because i forgot to do one thing and that is we need an entry point to the react app so i'm going to create a div that has the id root it's going to be where react starts inserting all of those elements then we create another script tag down here where i just grab that root node and tell it to render a counter component and that's pretty much it and again don't really worry too much about the syntax right now i just want to see this working so if we refresh the page it should be the exact same behavior as before but instead of using vanilla js we are now using react and this is not actually how you'll ever write your react code this looks kind of weird and a little bit messy and way more complicated than just the vanilla example and usually how we would write this is by using a language called jsx where we return basically the html or what the html might look like so i'd have a div and then ap tag and then my button and then oh yeah i guess it says click me and then let's close the div there we go again i don't really care about these ids right now because i'm not selecting them in javascript they just exist in javascript as this react app but it might look something more like this and this is maybe a little bit cleaner a little bit more concise we have all of that logic in a single javascript file it just exists here and we can see the state the ui and everything as one neat component that we can then add into the application once or twice or many times whatever and there's a plan for managing the state there's a plan for updating the ui to represent that state and it all just kind of works nicely however the browser doesn't understand this this isn't valid javascript it's jsx so in order to get this working we need something that can convert this jsx into javascript and this is where things become more interesting because the react community and the web dev community in general have made a bunch of tools that do things like transpiling jsx or typescript or whatever into browser valid javascript but there's also tooling that helps us import npm modules into our browser apps and do hot module replacements so we can see updates instantly in the browser without losing our state tools for helping us write our css and building our apps for production and just so much more that anytime we go to create a new react app we're not going to do it like this we're going to first select a complete tool chain that does all of those things for us and then build a react app with that tool chain so when we think of building react apps although react is just this library that we can use like this we think of it more as the entire tool chain and there are many tool chains we can use to build react apps but the most popular one i think is create react app but it's a little bit outdated most people don't like using it anymore and the second most popular one which i'm going to show you right now is called veet next generation frontend tooling there's also this thing called nexjs which is a react framework for production and it does so many things like rendering components on the server this though is worth its own video own series of videos so i'm not really going to talk about it today but you should know that next is something that you'll want to look at at some point as a react for now we're gonna use v which is pretty easy to get started with so to create a new react app using v we just have to type in yarn create veet and then it's gonna ask us what our project name should be my counter app then it's going to ask us what framework we want to use and we just have to select react then it also asks us if we want to use typescript and i don't want to but you could and then i'm just going to open up my counter app in vs code and we can see what this looks like but actually first let's run this out i'm going to cd into my counter app then i have to install dependencies using yarn and then i just have to run give it a second yarn dev and this will set up a development server for some reason at 5173 usually it's localhost 3000 but this will host our app in development so that we can get a bunch of cool dev features uh for starters that just hosts our app there so that's kind of cool and this is the default landing page and it already has a counter which is kind of funny but if we go back into the app right now there is a source directory and this is where we're going to spend most of our time this is what we really care about and right now there is an app.jsx file and see that's the jsx extension because we are using that jsx syntax at the top here we're importing some things from the react library we're also importing an svg we can just import images and other assets into these files we're also importing a css file so there's a lot of cool things that these tool chains do for us to make it easier to create components and there's a bunch of this default code that i don't care about at all so i'm going to delete all of that and just have this div called app and if i go back to the browser i can see that it immediately reflects all of those changes it deleted all of that stuff in the browser for me so if i go and add like an h1 tag hello save this file go back to the browser it immediately appears there and this is just one of the many things that you get out of using a toolchain like v so it's a really really really handy thing to have in development and what i want to do now is recreate that counter app that i had in the beginning but in vietnam so i'm going to clean this up a little bit more i don't need that set count i don't need the logo i don't need to use state in here so i just have a basic app component this is the entry point into my app and i'm going to create a new file for my counter component so i'm going to call this counter.jsx i'm export a default function called counter this is my component just like before i do need to import that use state hook so that we can have some state in here uh from react then i'll have the count and set count equals come on co-pilot yeah we go then we'll return that jsx as before so i want a div i want a p tag i want a button i want click me and then we'll close that div cool okay so here's that basic component again that's doing just what it did before and what i'm going to do is import that counter from counter there we go so i'm going to import that component into this component so in my app i'm importing counter and then i can just render that as if it were another html element so uh we'll just put a counter in here and now if i go back into the browser i should see that it's automatically refreshed so we got hello you clicked zero times and if i click me again it's just that behavior from before but i have organized my code quite nicely here i have this counter component that is completely separate completely self-contained we have this state here that is managed within the component and any time that this state changes the ui will reflect the state change we don't have to link those up in any way other than just saying this p tag is going to show the count whatever that value is another really cool thing is because this is just a completely self-contained component i could create as many of these as i want so let's just have i don't know five counters here go back refresh the page and notice it refreshed without getting rid of any of that state which makes development so much easier but i also have all these components that manage their state separately and i can just reuse them as much as i want and just writing this code and organizing this code becomes much much easier we can also just import any client-side npm module we want in here so if i wanted to make network requests i could yarn add axios for example and veep will just manage that for us i could then import axios straight into my react project i could have a button that on click goes and gets uh let's see https api.kanye.rest a random kanye west quote and we'll take that result and we'll put it into a quote piece of state let's see if i close my button tag get a quote close the tag there we go i'm going to need a quote piece of state here so let's grab that cool and then i could just say that's going to be displayed in an h1 why not and just like that i've broken the app let's see what i did wrong use state is not defined you got to remember to import use state from react but now there we go i've got hello and i've got get a quote and that did not work because this is a json object and i'm going to need the dot quote from there i should really use console logs or something all right let's try this again get quote there we go so now i also get a random kanye west quote that is coming from a network request that i managed to get using the axios library that i just installed straight into my react project so this is another cool thing that you can do there's so many cool things you can do just by using a nice tool chain for making react apps but remember that all of this tooling only exists in development and local host whatever isn't going to exist in production the browser has no idea what jsx is or how to import axios this way so when it's time to actually deploy this into production we need to run yarn build and this will take everything we've written and compile it down into the html css and javascript files so if we go back here now and look at the dist folder when we're using v i'll be able to see that here is the index.html that will load into the browser and in this assets directory we have css and javascript this is the minified transpiled code that we will deploy into production so when it's time to actually deploy the app we just take these files right here in the disk folder and we could deploy them to a cdm we could deploy them to an s3 bucket or just dump them into our express server or whatever but this is the only thing that actually gets deployed it's a simple library for managing our ui but when we make a react tab we always use these tool chains so it always seems like there's more going on but this is part of just the front end developer experience and we happen to be using react as the library but anyway that is it for my overview of react i will be making more videos in the future about how to use react so make sure you subscribe to my channel so you don't miss those and leave me a comment on this video to let me know what you think of react [Applause] [Music] you

Channel: Sam Meech-Ward

Views: 14,198

Keywords: vite react, react js, react js tutorial, react tutorial, reactjs tutorial for beginners, vite reactjs, vite tutorial, vite javascript, react jsx explained, react js website, react js course, what is jsx in react, what is jsx, create react app vs vite, react without jsx, react jsx, vite react app, vite react tutorial, react jsx component, react js tutorial for beginners, vite react js, What is React.js

Id: -DTUdOJv8w8

Length: 18min 21sec (1101 seconds)

Published: Mon Aug 22 2022