Learn React JS - Full Beginner’s Tutorial & Practice Projects

Key Takeaways

Bob zero is one of the most popular react instructors in the world and he's back again with this completely updated react for beginners course this course is the perfect starting place for anyone learning react you'll learn the basics of modern react and build a bunch of fun projects hey free code campers and welcome to this introduction to react course my name is Bob zero and I am super excited to be here guiding you through the wonderful world of learning react I have been working for the last 6 months to make this the most interactive react course out there in fact throughout this course you you are going to be working on over 170 challenges and building six larger projects now there are a lot of react video courses out there but this one is the only one that has been worked on and developed hand inand with the folks over at mdn web docs to make sure that it meet their standards I am just so excited to be teaching this react course I've been teaching react and web development now for over a decade and have helped Usher thousands of people into their new careers in web development so trust me when I say you're in good hands let me tell you for just a second about what you can expect from this course this react course and all of the courses that we make over at scrimba are super interactive instead of just teaching topic after topic we focus our curriculum on projects and challenges and we use those to drive forward the curriculum and introduce new topics along the way this makes it so that all of our content is very Hands-On as I mentioned you're going to be completing over 170 challenges and building six projects let's look at those six projects right now the first two projects focus on building static web pages in react allowing us to dip our toes into the syntax of react and then starting to transition into using reusable components which is one of the fundamental things that we learn in react in sections three and four of the course we're going to be transitioning away from just static web pages into web applications that are much more interactive with the user and to do that we'll be building two really awesome web applications one is called Chef Claude where the user can input a list of ingredients send that off to an artificial intelligence engine to give you a recipe that you can use with those ingredients and a meme generator where you can input the top text bottom text and change the name image if you want at that point we have not one but two Capstone projects that we'll be working on the first one is a dice game called tenes and the second one is called assembly end game it's basically a hangman Style game where the user tries to guess a secret word so I've mentioned how interactive the course is going to be you might be asking what's the best way to follow along well you really have two options you could stay here on YouTube and continue to follow the course here while doing the challenges and projects in your own editor on your own machine or you can hop over to scrimba and do the challenges over there either one is completely fine with me as long as you're doing those challenges and building the projects because the course was originally recorded on scrimba there will be times where I talk about clicking a link in the slides or clicking into the editor and typing down your answer obviously neither of which will work here in YouTube so I'll do my very best to make sure all of the links from those slides are down in the video description in this video now indulge me a little bit here I'm going to St up on a soap box and give you a little bit of a Spiel that I give to all of my students my main goal for this course is that you can finish the course open up a blank text editor and start building a react project of your choice far too many courses out there will just present information at you not requiring you to actually do any work and then leave you alone and underprepared to try and build a project the reason this happens is a phenomenon often referred to as tutorial hell where you watch tutorial after tutorial after tutorial feeling like you're learning something new but never being required to actually type down any code or practice what you're learning what this ends up doing is making you feel like you're learning something along the way but then you get to the end you open up an editor and your mind goes completely blank in fact it's kind of funny to try and imagine learning some other kind of skill in the same way imagine watching all of Wimbledon and feeling like you're somehow becoming a better tennis player that's not how it works in sports or language or music and and certainly not in software engineering so I found that there's actually two things that need to happen for you to avoid tutorial hell altogether the first one actually has to do more with me as your teacher it's my responsibility to make sure that I prepare this course and teach this course in a way that follows scientifically proven methods for you to retain the information I'm trying to teach to you so that's not something you're going to have to worry about that's something I had to worry about when I was creating the course the second one though is something that relies entirely on you and that is that you actually do the work every challenge every quiz every project that I throw your way I need you to actually do those challenges and quizzes and projects something I like to tell all of my students is that the easiest way to learn something new is to actually do it the hard way this means that instead of just coasting on by hoping that you're retaining the information you actually put in the work and the time and effort that it takes to learn that new thing practice practice practice is extremely important and I'm going to be up on this soap box reminding you about this many times throughout the course I think that the best way to do this is to have a bit of a paradigm shift and remember that you are not being graded on this course be curious it doesn't matter if you make mistakes you can always undo the changes that you've made and try again okay I'm going to get down off that soap box now but if you have any feedback about the course or if you simply want to connect with me the place I'm most active these days is on X bobso so feel free to give me a follow there you can shoot me a DM I'm happy to respond as much as I can okay I can't wait anymore without any further delay let's jump in and start learning react in this first section we are going to be learning everything we need to know in order to build static pages in react and I know what you're probably thinking but Bob I already know how to make static pages I understand that building purely static pages is not the reason that you're hoping to learn react but I have found over my many years of teaching people react that it's important to first learn how to think in react writing good react code requires a bit of a paradigm shift from how you might be used to building web applications in the vanilla Technologies of HTML CSS and JavaScript and so in my experience it's important to first get a solid foundation of how to think about react and think in react before we jump straight into the more fun and productive parts of react that really make it magnificent framework for user interactions and web apps in general in order to give some structure to the curriculum and in true scrimba fashion we are going to be building a project throughout this section called react facts and although it may look like a simple static page it's really going to help us get the solid foundation that we need and react to continue on to maybe some of the more exciting projects that we have in this course throughout this section we are going to be learning why you should even care about react chances are you found this course because you were were told that learning react is an important step if you're hoping to get a job as a web developer or level up your skills in the web development Arena and so I think it's crucial to understand why people are telling you to learn react naturally we'll be learning how to set up a new react project and this bullet point actually incompasses both creating a new react project in the code which you'll be doing directly here in scrimba or for those of you that happen to not be following along in scrimba we will be covering how to set up a new project on your local machine which of course will be helpful for anybody when it comes time to building your own projects outside of the scrimba environment then we'll be learning about the fundamental pieces of react which are react elements and a syntax that the react team has created to make it easier called jsx and we'll take those react elements that we learn how to create and build our own custom components which are reusable composable pieces of code and then just so our stuff doesn't look too ugly we'll learn how to style those custom components and we'll be using tons of Hands-On challenges along along the way while we're learning these topics so without further Ado let's jump in and start learning how we can build static pages and react before we dive into the nitty-gritty of how you set react up locally on your machine I want you to get your hands on react as soon as possible if you're taking this course on scrimba then you'll be able to just click into the same editor that I'm using and type along do the challenges and so forth if you're watching this on another platform like YouTube very shortly we're going to cover how you can set up your react app on your local machine so that you can follow along with these challenges in the meantime I would recommend coming over to sco.com just to try this first challenge out so you can get your hands on the keyboard and practice your very first react app assuming you have some experience writing HTML and CSS and some Associated JavaScript you should be very familiar with the idea that if you want something to show up on the browser this is our mini browser over here then we need to include it as markup in our HTML file so I would just add something like an H1 that says hello world I hit save and sure enough Hello World shows up in our markup with react we take a bit of a different approach instead of adding anything manually to our markup react will be in charge of taking our JavaScript and adding the associated markup to our HTML document for us in order for this to work I need some kind of placeholder we're going to add a div here which gives a place to react where it can insert all of the markup that we generate using react in our JavaScript files I'm going to give this div an ID of root and we'll see why in just a second and before we move over to our index file you might have noticed that the file extension here is jsx we're going to cover why that is in just a minute but for now let's just treat this like a regular Javascript file here in the scrimba interface the implementation of react is sort of hidden behind the scenes you can see in my dependencies I'm using react version 19 actually at the time of recording this the release candidate is all that's available right now react 19 is on the cusp of being officially released but because I have these dependencies installed and scrimba is taking care of all of the bundling details and everything behind the scenes if you have no idea what that means that's okay we're going to talk about it in just a few scrims now before we move on let me hit save we'll get rid of this hello world that was showing up there because we removed that from our markup and now to get the very most basic react app set up I need to do two things the first thing is I need to create a root and don't worry about the terminology we are going to be talking about this in just a second and the second thing is I need to render some markup to the root in order to create a root I'm going to import believe it or not a method called create root and this is going to come from the react Dom library but from a specific subm module called client so I need to import create root from react om/ client we can use this method to create a root we'll go ahead and call it a variable root and we'll call create root and here we are why is it called a root well since in react we are going to be rendering all of our markup using react inside of JavaScript files we need one central location where react can insert all of that content and as we mentioned this div with the ID of root that we set up is going to be like the root of our application it's the one place where react will insert everything so what I need to pass to the create root method is this Dom node and I can get it by doing any regular Dom node selection I can say document. getet element by ID for example and pass in the ID of root and now that I have a so-called root I can call a method on that route called render again I know we're moving quickly I'm just doing this so that we can get your hands on the keyboard and then we'll come back and practice this and revisit it so don't be too concerned about that okay so what do I pass to the render method well this is going to be a little bit weird but I'm going to pass what looks an awful lot like HTML inside of my JavaScript to distinguish this from what we had before we'll say hello react and here's the Moment of Truth we'll go ahead and hit save and look at that we get our first text showing up on our screen now I know we've done a couple strange things we're moving kind of quickly so now I want to just pause for a second I want you to look over this code and try to memorize it as best as you can the beautiful thing about scrimba is I can give you a challenge now to rewrite this code which is exactly what I'm going to be doing so take a minute now to try and memorize this code if you want you can type it right down here below to get a little bit of muscle memory go ahead and do that now and then it's your time for a challenge okay your challenge is to rewrite those first lines of react code that we just had on the page you can render anything that you want to the screen it doesn't have to be an H1 like we had before if I hit save we'll see that disappears now I'll put us on a new line here and now it's your turn to work on this challenge okay so we need to I'll just get rid of this challenge text we need to import create rout from react-dom client then we're going to create a rout by calling create root and what we pass to create root will be a way to select the Dom node that we want to put all of our JavaScript code or all of our markup from JavaScript into before I did that with document. get element by ID but just so we can see another way I could use Query selector and specify the hashmark root this works in exactly the same way and then I can use that rout to render something again that looks an awful lot like HTML maybe this time I'll opt for just a simple paragraph tag and we'll say hello from the world of react hit save and there's our paragraph showing up awesome as you might have guessed you don't necessarily have to do this in two separate lines instead of creating a separate variable I could simply chain these methods together also in true programming fashion there's usually many ways to do the same thing so you might sometimes see this importing the entire reactdom library and calling reactdom doc create root honestly at this point it really doesn't matter but I just wanted to show you a couple different ways in case you ran into it in the wild we'll go ahead and leave it like this for now all right one last thing before we talk about how to set this up locally on your own machine I'm going to give you a challenge and spoiler it's essentially going to be doing the exact same thing we just did but without the help of seeing the code ahead of time so if you want take some time to memorize what's here and in the next scrim we will redo this challenge with a little bit of a Twist okay it's challenge time I want you to set up a react app again from scratch and this time I want you to try rendering an unordered list with two or three lists items inside that enumerate why you're excited to be learning react at this point I'll give another plug for the benefits of using scrimba I really want you to try this challenge to the best of your abilities before you just simply click the button and move on you'll hear me say it a million times but you really will just be shorting your own education and your own practice if you decide to take the easy way out and there's absolutely nothing wrong with going back to the previous lesson to remind yourself of how it's done so that you can come back here and accomplish it or even to go to Google or chat GPT and ask questions there doing that Discovery process is going to be much better for your long-term memory and your skill building in writing react code then it will be to just skip this Challenge and move forward okay enough talking Bob let's start this challenge all right we'll get rid of this challenge text again we're going to import create root from react-dom client and then we'll call create rout we'll pass to it a Dom node I'll go back to using get element by ID we'll give it the Dom node with the ID of root and then we'll just go ahead and chain on our render this time however because I do have some nested elements I'm going to go ahead and put these on their own lines we'll create an unordered list and at this point it should feel pretty familiar cuz we are just going to be writing what essentially looks like HTML I'll go ahead and create a list item and let's see why am I excited about react well it's a super popular JavaScript framework or I guess you could say library there's a little bit of contention about that let's go ahead and call it a library and let's see it uh it will help me be even more employable learning react is going to help you think in a new way that most JavaScript libraries and Frameworks are adhering to these days anyway we're going to talk more about that and I don't know maybe let's do something a little more silly uh react has a pretty cool logo sure why not okay let's go ahead and hit save and look at that we get a little bit of strange styling but that's just from our CSS but we have our list items on the page this is great and we're starting to see one of the benefits of using react is we can lean on a familiar syntax in HTML with a couple tweaks here and there that we'll be discovering as we go through this course hopefully that challenge went okay for you again if you struggled through it this would be a perfect time to go back and to try it again now that we've talked through it it might stick even better in your mind if you go through it again and nothing's ever never stopping you from doing it as many times as you want get that muscle memory in get the repetitions in and remember to take breaks along the way throughout this course now that we've had a chance to get our hands on react let's go back and talk a little bit more about how we can set react up locally especially for those of you that are not following along in scrimba I mentioned how scrimba has some magic happening in the background so that react just kind of works in the scrimba environment however if you're coming from just learning HTML CSS and JavaScript probably being used to just being able to double click an HTML file and have it run locally on your machine things are not quite as simple as that with the modern front-end ecosystem that exists today now I do want your focus to be learning the syntax and the philosophy behind react before you start worrying about all of the tooling and how to deploy and what it means to build a project and all that extra stuff that is important to learn but kind of distracts a little bit from learning react itself self so if you're taking this course here on scrimba I recommend you just continue to do the exercises directly here in the scrimba interface that said there will obviously come a point at which you want to build your own projects and although scrimba is more and more capable of doing that when you go off to your developer job maybe writing react you probably aren't going to be building your production code inside of scrimba so I want to walk through how you can get a react project setup locally we're going to be using the recommended build tool called vit and yes it is pronounced vit that's French for quick or fast and to get started you're welcome to click the screenshot here which will take you directly to VJs dodev if you want to read a little bit more about vit but I also in this scrim will be walking you through how to get everything set up in order to use vit on your machine you need to have node and npm installed already on your machine if you open up a terminal you can type node space- V that's to check the version of node that you have installed if it gives you any kind of version that 18 and above then you're golden and you'll likely be able to skip the next few slides that I'm about to show you we also want to check if npm is installed although as far as I know once you install node you automatically get npm don't quote me on that for sure but go ahead and use npm space- V to check what your npm version is if your terminal essentially says I have no idea what you're talking about when you type this in that means you need to install node and npm and I'm not necessarily going to walk us through how to install node because there's a million YouTube videos that can help you out in fact if you click the screenshot here it will take you directly to the query on YouTube specifically installing nodejs with a package called NVM which is short for node version manager I have found personally that node version manager is the Least Complicated way to not only install node but also to update it as new versions of node are released now just for reference I've included screenshots here which you can click either one to take you either to the NVM Repository which is the node version manager you would use if you're on a Mac or a Linux machine and over here on the right is a link to a similar repository for NVM Windows which as I'm sure you have figured out is specifically for Windows platform now at the time of recording it does look like the NVM DWIs team is working on a new package called runtime which it says is the successor to NVM for Windows but since that is not yet released you'll just have to click on the screenshot and see if runtime is the new way to do this now I know I I'm not going to walk through this whole thing I'm not going to go through every single step but once you do have NVM installed you'll simply run NVM install D- LTS for the long-term supported version and that will just get you the most updated stable version of node once you've done that you can check again for your node version and your npm version and once those are showing real numbers you are golden and ready to move on and of course as with all version numbers you see here when you do this it's probably not going to be these exact versions of node and npm because the ecosystem is evolving pretty quickly and building your first project with vit couldn't be easier in your terminal You're simply going to type npm create vit at latest and this will jump you into kind of a wizard that helps you create your project It'll ask you to name your project so you'll put in something like first- react and hit enter then it'll ask you to select a framework as you can see there are other Frameworks that are supported by vit we're going to go down to react and for this you just use your arrow keys and hit return to submit once you do that it's going to ask you which variant you want to use we're just going to keep it as simple as possible for now and just use the regular JavaScript version hit return to submit that again and everything will get scaffolded and ready for you to run and helpfully enough it tells you exactly what to do we're going to first CD into our project then we're going to run npm install which will only take a few seconds to finish and at this point once we're finished I personally prefer to run the development server inside of the integrated terminal in vs code and so I'm just going to use codespace dot that's the shortcut for opening the current folder inside of vs code and once I'm in vs code I can run npm run Dev this will spin up a development server on Port 5173 and I can just go to Local Host colon 5173 to see the default project that is created with vit at this point you can interact with the different files and the code that you see if this truly is your first time interacting with react it might seem a little bit over in you would go directly here into the SRC or Source folder and find a couple files there essentially you can delete most of the content of those files but it's always good to kind of play around in a new I guess you could call it code base just to get a lay of the land and with that you should be completely set up to run a react app locally with vit again because I'm going to be giving you a number of challenges many of which include some starter code I still recommend being here on scrimba to do those challenges with as few barriers as possible the the more you can get your hands on the code the better you're going to learn react before we jump into some of the more theoretical reasons as to why people have really adopted react so heavily I want to sort of jump in a time machine and go back to see how this react looked in the very very early days of react we'll get a chance to get our hands on the keyboard and really dive into some code before taking another break and learning a bit more about the history of why we enjoy react let's spend just a minute talking about JavaScript libraries and JavaScript Frameworks at this point in your Learning Journey you may have heard these terms before and wondered what they were so I think we should go through them first let's talk a little bit about the difference between what a library is and what a framework is generally speaking a library is something that is just a collection of reusable code when you're programming sometimes you'll find yourself having to rewrite some logic over and over and over again maybe even across different code bases and this is kind of where librar step in the point of libraries usually is to reduce the need to write some repetitive or complex things from scratch over and over because it's just a collection of reusable code it's really up to you how it's going to be used when it's going to be used there really aren't any boundaries that you're expected to stay within its main purpose is just to simplify the task that you were already going to be doing a framework on the other hand is a bit more structured it usually has some kind of predetermined architecture and expects you to follow a specified pattern of development oftentimes it's pretty important that you're very familiar with the documentation for Frameworks because they do expect you to follow their patterns instead of essentially having no boundaries like a library often has you are expected to work within the boundaries that are set by the framework maybe put a little simpler there's kind of like a right way and a wrong way to use the framework itself so the question often comes up is react a library or is it a framework well if you go to the react homepage it specifically calls itself a library it says it's the library for web and Native user interfaces honestly react has been built out as a whole ecosystem these days to a point where one of the most common ways to use react is to do it using a framework like nextjs we're going to be talking about that in a second I think it could be really interesting for us to take a quick overview of the history of some very popular libraries and Frameworks in JavaScript we back in 2006 there was a really popular library that was introduced called jQuery and chances are you have heard of jQuery even if you're pretty new to web development I would not be surprised if you've heard of jQuery one of the main purposes of jQuery was to bridge the gap between different browsers and how they interpreted JavaScript to interact with the document object model or the Dom jQuery made it a lot easier to achieve that cross browser compatibility whereas before with regular JavaScript it was kind of a question you might write some JavaScript that worked well in Chrome but didn't work in Firefox or Safari jQuery definitely falls into the realm of a library its syntax essentially accomplishes the same thing that regular Dom JavaScript can accomplish but with a syntax that's a lot more tur and some would say more familiar or easier to deal with then around 2010 there was a bit of a surge in JavaScript Frameworks when angularjs Ember and backbone came out there were definitely others at the time as well but these were a little bit more closely aligned to a framework they expected you to do things a specific way and they started introducing the concepts of components on the web angularjs actually has kind of a funny history it was created by engineers at Google its original name was simply angular and then later around 2013 when react the new angular and vue.js came out angular the original angular angular one I guess you could say rebranded as angularjs so that the new version of angular could simply be called angular around the same time we also saw react and I think just a little bit later view JS came out and these three libraries slf Frameworks sort of represented the next wave of how to build web apps in JavaScript things definitely did not start slowing down at 2013 they only got more intense in 2016 we saw the release of spelt and nextjs which is a full stack framework that uses react as its UI library and from 2020 on we saw a lot more showing up in remix solid Astro quick Redwood Alpine there's so many others that have shown up since then each one of these has its own unique approach to web development both front-end and full stack web development and it definitely can be pretty overwhelming to consider the realm of possibilities that exists out there so of all the different choices that you have to learn why choose react for many of you taking this course you are probably looking at react because it has the highest job demand if you're considering getting into web development or you're trying to level up your skills as a web developer I'm sure you have noticed that react has probably more job demand than any of the other libraries or Frameworks out there this is why we at scrimba have chosen react to be the friend and library of choice in our friend and developer career path maybe as a quick aside it's also important to note that often times people hiring web developers they're not going to be turned off by somebody who doesn't know their specific stack they know that they're going to have to train somebody in their own stack and they're really just looking for somebody who has the capability of learning and building cool things that said it definitely doesn't hurt to choose a library like react that already has the highest job demand another thing that makes react a great choice is that it has a huge ecosystem and community that supports it between the react deflex Discord server the reactjs subreddit and the wealth of npm packages that were specifically written for react code you are definitely surrounded by a great ecosystem with react another thing that some people report they really like about react is that it has less magic that's happening behind the scenes don't get me wrong react is doing a lot of magical things behind the scenes but you as the developer are often expected to Simply rely on regular JavaScript methods to accomplish certain tasks and react whereas some other Frameworks expect you to learn their framework specific way of doing something as we go through this course I think you'll see a few examples of that this next one isn't specific to react but it's very composable and declarative this is a great reason to use react as opposed to just not using a library at all and lastly react is being very actively developed the team at meta were the original ones to create react back in 2013 and it's been actively developed ever since now a question that I very often see in our scrimba forums and subreddits where people are learning programming is asking do I really need to learn JavaScript before I learn react and my personal hesitating emphatic answer is yes you absolutely have to know JavaScript before you jump into learning react if you tried to learn the two at the same time it would become very easy to conflate what is Javascript and what is react and I think doing so would be a huge step backwards in your education in web development so that's why in the introduction to the course I specifically say it's important to already be familiar with HTML CSS and JavaScript before trying to learn react now Library and Frameworks they're not for everyone so let's talk about when you might not want a framework if you were just working on a simple static landing page for a business or your own personal website it might be fine with such a small project to just stick to the core Technologies of HTML CSS and JavaScript remember that Frameworks or libraries like react are a big code base of their own and they will have to be pulled down to the users's machine anytime they want to run your project on Modern fast networks that's not usually that much of a problem but if it's it's just a simple small project or if you do have Network load concerns maybe you need your app to correctly run on slow 3G networks in different parts of the world then those would both be good reasons to just skip using a library or framework altogether or at the very least to use a very lightweight one these UI libraries and Frameworks also come with quite a hefty learning curve compared to just the core Technologies so that's something you might need to take into account when you're deciding whether it's the right time to use a framework also where the core Technologies of HTML CSS and JavaScript are not evolving or changing that often Frameworks do tend to be improved and upgraded so you may find yourself spending a fair amount of time doing maintenance to your application upgrading to the newest version whatever it might be and it's possible that's not something that you want to spend your time doing and lastly if you are already embedded in a codebase it's possible that the framework of your choice may not be super compatible or at least not easily compatible with your exist existing code base in the decisions you make in all of web development you'll find that there's always tradeoffs and so these are just some of the concerns you might want to keep in mind when it comes to choosing your library or framework okay let's get back to talking about some of these reasons to use react by talking about this specific point here how react is composable and declarative when we first wrote this code I mentioned that it can seem a little bit strange for us to have what looks like h HTML directly here inside of our JavaScript and that's true in fact when react was first introduced there was a short amount of time when this syntax didn't exist at all instead react exported a function that was called create element now this is not to be confused with the document. create element although the concept is pretty similar you see within react we can call this create element function and it takes three parameters the first parameter is what type of element you want to create very similar to document.createelement the second parameter is something that's called props we're going to spend a lot of time in props a little bit later for now because I'm creating an H1 I'm just going to pass null here because I'm more interested in showing what gets returned from this than anything else the third parameter is what children we want our H1 to have in our case this is an H1 that's just going to have some text so I'm just going to put some text in here and we'll say this is Hello from create element okay I'll hit save we see we get essentially the same thing that we had before the syntaxes maybe not as familiar and a little bit more verbose especially by the way once you start to Nest these inside of each other but I'm not really planning to go deep down that rabbit hole instead what I want to do is take the returned value from this function and save it in a variable let's go ahead and call this uh react element I'll set it equal to this create element call and we'll go ahead and still render our react element but now that I've done that I can console log react element and let's open up the console and see what we get okay look at that so what create element returns is an object that has some information about the Dom node that is going to get inserted by react into our actual Dom notice this object is just a regular JavaScript object it needs to be structured in this way so that react can understand what it is but it's just a JavaScript object remember this because it will be key for us down the road when we start talking about jsx so long story short in the very early days of react they created this function called create element it still exists today as we can see we're in version 19 and we can still use it and create element returns a regular JavaScript object with a specific structure that makes sense to react now I don't have firsthand experience with this but I suspect that the react team realized that this wasn't going to be a long-term solution and so they created jsx which is that HTML looking thing that we saw in the beginning of the scrim let's take just a minute to look really quickly at jsx and then we'll pull up some more slides and we'll talk about some of the main reasons why we care about react so much as you can probably tell using Create element is not the greatest developer experience we didn't really go into it but if you wanted to Nest elements together like if you had an H1 that had I don't know maybe a span inside with some text well you would have to take your create element and then instead of the children being just a text node like this it would be another react element which you would have to get by calling create element and so then you would have your span it would have let's just say no props and then it would have its own children I'm inside the span and so forth definitely a far cry from how we're used to adding elements to the D with HTML and so pretty shortly after react was initially released the same team that created react also created the Syntax for jsx which allows developers to write what they're already very familiar with in writing HTML if you want to add a span in here just like in HTML you would simply add a span and under the hood react is going to take this set of jsx elements that are nested together and it's going to turn them into those create element calls that we saw before let's clean some of this up this one's just sitting outside here and we no longer need create element let me go ahead and change this H1 to just be a regular H1 that says hello from jsx and notice what the console still says this is from before we made this change and it still says hello from create element as the children we go ahead and hit save and we get an object with the exact same structure so the main point I want to get across is that jsx is simply what we call syntactic sugar on top of the create element call and under the hood react is taking this jsx syntax and turning it into calls to create element now there is a bit more to the object that we see here for example I can't just copy the object I see in the console and paste it in place of react element or try to type this out manually there is a little bit more happening behind the scenes but that's not really that relevant for you in this stage of your react Journey next we're going to pull up a few slides and learn a little bit more about some of the reasons that we love react but I don't want you to forget the syntax you see here because I will be giving you an exercise requiring you to write it all again from scratch we're going to be covering a bunch of different reasons why react is a great choice for libraries to be learning at this point in your Learning Journey but there's two main reasons I want to talk about why it's best that we graduate from just using the vanilla Technologies of HTML CSS and JavaScript so what makes react so great well the first major reason we're going to talk about is that react is something called composable all this means is that we have the tools available to us that allow us to easily create reusable and interchangeable pieces of the web that can be combined in a lot of different ways to create complex systems now I'll admit this next analogy is not the absolute Perfect Analogy but let's talk for a second about what is arguably the most famous statue in the world this is Michael Angelo's statue of David and I've had the privilege of seeing this in person in Italy and if you've never seen it in person you might not understand just how large the statue is it is a 14t tall solid marble statue when this was created Michelangelo had a block of marble and he carved away chunks of that until what was left was the statue that you see here my point in showing this is that the statue of David and all sculptures that were carved as a single solid block of stone or whatever material what you have left is a single unit and it can't be reused or repurposed in any way which for artwork makes a lot of sense now the reason this might not be the absolute best analogy is because this next picture is not nearly as beautiful as the original Statue of David if if we are to set Aesthetics aside you can see that someone has replicated the statue of David with Lego bricks again not nearly as beautiful but I think it encapsulates the principle of composability really well if you've ever played with Lego bricks you know that they usually come in a big jumbled pile and you can use those Lego bricks to create whatever your mind can conjure up each one of those little Lego bricks can be reused and repurposed in a lot of different ways some of which are really rudimentary and simple and some of which are pretty complex like replicating the statue of David in artwork obviously this is more beautiful but in web development it's a very powerful tool for us to be able to take little pieces and combine them together in complex ways let's take a look at a small piece of code here what you see here is a snippet from the bootstrap website if you have been in web development for a while you might be familiar with what bootstrap is it's just a pre-built CSS library and I took this directly from their website where it showed a bu of different examples of navigation bars this is over 30 lines of code that represent a single navigation bar that by itself is not that remarkable navigation bars can often times end up being this long or much longer but if you were around in the early days of the web you might have seen a series of HTML files Each of which was a different page on your website and anytime you wanted this navigation bar to be at the top of that web page you had to copy and paste this code to a separate HTML file this meant that the first 30 something or more lines of code were dedicated to a navigation bar and the only thing that really changed would require you to scroll way down the HTML page to find not only that but if you wanted to make a change to this navigation bar you might have to make it in a lot of different places now we can contrast that with what we get with react which is custom components you can even hear the similarity in the name there these represent components that are more composable I've given these kind of silly names here to really highlight the fact that these are custom there are things that I have created they're obviously not native HTML elements but instead a custom component that represents all of the code that we saw here this my awesome navbar encapsulates all of this code and then anytime in my document that I want to include a Navar I can simply render a copy of my awesome navbar and I will get everything that comes with the code that we see here and if I want to make a change I can make that change in one place and it will reflect everywhere my awesome Navar is used now we're not fully ready to jump directly into the syntax of react but I wanted to give you a chance to get your hands on this and really just kind of figure things out as you go interacting with code that is unfamiliar to you is a great way to obviously become familiar with it and to really create those links in your mind that will help you understand this in the end you can see in our mini browser that I have that bootstrap navigation bar showing up here and in root. render I have this my awesome Navar custom component if I scroll up we can see the code for that custom component and that starts right here on line four one thing you'll notice is that throughout the code I am using class name instead of just class that's not a mistake it's something that we do have to do in react we're going to touch on that later but for now what I'd like to do is give you a challenge that will require you to deduce what I have done here and try to create your very own custom component in react let's scroll down here and I will add a challenge here okay your challenge is to create your very first custom react component using the my awesome navbar component above as your template you'll call your new component main content and just have it return a simple H1 element that says something like react is great after you create that new component make sure that you are rendering it inside of root. render just like we are with my awesome navbar just render it right here below that okay I'll hand it over to you time to work on this challenge okay well we can look above to the example of my awesome Navar and see that to create a new component we just have to create a new function and that function will return some jsx in this example that jsx is much more complex than what we're going to do but that's okay so down here let's go ahead and create a new function called main content and we'll have it return some jsx we'll just have it return an H1 notice that in the case above we're returning everything collected together in parenthesis this is just a way for us to be able to start our markup on the next line we're going to talk more about that later but I don't necessarily have to do that if in this case I'm just returning a simple H1 let's go ahead and say react is great okay I can hit save and notice that our H1 is not showing up well we've created this function but we're not you could say calling it or rendering an instance of main content we can do that by surrounding the name of our function in what looks like HTML tags let's go ahead and hit save and there we have our react is great main content component is rendering to our mini browser this is awesome a quick note I do have to put this slash towards the end if I don't include it then I get some kind of scrimba Errors showing up here so it's important that for self-closing components which is mostly what we'll be dealing with in this course I do have to make sure I include that slash at the end and that covers the concept of composability and react as we prog rest through the course we are going to go a lot deeper into the concept of composability we'll see a bunch of different ways that we can make our components much much more composable than they are just as we see here but I think this has been a good start and a great way for us to get our hands on the keyboard next we're going to talk about another major reason why people love react and front-end libraries like react in general and that is that it's declarative so that's what we'll be talking about next another reason that we love react is because it is something that we call declarative declarative simply means that we can lean on the library of react to handle all of the manual tedious tasks that we otherwise would have to worry about ourselves and I think understanding declarative is most helpful if we look at its opposite which is imperative so with something declarative we can tell the program what should be done and we can think of it like the computer saying just tell me what needs to happen and I'm going to to worry about how to actually do it whereas with the opposite of imperative we need to describe how things should be done this is like the computer saying I need you to describe to me every single step along the way on how to do something and then I'll execute the steps that you tell me to execute let's see an example of this in code so we have here just about as basic of a react app as you can possibly have which is all we've really worked on so far but I want you to get your hands on the keyboard and try out a challenge okay your challenge is to recreate this above line of code which is actually still showing in our mini browser cuz I haven't hit refresh yet but by recreating it in vanilla JavaScript by creating the H1 using the create element method on the document giving it some text content just using the text content property of the new element you created then giving that new element a class name of header and then using append child to append this new element that you created to the with the ID of root and by the way just so that we really drive this point home I don't want you to use inner HTML to accomplish any of this using inner HTML is a little bit shady anyway there's som