Free ReactJS Course - Build a spa website using react js, react router, json, usestate (Day 1)

hello everybody and welcome to today's screencast i'm going to be doing a react js crash course basically everything you're going to need to know in order to do react.js we're going to start off with some basic javascript that you have to know believe it or not there's not too much javascript that you actually have to know in order to uh write react.js components but you do need to know some and then i'm going to start you off going through some basic component design some design patterns we're going to work our way up to forms we're going to do some react router i'm going to show you how to do state and context and a few other things like local storage so if you're here on the chat do me a favor say hello and i will say hello to you hi eric how you doing i just saw your message come in if you're watching hit that thumbs up so i can see that you guys are watching and i'm not going to worry about who's uh attending and who's not attending or what kind of accounts we have that doesn't really matter to me i'm going to treat this more like a screencast it just happens that it's live and i'm going to check or i'm going to try to check every few minutes um in the chat after i complete a thought to see what's going on try to keep any questions that you have very specific to what i'm talking about today don't try to derail me to something else because i'm not going to answer those questions we're going to be dealing with the react js crash course so let me just make sure that you guys can see my visual studio code and doesn't look like you can so let me fix that okay so we got our code window we got our browser we got our terminal we got the camera and we got chad looks like we're good to go so again if you're just joining us my name is mark from devmentor live and actually let me check one more thing let me make sure i'm in focus here i gotta do manual focus pooling myself because i don't have any assistance all right so this is uh mark from devmentor live and i'm gonna be doing a react js crash course starting with the javascript that you need to know in order to do react moving into create react app basic component design some design patterns managing state forms creating your own form control components creating your own components in general how do you combine components together uh we're going to go through things like react state react router we're going to look at higher order functions we're going to look at the three different levels of state so you've got component state you've got container state and you've got context state and then you've got storage methods like local storage so if anybody has any questions about what i just talked about you can go ahead and type them in the chat i'm going to be monitoring the chat from the time from time to time after i finish a thought i'll look at chat see what's going on if you have a question that is directly about what i just talked about then see index db is not react at all that's what i'm talking about we're not going to do things that are not about react if the questions are about react.js the rac.js crash course that's what i want to hear i'd rather not have a whole bunch of things that are not related to this course in the chat by the way just so you know what react is and what it isn't react is a front in library react is not a framework react is not a full stack framework react is not a thing that interacts with databases it doesn't interact with http requests it doesn't do any of that it is just a front-end library that allows you to build complex uis simply easily and functionally should you choose all right i don't see any questions that are directly involved in what i was just talking about so i'm going to get started we're going to start off with what are the js fundamentals that you need to know in order to do react js i will not be talking about typescript because typescript has nothing to do with react i will be talking about prop types because prop types are a part of react.js okay so let's get going here this is a crash course to javascript it's going to be very fast no i don't do typescript and typescript is not part of react stop asking in fact i don't even like typescript it's garbage um back to what we were actually talking about in javascript you have three different ways to declare a variable this is important because you have to know when to use which version to declare your variables okay so of course everybody knows that you have the var and var allows you to set some sort of value to a keyword and then you can change that keyword so we could now say sumvar is equal to one and if we were to do a console.dir and print out some var we're going to see the value of one because it was the last thing that it was set to when would you use var you would use var if you're writing vanilla javascript for browser and the reason why is because if you're writing vanilla javascript for a browser what you're talking about there is something that has to be compiled down to es5 for maximum compatibility amongst the browsers and since var was the first way to declare a variable going all the way back to the invention of javascript in like 1995 or 1996 um that is the way to do it again if you're doing vanilla javascript you're writing plugins for vanilla javascript or you're writing javascript directly for the browser i'll just i guess now i'll take it off so if you're writing code for something that's going to be transpiled transpiling is the thing where it takes like es6 code es 2017 es11 and it turns it into es5 code that is transpilation so it's not really compilation because you're not taking that code and turning it into machine language you're taking the more advanced more recent javascript and you're porting it backward to something that's more compatible for the different javascript engines like node.js chromium firefox etc when you're using something that's gonna be transpiled which is like babel things like that my advice is for you to always reach for const unless you have a good reason not to reach for const i've been a programmer for a very long time now i started coding in 1993 i got my first professional job programming javascript in 1997 i think it was might have been the end of 1996. and the thing about coding over a long period of time is you learn what not to do and the only way that you learn what not to do is by doing the that you shouldn't do and then dealing with the ramifications of doing those things so one of the things about programming is as you're reading your code to try to find where the bugs are every time you hit a variable you have to think about what is in that variable and not just what is in that variable but what is in that variable at this very second because you can change values inside of a variable right so if you change the values inside of variables you constantly not only have to think about what's in that variable what's what's the type that's in the variable but you also have to think about what the value is in the variable and so it gets to be very difficult to read your program to debug it because humans are not computers right so if you instantiate all of your variables as constants unless you have some other reason to do something else you will find that it is much easier to rationalize your code because you're you don't have to know what the type of the thing is you don't actually have to like remember well it was it was one a minute ago and now it's 15 and in two seconds it's going to be 25 things like that so you create a const like this it's very simple some var and you can set it to some vowel right this is a string in javascript you have strings you have numbers you have floats you have booleans and you can also do expressions as boolean so you could say something like 0 is equal to 1. this is also a boolean because it's an expression that's going to evaluate down to a boolean okay so when do you use let's well if you have a for loop for instance we're going to be like let i equals zero and then while i is less than some len then you're going to increment that value this is one of the only times that you're going to use a let and if you find yourself using a let for some other reason it probably is coming down to you not reaching for the right paradigm for the code that you're trying to express in 99 of the code i write there are no let's because i tend to use iteration instead of loops loops might be faster but we don't write in javascript for the speed although the v8 engine is very fast if you care about writing for ultimate speed you should probably be doing something in like c plus plus or c okay so that's how you declare a variable there's a couple of different ways to declare functions and you'll see me do this one more than anything and again this is because this is the original version and some people say well isn't let's just call this f1 and this one will be fn2 and const fn3 equals some arrow function so are these three things the same thing and the answer is they're not the nice thing about the first version which is the original function declaration is that if you are looking through a stack trace or if you're looking through a javascript map or if you have some sort of thing like redux dev tools or react dev tools and you want to know the thing that actually had the problem if you do it this way this is a very it's a function that has a bound name so it's always going to display the name and it's easier to debug this sort of thing now the thing you have to remember about this is that you always have to put an explicit return and if you don't put an explicit return it's going to return undefined then you have a function expression which is what this is now this is an anonymous function it doesn't actually have a name you're assigning a variable to the to the the definition of that function but it's a function expression it's definitely an anonymous function so the problem with this is that when you're looking through your code and you're getting back some sort of a stack trace error or if you're looking through like say react dev tools and you're trying to figure out which component had the error if you instantiate your components like this it's not going to necessarily tell you the name of the component because the function is the component that had the error okay on this one you also have to have a explicit return okay the last one here is also a function expression um but it's known as an arrow function and it's because it's got this little fat arrow right here this one and this one are almost equivalent the only difference between the two is that the lexical location of the keyword this in an arrow function does not refer to the function itself it refers to whatever is up here okay so the context of this is automatically hoisted up into the next level so if you put this inside of a class this will point to the class if you put this inside of an event handler the keyword this will point to the thing that created the event so if you put it in like a click handler then the keyword this is going to be the element that had the click handler my rule is i almost always do this which is the typical original vanilla javascript function for several reasons one is it's easier to debug two is there are some memory tricks that are being played under the covers with javascript that actually will make this a little bit more uh performant although again if you're writing javascript for performance reasons it's probably not the best reason to write javascript i don't really use function expressions that often although they're considered to be a more like functional programming style and the reason is because inside of stack traces this becomes an anonymous function so to me this is the least desirable out of the three i use arrow functions when i'm going to be doing like something in line inside of a click handler or and here's something else you need to learn so if you have like say an array one two three four and you do a map over that you're going to get a value at each iteration so we could do something like console.log and we can just log out the v value so this is going to print out one and then two and then three and then four this is a reason that i would use a inline function which is an arrow function now remember that these return an implicit return but if you put a function body on it like this you now have to do an implicit an explicit return so this is going to return 1 and then it's going to return 2 and then it's going to return 3 4. okay now map filter reduce sum and every these are features in javascript that you should be using quite often array is the most common data structure in javascript followed by the object and then you have objects inside of arrays let me just check the chats here how to transpile what about keeping score for const var let oh scope okay so you want to talk about scoping we can talk about that so if you have a function and let's just call it fn1 again because we don't really know what it does and we don't really care what it does if you have a cons well first off const var and let what kind of scoping do they have um var all always gets hoisted so say you have like something like this function f2 and here you put a var foo this is going to be automatically hoisted up to this level if you put it here it'll stay at this lexical level the vars automatically get hoisted so say that you have a var down here that var will automatically as far as javascript is concerned get hoisted up to here what i like to do is i like to create constant luts and i like to have them as close to the place where their lexical use is as possible so the nice thing about this is i guess i can't say var let's say v1 v1 is not available here v1 is only available inside of this scope and if you wonder how does javascript come up with this slope it's scope it comes from closures and this is a closure this is a closure almost any time that you see curly braces that is a closure and closures define variable scope what about mixing vars and constant the same project i don't see any good reason to mix vars and constant the same project use vars if you're going to be writing non-transpiled code in the browser use constant lut if you're not when can we use reduce uh okay so first off there's a difference between the reducer pattern and the reduce function so let me give you guys a little secret map filter sum every all of these are made with reduce so under the cover what you really have we're just going to write these out we have one two three four and we are going to do a dot reduce so what we're going to do here is we're basically going to create a map so we're going to have a value and we're going to have an index all right so we have a value and we have an index so what's going to happen here is reduce takes the arrow function that you're going to use and then it takes a value that you're going to start with so if we're going to be building up map we know that we want to end up with an array so to end up with an array we have to make array be the default value for our reducer so to make it a reducer all we got to do is put the acc in front this stands for the accumulator the accumulator is the thing that you're building up in your reduce call so all we'd have to do here is just say that we're going to take that reducer and we're going to push on the value v and then we're going to return the acc and we can check this out if we just go into here we type node and we paste our code we can see that we get this value okay so if we're going to define a function called map a map is going to take a function that's going to map over and it's going to take an array to start with our code would look like this we would be returning the array dot reduce where we're going to have our accumulator our value our integer and you know it's probably better if i do this here otherwise it's really hard to type in the uh the terminal so we're going to create a function called map right and map is going to take the uh array the source array and a function that's going to be the transformer for that then all we have to do is say that we're going to return the array like this and the function now becomes the thing that happens here so what do we do well we just wrap our value inside of that function call so let me just find where i'm missing a value it's complaining about one curly brace we've got this we've got one two one two i think it's complaining because of this stuff up here nope i have a big glare on my screen that's driving me crazy so we're gonna do array reduce we have a function that we're passing in we have our accumulator we have one function body here we have our default value ah right where the glare is okay so now we have a thing called map right so we're gonna map we're gonna do one two three four and as you know that the way that map works is that you get an arrow function and it's going to apply that transformation to the thing so if we did something like v times 2 we would essentially have a square function so now you can see that it becomes 2 4 6 and 8. so that's how you make the map function out of a reduce you can do the same thing for all the rest of them right so let's make a filter really quick and by the way map reduce filter sum every these are things that you're going to be using in your react components a lot because react components are based on functional state changes that then re-render your component so your collections are always going to be either an object javascript object or javascript array by the way javascript object is just an associated array it's an array that has an associate hash value so let's make filter so filter is pretty easy it's exactly the same as map except filter is only going to return the value if it matches the expression so instead of a function we're going to say this is our expression and all we're going to do is we're going to say that if the expression returns true we're going to push that value on so now if we do the exact same thing and we come back up to here and we say we're going to map over those values only this time we're going to change it to a filter and this time we're going to say something like v mod 2 equals 0. so now what you see is that we get all of the values that were inside of our array that are divisible by 2. let's check the the comments i would love to know a quick overview of some of the javascript properties like filter sum every index of i've seen you using it many times in your projects yeah i use them many times in my projects because um i tend to be more of a functional programmer now i don't code in haskell i don't code in scala but i've written a lot of scheme code i've written a lot of lisp code and what i've found is that for me i find the functional programming paradigms to be a lot more useful and less buggy than the object oriented uh programming fundamentals so i tend to go functional instead of object oriented i tend to go declarative instead of imperative a quick overview of some of the javascript properties like filter sum those are not properties those are functions and that's basically what i'm doing right now i'm showing you how can you build some every map filter using reduce which is what we're doing here now you asked about index of i'm going to do index of next um so index of index of is very simple in fact i don't need to do in here i can just say one comma two comma three comma four dot index of four and what you'll see is that comes back as a three because the four is in the fourth place javascript and most programming languages count from a zero so it's going to give you that thing if we say 5 we're going to get a negative 1 because it's outside the bounds of the array it looked in the array it looked for 5 it didn't find it you can do the same thing with a string a string internally inside of javascript is just an array of characters so if you said give me the ng what happened to it yeah string dot index of ng it's going to give us a 4 because 0 1 2 3 4. if we said s it's going to give us a 0 because the very first character index is the one that matches and if we give it something like a z we're going to get a negative 1 because it's not in the string where can we learn functional paradigms um your best bet to learn functional programming unfortunately is to pick up a little bit of lisp or scheme and i know it freaks a lot of people out because it looks like this you have like um you have parentheses and you have a plus and then you have three and you have four that's how you would add three to four in lisp it's kind of weird but actually if you think about it this is how calculators work so then you might have um multiply 4 5. so what this is actually going to do is because this is the innermost parentheses it's going to multiply 4 times 5 and then it's going to add 3 plus 4 plus whatever that value was so 20 so you'll end up with 27. that's kind of weird for people that are used to the the plus sign or the operator being in the center of the equation your best bet to learn some functional programming paradigms is to just do youtube searches on how to write uh you know how to write more functional programming code using javascript or ruby or python or whatever it is that floats your boat the thing about functional programming is you have functional programming languages you have functional programming platforms like uh java is a platform it's a language but it's also a platform ruby is a language but it's also a platform it's not a compiled thing so the platform is what interprets the ruby or the java either down to bytecode or just down to executable code so you have functional programming languages you have functional programming platforms and then you have functional programming paradigms and the nice thing about functional programming paradigms by the way for people who have seen this idiot who keeps coming on my channel and yelling javascript doesn't have tuples um yeah javascript doesn't have tuples but it doesn't have tuples in the sense that scala has tuples all right or the new new version of c plus plus has tuples but there is absolutely no reason why you can't have a getter and a setter return from something that is a tuple it is a fixed length array of two it's just that the language is not forcing it on you this is a functional programming paradigm versus a functional programming language feature if javascript was a functional programming language feature we would probably have something like new tuple and you would give it something like a getter and a setter right but that doesn't exist well it doesn't exist in the standard library but you could easily build that yourself you could say um okay i've got a function it's called a tuple and it's gonna get a getter and a set we'll actually we'll say um it's gonna get some vowels and it's going to have it's a tuple of two right so we've defined the the dimension and we've defined the values that are going to be in the dimension and then you could do stuff like um head and rest i'm probably getting off topic here head and rest equals some array that looks like this and if you just do that that again that's a tuple that's also functional programming and you will see this sort of destructuring happen in react all the time uh what other element of es6 are important for react honestly if you know how if you understand the difference between var constant let and you understand how javascript hoisting works and you understand how javascript scoping works and you know how to do map reduce and filter you pretty much know the basics of what you need to do javascript i mean obviously the last one is objects right so you've got some key you've got some value you've got another key and you've got another value that's a javascript object and then you can also have a javascript object that has arrays inside so it might be a and then you have an array and that array might have more javascript values like so if you know that data structure you know the array data structure you know the object data structure by itself and the combination of object and data structures together which essentially is what json is that's all you need to know out of es6 sorry i kind of glossed over it if you have an array and that array is equal to one two three four five and you wanna get you wanna split the array so that you say okay give me the first value and then give me the rest you could do first comma dot dot dot rest equals array so now if we type first we get a one and if we type rest we get the rest oh because i accidentally said reset so there that's the head tail paradigm in functional programming and you'll see you'll see that in props right you'll have a you'll have a component let me just change this to a component for a minute and in order to use my shortcuts i'm going to have to change this to a jsx file so you have a component we'll just call it comp and this component is going to take some props right so this is the standard way of creating a component in javascript in react sorry and the argument to component is your props let's call it something different let's call it sum component okay so you have some component and it has an argument called props what that means is somewhere in your code you have some component and you've got prop 1 equals a 1 and you got prop 2 equals a 2 and you got prop 3 equals 3 okay so let me break this down this is the name of the component this is known as jsx or javascript xml although it doesn't have a lot to do with xml this is your first property it has the name of prop 1. the value is a 1 and you'll notice that it's inside of curly braces that's because if you're going to be doing something that's not a string it has to be in curly braces so this actually keeps it as a real number you got another prop called prop2 that also has a value that also is an integer and it's the value of 2 prop 3 the value of 3. so you can if you do this you would have access to props dot prop 1 prop 2 prop 3 or you could destructure it like this and you could say prop 1 prop 2 prop 3. so then you could do something like this where you're returning prop 3 prop 2 or prop 1. now you can also do this you could say i have prop 1 and then i have all the other stuff and so if you were to do rest here you would actually get an array of props so this is something else that you'll find in react let's just change this to app actually i'm going to regenerate this so we actually have a react component using create react damp create dash react dash app we're just going to do it right here and let's see so props is basically an object yes it basically is an associative array you've got an object of keys and the keys have values what functional paradigms are most important for improving on hooks so one of the reasons that functional programming became really useful in react is when es6 classes were shoved into the javascript spec by people like microsoft and people like sun microsystems i.e the java guys um their argument was hold on i gotta apparently i gotta remove that file first the argument was in order to do object oriented programming we need es6 to have classes two problems with that one is javascript is not an object-oriented programming language it is a prototypical language and you could even say that it is a somewhat functional language now that makes it a multi-paradigm language you could write javascript in object-oriented style you could write but it's not an object-oriented language you can write javascript in a functional programming style but it's not a functional programming language it's a multi-paradigm language um so when es6 came out basically everybody started writing es6 classes because that's always what happens when something new comes out everybody jumps on the bandwagon and they just they figure if it's new it must be better right not really when something is new have you ever installed a brand new update to your operating system which left your operating system crippled and then you couldn't get any work done before a deadline to me that's what new is new is something that is not proven yet new is something that it could be better but the jury is still out so my my rule is when something new comes out let everybody else fall on that pike or on that sword and then after a while i can look at the battlefield and i can see the devastation and i can see okay that new technique didn't work so well so maybe i shouldn't do it because i don't want to die too so everybody jumped on the es6 bandwagon everybody started making the react components out of es6 which introduced all kinds of headaches this is why you had all the different life cycles there is component will receive props component did receive props component did mount component will mount now it's it's the preferred thing to use now it's decremented now it's removed from the language now it's depreciated just a big mess and okay well if you're going to use components and you have to use constructors but if then if you use constructors then you have to bind your your object methods and but oh look if you use uh arrow function for your object methods you don't have to bind it in the constructor anymore because the variables that are inside of object methods and the this keyword inside of that arrow function will automatically hoisted be hoisted up to the object okay now that that's out of the way i'm glad we're done with es6 classes you don't need them you shouldn't use them in react okay so that opens this up to all kinds of opportunities using functional programming which is essentially what hooks are hooks are a way what is a function now it's not a class it's just or sorry what is a component it's not a class we don't do classes anymore it's just a function how do you create a prototype in javascript with a function how do you create variable scoping in javascript with a function how do you create a hook with a function what is the use state call it's a function so you can see function function function functional programming is the art of using functions that are pure which means that if you always give it the same input you will always get the same output and it doesn't it doesn't do any side effects by the way the difference between a function and a method is just this functions don't change the outside world so functions are considered pure because they have no side effects methods are usually attached to objects and they're used to manipulate the object data which is changing the outside of the world which is also known as side effects hola hello milan how you doing is there any difference between using extensions jsx and js not to not to the javascript language or the react interpreter or anything like that but that's like having a dog and calling it a cow a dog in a cow are not the same thing javascript and javascript xml are not the same thing so you should name your javascript xml files which is jsx jsx and you should name your javascript files which are javascript.js because there is this little thing called standards i know that a lot of the the new hipster millennial programmers and even zoomer programmers don't want to believe that standards exist they're apparently some construct of the patriarchy but standards exist and they exist for good reason the standard file extension for javascript is dot js the standard extension for javascript xml is dot jsx so here's how you figure out which one is which look inside of your javascript file does it have any html if it has html then it's javascript xml look inside of your javascript does it have any html if it doesn't have any html it's a dot js it's that simple so any other questions before i move on we're about to start creating uh a react app and we're going to do it as a website so that we have use for react router and some other stuff and also if you guys uh have any suggestions on what kind of website we should build you can go and leave those in the comments should we build a shopping cart page or should we build some sort of game or should we build a blog not with gatsby just like pure pure react or should we build uh you know a collection of landing pages or something or should we build uh a wizard where you have some sort of like step one step two step three step four you're done do angular double braces and react single brace perform the same thing yes in angular the double braces is just a way of saying this is a javascript expression and in react we use a single set of braces because why do you need an extra set of braces although in react you will find double curly braces when we have a expression that has an object inside because an expression in react is marked with curly braces right and an object is is surrounded by curly braces so if you put an object inside of an expression you end up with double curly braces 3d game 3d is not really a good option for react react is not a 3d environment shopping cart which well i mean gagadesh if you if you vote for every option you're voting for no option so let's hear it from some of the people that are watching what do you want to see us build uh react zero to hero style are we gonna do a blog are we gonna do a shopping cart are we gonna do like a typical web page where you have landing pages um or we could build some sort of game like a yukio style card game or memory game where you know like the cards flip and stuff admin dashboard okay but to have an admin dashboard what are you administrating also remember that the concept of admin dashboard means that you have some sort of database react does not do databases the databases and react have nothing to do with each other so far we have see that's the thing crud has nothing to do with react crud is create read update delete that means a database that means a server react is not a server react is not a database so so far of the valid answers we have okay what's a better web development environment for 3d games then i don't know because i don't do 3d games um social platform is going to be rather hard because social platform requires a database so far we have uh two votes for like a regular website with landing pages we have three votes for a blog anybody else want to vote before we cut off voting and start building a blog we also have one vote for a shopping cart so the options are shopping cart blog or just your typical website if you want to vote toss your vote down in the chat the gnomon ahmed says landing page shopping cart functionality so we could just do both actually that's a pretty goddamn good idea to be honest um maybe we should just build a website that has a blog and a shopping cart if you'd like to see me build a website that also has a blog and also has a shopping cart do a plus one down in the chat remember type plus one in the chat if you want to see one that has all of those features okay now it's coming in no a blog doesn't actually require db you can use json to do blog posts i have to put some wax on my braces because my lip is getting cut up i will be right back now i forgot to put wax on my braces you all right so it looks like we're going to be building a website that also has a blog and also has a shopping cart all right so i just generated this with create react app which is perfectly fine for what we're doing if you wanted your your website to show up in a search engine like google or yahoo or bing or something you would not want to do this route because the only way that your react site is going to rank well with search engines is if you do server side rendering for all the public pages so if it's a page that's behind a login you don't have to do server side rendering for those pages because google and the other bots can't get past your login page anyway but if you have like landing pages blog posts things like that and you need visibility inside of google yahoo or bing you would have to do server side rendering so in that case i would recommend that you start with either gatsby or next js but we're not going to worry about server-side rendering here so we don't care the first thing i'm going to do is i'm going to delete all of the stuff that i don't need so basically all that we're left with is just this index.js i'm going to then delete the index.css because i don't need it i'm going to delete the app component because i don't need it i'm going to delete the service worker because i don't need it and i'm going to delete the call to unregister because i don't need it this is not how i structure my apps okay so we have to have some sort of app component we're going to get to that in a minute let's go to here we're going to change this to index.jsx because there is html in here if there's html in it then it's javascript xml not just javascript so the first thing is we have to import some app component because it is used right here so we're going to import app from dot forward slash lowercase app my file names are always lowercase and where there would be spaces or underscores there are hyphens and again this is because this is the standard for urls and the standard in linux for file names i also create all of my components as folders because then my component if it has images and style sheets and other assets they can all be inside of the same folder which is a good way of doing encapsulation so that i don't have to go looking through 10 000 lines of css code because all my css is in one file somewhere else i like the the concept of locality the concept of locality is a good programming habit the idea is declare something close to where you're going to use it so if you're going to have a component file that has css and that css is going to be inside of a css file create it as a folder put the css inside the folder it might have some some json right it might have a json file so the json file would go inside of the folder the side effect of this is your imports are going to be a lot shorter because everything that you need for that component it's going to be import dot forward slash whatever the thing is right so we're going to create an index.jsx file inside of here we're just going to create a react component and i'm using emmett to auto complete this because i have created my own user snippets which you can see here and if you go to javascript react.json you can see how these snippets are created so i have a snippet called create component it's got a prefix of rc if i type rc and then i hit tab it will fill out the rest of this for me so i don't have to always type it okay so this is our app component it doesn't take any value so far and we're just going to do a div dot container now normally in my screencast i kind of skip the css because most people i guess don't want to watch you sit there and and tweak css but in this one i'm going to not skip anything we're going to go through everything so where does this class name come from well we're going to import dot forward slash styles.css i know some people do css components and some people do sas and all these i just like css i've been using css for a long time i have variables in css i i think it's fine so inside of here i'm going to create styles.css now i'm going to create a container class because the container class is going to give our page some shape so what is container class okay so we're going to set this to a max width of say 700 pixels what this means is that if you are on a browser that's bigger than 700 pixels it's going to constrain everything inside of this container or it's going to contain it inside of 700 pixels then we're going to do a margin 0 for the top for the left and right and for now let's just put in an h1 tag that says welcome to the machine and we're going to start this up in our terminal with yarn start and once that kicks off we can open up in the browser and we won't see this login anymore this is from a different project i was working on the norman aquaman says is it possible to have our app using cra and landing marketing pages built using gatsby or next you wouldn't use create react app if you're using gatsby or next you would use either create react app or gatsby or next next js that is i should say okay so here's the interesting thing you see what's going on here we have actually let me switch to this mode in the inspector if i hover over my container we can now see that the blue section is actually like what's inside of the container and the yellows are the margin so you can see how we've now got an equal margin on the left and on the right and that's the point of that margin 0 auto is it's going to automatically figure out how big is your screen the container is 700 pixels what do we do with the other stuff we put an even margin on each side this is how you get your content in the middle of the browser but also still have that spacing can you talk more about component and architectural design as well yes i absolutely will ben uh what export default refer to okay so why export default to do to show you this i actually have to create like a javascript module um in pure javascript there's this thing called common js which is what gives you the ability to import and export so it looks like this you've got module dot export and then you say the thing that you want to export so what this is going to do is it's going to export a function called fn and then what you can do is in some other file you can say i want to require dot forward slash fn and i'm going to call that fn okay so this is common js module import export then you have babel import export which is a different thing remember babel is transpiled from es whatever using es11 es9 es7 down into es5 and that works like this so say that we have a function called again i'm just going to call fn1 we don't know what or care what this thing does so it doesn't really matter and we're going to have fn2 so we have these two functions and we want these things to be saved inside of a file so let's save them inside of our app folder as just a javascript module we'll just call it fns for functions.js so how do you get the function from here into here and the answer is you import it so let's say we want to import fn1 from dot forward slash functions we can't do this just yet because the function one is not exported in any way okay so if we do an export default this function can now be imported just like this if instead we did just an export function too we can't export the or we can't import function2 like this because that is a default export what we're talking about now is a named export we have exported function2 but not as the default so the name of the function matters the name of this function doesn't actually matter because it's the it's the default export we could call that function 1000 or 10 000 or 100 000 or whatever that is whatever the whatever the default function from a file is exported as doesn't matter you can name it anything you want on the import for named functions it matters so this one is named fn2 and it was exported as just a regular function so it has to be inside of the curly brackets so what if you have something like data table and this is a component that is inside of this file but the problem is you already have let's say it's app so you have this app component inside of this file it's a named export but you have an app here so you can't have the same because it's going to clash right with named functions you can just say i want to alias it as app2 okay so that's the import export of functions we'll probably get back into that later but that's the basics so all of your javascript or your react components that you're going to be importing like this they have to be an export default now we could have done this and then we could have done that but that's not the convention the convention is that you should export one default component from each of your react component files so export default function app can we have two default functions in a file no you cannot have two default functions in a file okay so let's do this let's go back to our container if we give it a background color of something totally obnoxious like blue can now see physically what is inside of the container and that's a trick that i use a lot when i'm doing like flexbox or some sort of layout and i want to see exactly what this thing is taking up space wise i can do that okay so we've got some sort of landing page header this is our default app but what if we want the landing page to be configurable i don't know how much you guys are uh knowledgeable on landing pages basically a landing page is any page that can be indexed by like one of the brows one of the googles or one of the search engines or like somebody else is linking from reddit or hacker news to your site that would be a landing page so there's a home page in most sites but homepage is just a special landing page that is at you know whatever your website is website.com forward slash that's your home page which is also a landing page let's do this let's create a all websites have a layout right when you're going through a website most of the pages have the same general look even if the stuff inside is different so let's start by creating a layout so inside of app we'll create a new folder and we're just going to call this layout and what we're going to do here is we're going to create a component that takes other components and then we'll style it as a layout so we're going to create index dot jsx and again we're going to generate our component this one is going to be called layout now we're going to learn about a new piece of react called children children is a special prop and react and here's all it does we're also just going to return those children here and let's just put that inside of a fragment by the way this is a fragment it's just a div basically that doesn't have the word div inside but we don't really need that right now i'm just going to return the children directly so what is a child well if we import layout from dot forward slash layout we can now replace this div with a layout let's take our container and let's move that inside of our layout like so and then we can use children to display that now if you look it still looks exactly the same right so what's happening here is our layout component is getting this h1 as a child and if we had a p tag that had a lorem ipsum inside of it you can see you got your h1 tag and you've got your p tag these are the children that i'm referring to here they're the same thing and then those children are being put inside of a div with the class name of container right here so that's how you pass components into other components now generally a website has a header and a footer so let's do that next let's create a folder inside of layout called header and let's create a folder inside of layout called footer so inside of header we're just going to do index.jsx and we're going to generate again a react component import react from react export default function give it a name this one's header and we're gonna probably have some properties but for right now we'll just do that and let's just do it's a div with a class name of header and look for now let's just say it's a header then let's do the same thing for footer we're going to create an index.jsx we're going to create our react component we're going to call this one footer it's going to take some properties but we don't know what they are yet and we're just going to do a dot footer div and we're just going to put the word footer in it and now inside of our layout we can say import header from forward slash header input footer from dot forward slash footer open this up header forward slash we'll turn that into a self-closing tag through emmet put our children and then do a footer again as a self-closing tag hit tab we get our header our children and then our footer and then you can see here here's our header here's the content for that page and here's our footer let's check out chat and see what's going on i know that's a weird question i'm sorry for which are here to learn but i am as well i'm a beginner and my question is so popular but the question sounds like that why react and not view for beginners i don't know maybe you'd have to ask a view developer who also does react i don't do view that answer view can be working without javascript or without typescript is not correct um react does not have to have typescript nothing has to have typescript typescript is microsoft's attempt to divide the javascript community here's why i don't like typescript i don't like it for the simple fact that it's typical microsoft propaganda what is the number one programming language in the world javascript what has the largest community of programmers in the world javascript what is the most used language in the world javascript aha but now microsoft comes by with this thing called typescript microsoft has two principles that they live by one is embrace and extend it means find something that everybody else already likes that way you don't have to do marketing find something that somebody already likes and then steal it make it your own you make it your own by extending it by extending and says hey look this is still javascript but it's javascript with types therefore it's typescript so now what you've done is you fractured the javascript community it's the exact same thing as in warfare if you've got a giant army if you can divide that army into two the army becomes half as strong each of those two segments are less than half as strong as they were when they were one piece so it's literally straight out of the art of war and typescript is responsible for fragmenting the javascript community we used to be the most powerful programming community in the world and now we're a lot less because typescript has divided us back to here view is more natural if you're coming from jquery or angular react basically turns all that on its head and put everything in the js file instead of breaking out of css yeah here's the thing about um here's the thing about react here's why i like react it used to be that html was the backbone of your web page so you had html that gave it when i say backbone i mean like the structure it's what held up the web page and then you would put some javascript here and some react or some css here and some more javascript here and some more css here react flipped out on its head and said html is actually a really shitty backbone it's it's not strong at all it doesn't give you any support it's not it's not it's not extendable it doesn't have any power to it it's just a markup language there's nothing to it so what if we instead of the html as a background what if we made javascript as the background now javascript is an insanely powerful and it's built into every web browser in the planet so if we made javascript the backbone of the web page paradigm you can now script your your your html and css the way that you used to have to have server side languages so think of like django uh python perl uh ruby you had this language that was run on the server and it would create the html and then send the html down into the web browser with react they were like well instead of putting your html or instead of putting your javascript in your html inside of your your uh sorry instead of putting your javascript and your css inside of your html what if you put your css in your html inside of javascript why would you want to do that well you can't program loops inside of html you can't program loops inside of css but you can program loops inside of javascript so that means you could take this piece of html you could take this data structure which is an array you could iterate over the array and you could print out multiple copies of that html the way that we used to have to do it on the server but you can do it all in the client that has been microsoft's business plan since they started absolutely nicholas i was around in 2000 for the browser wars and they this is not the first time they've done this they they first called it jscript and they said microsoft internet explorer does not support javascript but it supports this thing called jscript which is basically javascript but we've changed just enough things that they're not the same anymore why so that we can get a copyright on it we can get a trademark on it we can say that it's our own thing and we can convince the corporations to have their developers build web pages that only work in microsoft internet explorer why is that important because now we control the entire world through the web then jscript failed and so then they created vbscript and they were like ah but there's this wonderful language called visual basic and if we just put that in the browsers we could again take all of the internet traffic of the world that failed too but for a long time internet explorer had like 98 of the users in the world which is ridiculous imagine out of all the grocery stores in your country there was really only one and if they didn't have what you needed you couldn't find it that was microsoft's policy for the longest time and honestly i think it still is dead mentor thank you for your awesome answers well sure that's what i'm here for my friends but since react is no longer dependent on redux for state management even creating lightweight web applications is not complicated um yeah that's the other thing is the functional nature of react is its strength so what i would say is that the the best thing about react versus vue or angular is the way that the uni-directional data structure works and the fact that you can create um you can create components that are essentially data driven which is you can do it in angular and view but it's not as natural as it is in react okay so back to the layout so here's what we have we have i'm just going to close this stuff up we have an app component the app component is used here and if we open up the folder and we look for the index.js that's the entry point to the app component now we have the app component okay so what is inside of the app component well right now we have this layout and the layout is essentially a component that wraps our content and gives it some structure for like a typical web page and then we have this content but the content really shouldn't be hard-coded directly into the app component because then we can only use it in one place right so what if we had a folder inside of app called pages and what if inside of there we had a folder called home page and what if inside of there we had an index.jsx so it becomes a component and then we said okay well this is my home page and then what we could do is we could take all of this content out we go to our home page we can return a javascript fragment okay so a react fragment is basically a div but the thing the reason why you might not want to use a div is a div in html actually affects the layout spans go across your web page like this divs go down your web page like this divs also have margins and paddings and other stuff so if you wrap all your components inside of divs you end up with divs inside of divs inside of divs inside of divs and you might not want that you might want it but you also might not want it so if you don't want to use a react fragment which looks like this i mean you could do react dot fragment but why it's too much typing just do opens angle bracket closed angle bracket open angle bracket slash close angle bracket that's a react fragment so now the question comes how do we get this home page inside of our app because if we save this we have the header and the footer but our content is gone right so one answer is well we can just say we're going to import the home page from dot dot forward slash sorry dot forward slash pages slash home page and then we could just put the home page in the layout and when we do that it comes back but now we're stuck with the problem of uh basically our our web application can only have one page because the home page is hard coded here inside of our layout so what should we do here to make it so that we can have more than one page inside of our app the answer my friends is to do a yarn add react dash router and react dash router dash dom react router will allow you to look at the url of the page and then determine which component is going to load when you're at that url that's all it does should the container css and the layout be in the layout instead of the app since that's where it is used absolutely ben spot on so currently our css right here is inside of the app right but the only thing we really have in it is the container and where is the container used the container is used inside of the layout so what ben is saying is absolutely correct again this is the principle of locality in programming the things that you're using should probably be as close as possible to where they're being used so what i would do is i would just drag this right up here into my layout i would get rid of this import styles.css here and instead i would put it in my layout now there's one more thing about the styles um the reason people use styled components is for two reasons one is you can you can put javascript inside of your css so that you can have like calculated values based on your javascript but the other reason that they do it is because they're worried about collisions but we can solve that with pure css selectors you don't need styled components for this so we're just going to do underscore underscore dml underscore actually you know what we'll just do it like that underscore underscore dml is one thing and then we've got our container so if we put them together okay so here's another thing so you've got this div uh actually let me do it here you gotta div with the class name of container what is the difference between dot dot underscore underscore dml space dot container and the other one well the answer is this this would require us to do underscore underscore dml as a class or sorry as a div and then we would be able to put our other div inside but i don't really want to div inside of a div i just want container but i also want to scope it so that i don't have to worry about my class clashing with other selectors so we can do this we can just say get rid of the space in between and now what we have to do to make it match is to do underscore underscore dml space so if both of the css classes are in the same class property then it's kind of weird they look like this so if in the if in the javascript xml there's a space between the class names then there's no space between the class names in the css if you have a div inside of a div like this then you would have a space between here hopefully that that clears it up a little bit okay let's get yarn going again we come back to here we can see well once it boots back up we'll be able to see it by the way how was the audio today a couple days ago i tried to do a screencast and i didn't realize it but the audio was really really messed up css modules are fine um but i don't use things unless i have a good reason to use them i don't like extra dependencies in my application so for me i have never needed to use css modules just haven't needed it when i find something that i can't do without css modules i'll think about using them thank you ben audio is great okay so now if you look here if we expand root we can see that we've got this dml container and that dml container does the scoping with just regular css the other thing about css modules is it does scoping automatically if you use css modules in your component it creates a underscore underscore well it doesn't do underscores but it creates like this extra selector that is randomly generated so that it'll never clash with somebody else's library is that css best combination then i don't use sas either used sas back when we couldn't have variables inside of css but we can have variables inside of css now so it doesn't matter and i will show you what i mean by that so if we put the import styles.css back here in our in our app component and we create another file styles.css we can now say colon root and we could say things like um dash dash red is equal to give it some value looks like i need one more and then we could say okay well i want my reds to be i don't know maybe that color so this can now be used anywhere so if we go into our home page maybe we could say that we have a actually let's go to one that already has a style sheet so if we go into layout if we decide maybe that the header is going to be red we can say that this let's do the container if the container is going to be red we could say that the background color is var dash dash red and now it's red so you can see that you can have css variables now inside of just regular html css without having sas so i don't really use sas the other thing that you might want to have inside of your root declaration is the default font size so the default font size for most browsers is 16 pixels but by setting it inside of here you're guaranteeing that every browser no matter what the default font size is going to be 16. so if somebody's using opera or something else that might have a different default it'll make all of your site look the same in every browser crystal clear audio great excellent uh sas let's see do use post css is another dependency it's great for optimization again like i built i were i helped build the original twitter when it was ruby on rails um i didn't need sas then either um people say well you don't work on big websites i used to work for intel i mean we built giant giant sites uh i worked for upper deck which is the card company that makes like yu-gi-oh and well i'm old and i don't know what card games people play these days if they even still play them um but i've worked for very large companies that have very very large websites i just don't if i don't need something i don't use it and i don't go looking for problems or i don't go looking for solutions for which i don't have problems why not use ram instead of px okay so that's a good question and here's why where i'm declaring font size 16 px here you can't put a rim here because rem is relative to the root that's what rem means so if i then said something like okay well i've got a html comma body and i want all of the body text to be a little bit bigger i would say font size 1.2 rem and you see everything gets a little bit bigger what does that mean well that means that this is 1.2 times this size so i'll just open up a calculator here and i'll say 16 times 1.2 whoops that's not a calculator 16 times 1.2 so this is now 19.2 pixels so rem stands for relative to the root em so it's a variable size which is what em means and it's relative to the root size which is declared here let's close up all these files because i don't like having a lot of files open and i don't have stuff open that i'm not currently working on so we were gonna work on the react router part which i think is really important okay so here's our app and inside of our app we've got this layout and then we've got this homepage but we don't want the homepage hard-coded we want to be able to select the home page based on whatever is up here so if we're at forward slash that should be the homepage but if we had dash about us we don't want the homepage we want the about us page right so here's how you do that we're going to import the browser router which is a named export from react dash router dash dom then what we can do is we can wrap our home page inside of here but now we have to define the method for switching so that comes from our switch component so put a switch component in here we're going to wrap it around our home page by the way some matrix trivia if you didn't know the reason that the character's name was switch in the matrix is because she was actually transgender and in the real world she was supposed to be a male character and when she went into the matrix she became a female character because you know it's just an avatar of you and they dumped it because they were like nobody's gonna understand that it's the same character so anyway there's some matrix trivia um so how do we make it switch for the home page based on the route and the answer is we also have to include our route component so how does that work well it works pretty easy you go we do this you say okay well i got this route i'm going to wrap the homepage component inside of that route and then i'm going to say that the path to get to this thing is going to be forward slash so the same thing happens as before but what happens if we do this what happens if we say i'm going to create an about us route and i'm going to create an about us component so this is our about us page just like that and we're gonna say that this is also uh okay so it just has a fragment and we're gonna just do an h1 and we're going to say about us now we can require it about us page from pages about dash us i can use calc for responsive font size yes you can do calc so if you notice i'm at the about us route right which should be this one but we're at the home page still but watch what happens if i cut this one out and i put it below my about us now we see the about us page so the problem with this approach is that it's based on the order and you don't want things based on the order and programming as much as possible so what i'm going to do is i'm just going to put an exact property here by the way in react anytime that you have a boolean property if if it's true all you have to do is just put the property in without any argument if it's false just don't put the property in and it will become false so if we change that to exact you'll notice that even though the home page is above our about us page route we are now inside of the about us page because of this exact it's saying only match the forward slash by itself don't match the forward slash with the about us and there's currently no comments so i will just keep going i guess what do you guys think about what is done so far are you guys happy with the pace am i moving too fast as i down my coffee let me check my calendar i don't think i have something right after this but i might looks like we can go at least until about six o'clock central and be okay oh good oh great perfect awesome okay cool so the the the speed that which i'm moving is not too fast okay so we've got let me just go over this again it's important to reiterate what we got going if you can't explain your own code you got a problem okay so here's our root we are going to be using react strict mode we're going to mount our app inside of an element called root if we open up our public folder and we look at the index.html we will find in the body a div with an id of root so the react the create react component here inside of react is just mounting our app inside of that div with the root so we can close this file because it doesn't matter then we have this app folder and inside of the app we have our app component our app component wraps our pages with a layout component and the layout component is responsible for giving us our layout so if we look at our layout component we're just going to be taking a props called children that props.children is then going to be passed here into a javascript expression between our header and between our footer and that's why we get this layout where the headers up here the footers here and here's our content now i want to do yet another abstraction just like layout is an abstraction of the physical layout of the page i want to do another one where we actually have a page and the reason that is you see how it says the title is react app and no matter what page we're on the title is react app that doesn't make any sense the title and the meta description should be very specific to the page that you're on so we need an abstraction for the concept of a page now we have a folder called pages and inside of here if we create a page and then we add it to the router that'll become something that you can actually navigate to but we need to have some concept of a page and since there's no inheritance we're not going to say like home page is a child of page how do we do that well the answer is if we inside of pages if we just create an index.html here or index.jsx here we can create a component called page what does a page have well a page has a title it also has a meta description and it'll probably have other things too but for right now let's just stick to title and meta description now we have to come up with the idea of do we want this to wrap all of our content which we would need you know a dot children but i don't think so and the reason why i don't think so is because the layout is wrapping our content right because the header is up here in the footers down here but when we're talking about the title in the description what we're talking about is changing the actual html so here's the title and i'm actually going to get rid of all this crap that we don't need so we don't need that that's for mobile the viewport is very important the viewport is it's going to relate to everything you do with your styling if you delete that it's not going to be cool this theme color we only need that for mobile it's for android so we don't need that meta description we absolutely do need so we could put a default meta description here and then overwrite it essentially um do we need this touch icon i would say no do we need the manifest no that's all for mobile all right so now our our file has gotten a lot smarter smaller we've got a viewport we've got a meta description we've got a title let's just call this uh default title so now if we reload our page we can see that there's this default title and if we do an inspect element and we look at our inspector we look at our head we can see that we have a default meta description of default meta description so how do you change those things well you can use react helmet to change those things that's what it does but i like writing things myself i don't like using other people's code if i don't have to and me teaching you guys how to do npm install react helmet doesn't actually teach you anything so instead i'm going to show you how you could do it yourself okay so first off we can just make this component return a null because it's not actually going to be something that's displayed it's changing the meta information that's in the head it doesn't actually display anything so how do we get this stuff that we need well let's do a document dot query selector and let's select for a field called title and let's see what we get well we also have to include this so let's go to pages now we have to we have to make a decision do we want to include this page thing on every one of these pages which is a lot of extra work or do we want to say well look the the layout already wraps all of this stuff right because the layout is here it wraps all the pages so i would argue that it's just better to put the page component inside of here and now that i think about it i guess pages a page component is not the best abstraction so let's make another one and let's just call it um well we could do like what next js and gatsby does let's just call it seo so we're going to say index actually you know i can just drag it from here close this one close this one drag that one into here let's rename it from page to seo so now what we can do is inside of our our layout we could just say okay well i also i want the header and i want the footer but i also want this seo thing so dot forward slash footer so we know that it's one one down so one down gives me dot seo and we could just put that here but the problem with that is is every single page has to have a different title and description so by putting it inside of the layout like we did it doesn't really work because then you can't give each of these pages their own you know their own stuff basically so i would argue that it doesn't go in there so where does this thing go okay well we know what it is is it it's it's particular to the page that it's in the about us should have a different title and description than the home page so let's put it inside of here import seo from dot dot forward slash dot dot forward slash seo and let's just put it above our h1 tag let's say that we've got this seo thing and it's a self closing tag and what is it going to have in it well it's going to have a title so um let's just say about us now let's do the same thing for the home page oh that is the home page all right fine welcome to the machine and we're gonna do the same thing inside of the about us we're going to import it and then we're going to use it and this one is going to have about us let me just fix this typo because that will drive me crazy okay so now that component is actually in our render so if we look at our console we can see here's our title so we're printing out the title where we're printing out the title we're printing out the title from our seo component right here but we don't want the whole tag what we want is the inner html so if we print it out now we can see that it's the default title so how do we change that well once we know what the title is we can change it we can say we're just going to set that to the title and now you can see our tab has the title of the html document which is welcome to the machine and if we do forward slash about dash us it changes to about us so that's how you change the title inside of your react pages i mean you can use helmet by all means but you could also just write it yourself in a couple of lines of code let's check the comments all right i am new to this and i understand until now thank you that's from jonathan i can't pronounce your last name eonut how to use spa in react um we are using spa in react because we won't be actually reloading each of the pages if you name everything index.js doesn't make it difficult to find the component no because the folder has the name of the component and also if you look up here in my tabs i've got index.jsx in home page index.jsx in seo index.jsx in layout index.jsx in app index.jsx inside of about us by the way that's how html works in html if you have a folder called foo inside of there you have an index dot html page so in the browser when you go to forward slash foo you get the index.html that's how it works that's the standard um oh yeah if you want to know how to do that if you go to your settings inside of visual studio code if you look at label and you look at workbench editor label format if you set this to short you're going to get the short name of the file followed by the directory that it's in tools don't make the programmer habits make the programmer but tools can make your life easier how is the virtual dom works then um i'm not sure if i'm ready to explain the virtual dom the short of the virtual dom is that the dom by the way is this you are now looking at the dom the dom contains the html the head the body all of these tags changing these manually which means like doing document dot create element and then creating a p tag and giving it some values and then pushing that onto the dom is a very slow process because they it happens step by step by step by step so imagine this you have a bag and you want to put a bunch of stuff in the bag so you put each piece in the bag one by one if you were to give that bag to somebody else and you instead of giving them the whole bag you had to take each thing out of the bag and hand it to them one at a time that's how dom manipulation works the virtual dom means that you can build up the entire dom by having a bag you put all the things in the bag and then when it's time to hand the virtual dom off to the dom you just give it the whole bag instead of taking each piece out one by one so that's why the virtual dom is faster react modifies the virtual dom say there's a hundred different steps or 100 items in the bag they all go in the bag very fast because it's the virtual thumb and then instead of doing all those operations one by one in the dom which would be really slow it just says here's the whole thing here's the whole bag put the whole thing on the dom in one operation i use router before instead of browser router to put a custom history as props but with router i have problems with redirection and push it worked incorrectly you used router because that was react router 3 since react router 4 and on up browser router will handle the history for you automatically is it not dom which shouldn't be used in react yes it's dom that you should if you can stay away from interacting with it and react you should because the dom is slower but there are times where it's just easier to interact with the dom like maybe you just want to get a or you want to set in a maybe you want to set an event listener onto an element usually we just do that directly through the dom um would it be possible to put that seo component in layout so you don't need to write in every single page no ben because every single page has to have its own title and its own meta description if your entire site has the same title and meta description it's not useful at all the title is not there for users the meta description is not there for the users look at this page do you see the meta description anywhere the answer is no so that data is not there for you that data is not there for the the users that data is there for the search engines so if all of your pages on your site all have the same title and all have the same description how is google supposed to know what each of your pages is about right so the title and the description are more for the search engines than they are for you that's why you got to put it inside of each of these pages because each page has its own different title and meta description and i think that's through the questions so again let's start from the top we have an app component it has a layout the layout includes the header and the footer the value or the content for the thing that's inside of the layout gets passed as the special props called children anything that's in between an open and enclosed tag like here's the open tag here's the close tag here's the stuff in between anytime you have stuff in between the open and close tag of a component that is passed as a prop called children then we have a browser router which is a provider which means that basically it's it's storing data in the background that you don't necessarily see switch is the component that's going to look at the route that's in the actual browser window so here and it's going to try to find a route that matches what you see in the url and then it's going to display the component that's inside of that route again this is the start this is the end or this is the open this is the close so homepage is actually a child of route routes have paths that path is going to match up what's here now in the case of the home page it's at forward slash right but the problem is is these routes are glob routes which means they will match everything after so if you just put a forward slash there it's going to match everything so we have this prop called exact which is going to say if we're at forward slash match that exactly to the forward slash here which would give us the home page but forward slash about us will give us a different page then we've got the concept of pages so we've got this folder here called pages and inside of there we've got some components that represent those pages so we've got for instance our about us page our about us page is inside of a fragment because we don't want to have divs inside of divs inside of divs unless there's an actual reason to have the div inside of the div so react fragments allow us to put siblings so you can't do this in react you can't say here's a tag here's a tag those are siblings without a parent and react doesn't allow that so if you have to have a parent but you don't really conceptually need a parent you wrap them inside of a fragment the seo component all this is doing is allowing us to set a title and possibly a meta description but we didn't actually write that code yet so that every time you go to a new page like this says about us for the title and if we go to the homepage it says welcome to the machine so this allows us to do all the seo stuff like meta keywords description the canonical url the title anything that's basically for the for the uh the search engines it's going to go in here each of these pages should have an seo component so that you can specify the differences between the pages to the browser to the uh the search engine so we got an about us page we got a home page and that's really what we have so far and actually if you think about it we've actually gotten a lot of work done right so let's make it so that we can go from the home page to the about us page without doing one of these all right so that's still react router stuff so let's go to homepage and let's just say okay well we've got actually let's do this in the header we go to header let's create a set of links which to me seems like semantically that would be an unordered list we're going to have a home page link and we're going to have an about us link so now you can see our our header has the home and the about us but we don't really want to have dots and we wanted to go from left to right we don't want it to go from top to bottom so inside of header let's create a styles.css let's import that styles.css so we're inside of a class name called header let's scope it with dml so underscore underscore dml dot header and the reason for that is that we don't get name space collisions with other css libraries so underscore underscore dml dot header and then ul and for this we want a margin of 0 and we want a padding of zero then we're gonna do the same thing here and we're gonna go down to the li those are also gonna have that and we're gonna say that the ul is gonna have a display sorry a list style type of none that'll get rid of the disks and so now you have this and then finally we're just going to say um let's make this a flexbox so display flex now you can see now they're they're they're flowing left to right instead of top to bottom and then let's say that um it has a zero top and a two rim padding to the right and then a zero on the bottom and a zero on the left and so then you get this and then you're like yeah it's too much so one rim so now you've got home and you've got about us let's turn those into links so how do you turn those into links well i mean you could do a link tag like this and make that a forward slash and then you could do the same thing here and you could say that's going to be forward slash about dash us and you can put that in and now these are links and if you click on them you can see that it switches but the problem with this is is if there's any state that you want to keep it's gone it gets blown away because we're refreshing the whole page so how do we change the page that we want to be on in a react app without actually reloading the whole page this is what a spa is a single page app so what we can do here is we can say we're going to import with router from react router dom what is with router with router is a higher order component all that means is that you're passing one component into another not as children but as one function into another function so now we call with router which is just a function and we're going to pass our header component into it what does that do for us what it does is it will inject a history prop into your component so now what we can do is we can say that when we do a click on this we could say that we're going to go to history dot push forward slash then we're gonna get this uh shouldn't use with router header outside of a router so if you look here the layout is outside of our router provider this is the provider that gives us access to the history so we can fix that by just moving the layout inside of the browser router and then the error goes away so if we come back to here the problem is now this is not really a link anymore you can see here it's not a link and that's because it doesn't have an href so this is the way you do programmatic routing in react router but if you're not doing programmatic routing then you can just use link so let's just do this let's go back to this version let's move that back to here like that let's get rid of history because we don't need it so we could do is we could just use a link from the react router library and that looks like this you put the text in the middle and the property is two and it's going to go to forward slash then we can do the same thing with the about us like so and now when you click these the change is immediate and the whole page does not reload so if we had some state at the app level let's say so in order to use state we're going to import use state as a named import from react then to use it state is a hook that always goes at the top level of your component so your component name here export default function app and then directly underneath that is going to be your call to use state use state takes a tuple which is an array of two values you have the getter and you have the setter so let's say that let's say that we have a counter so we're going to counter as the getter whenever you type counter in your javascript code you're going to get the value of that state whenever you use the set counter you are going to be changing the state of counter let's default that to zero so if we were to then say okay i'm going to pass the counter into my home page component and i'm going to pass the counter into my about us page and then inside of my about us page i'm going to put the counter here which means that we need to pass it into our props and then we're going to destructure it we're going to pass it into our props and then we're going to destructure it we use a javascript expression and put the value inside of it so now you see we got a zero here we got a zero here it's the same zero because that's the same state the state is actually being stored at this level at the app level like a level up from all these components so this leads us to state there are three types of state well there are four types of state in react you have component level state which is what you see here this is the app component and it has some state at the app component level state this is your app state it's for this component then we have passed that state down into our child components this is container the state is passed down into this component but it's not part of this component it's part of the container which is one component up or if you're passing it through many different components it could be many components up in the air so there's the container state there's the component state then you have local storage if you go on here and you click on your application tab for either internet sorry not internet explorer for chrome or for firefox you will see your local storage for that application actually for firefox it's under storage um in chrome it's under application so we got this this concept of local storage currently we're not using it then you've got your fourth level of state and react which is your context state if you remember i told you that the browser router is a provider what that means is that's containing its own its own state and when we're dealing with things like a link to the about us page that provider is giving us access to the context and the context has the ability to switch from link to link we're not going to cover context right now but we will cover it a little bit later when we need more complicated state so the reason that we did links here instead of the ahref and when you click it you actually reload the whole thing is this let's make it so that every time we change the route the counter gets incremented so how can we do that let me close some of these files because i don't like having too many things open when i'm not using them so here's the header we want to make it so that every time we change essentially the location that we're at we increment the counter so here's our thing that will change the counter so if we just did something like this where we said okay use counter we're going to change it to be the previous state plus 1. then you get too many renders the reason why is because when this thing changes the state of the component the component re-renders which causes this thing to run again which is going to change the state which is going to cause the component to re-render so the way to fix this is to wrap it in a side effect and use effect is what we use for side effects so what we can do here is we can say we got this new side effect when this side effect runs we are going to increment the counter when is it going to run well you can see that if we do that it just runs and runs and runs so it's constantly incrementing every time the side effect runs every time the side effect runs it's going to re-render the side effect and so you get this sort of counter type functionality right but what if we only wanted to run one time when the component first loads like a component did mount or a component will mount if you give it an empty array by the way the way use effect works is the first argument is an arrow function that you want to execute when the load when the use effect loads the second argument is a array of dependencies if you do this then what will happen is it'll only rerun that side effect when the list of dependencies change but since there's an empty list of dependencies that never changes and so now when you refresh it it will only change one time and then it won't change again and also you'll notice that when you do this it doesn't change because the app is not re-rendering that's the point of this whenever you click one of these links the app does not change so it's not re-rendering so how do you make it so that when you click on the thing that the counter changes and the answer is well you can pass the counter because it's just a function into our layout and you could do something like on change you could pass this in you could say okay well when it changes i'm going to increment the counter by one so basically it's the same code as you have here okay but nothing is happening yet because we haven't actually used this property so let's use that property let's go into our layout and we're going to add another property to this which is the onchange and we're just going to say that every time that this changes we're going to add a 1 to it then we're going to get back to the maximum update depth exceeded because this is happening over and over and over and over so again we're going to add a use effect we're going to wrap our on change inside of a use effect we're going to give it an empty dependency so it only happens the one time and now you can see we get a 2 right but we're still not quite there we're still not to where it changes on demand when you click on the thing okay so instead of doing that let's do this let's pass this down another level so we're going to take the on change that goes to the layout and we're going to pass it to the header because that's where the links are okay so now inside of the header we now have an on change so how would we use this well what if when you click this we call on change and by the way if you're going to be passing a value you need to have it inside of an arrow function because as soon as you put the calling parentheses on a function you're executing it but since we're not passing in a value we don't need the arrow function we can just do it this and the key is there are no curly braces or no parentheses if there are no parentheses then you're passing it by reference passing by reference is like this if you have a bucket and that bucket has a 1 inside passing it by reference means you're passing the bucket passing it by value means you're going to pass the 1 inside of the bucket so now watch what happens every time we click on one of these links our counter gets incremented but if we were to just do this we're back to one and that's because if you change this manually you are reloading all of the state of the app and it's no longer a single page app but by using react router it becomes a single page app to where every time you're clicking on a new thing you're not reloading the whole page you're not losing the state of your app you're maintaining the state of your app so how's everybody feeling about the pacing am i going too fast am i going too slow is there something that you want me to explain in more detail let me know down in the chat what happened if i have state and user reload the app that can be preventing can you explain the difference between the arrow function on change yes okay so i'm not passing a value to this on change and that's because it happens here if i wanted to pass a value to it the value would come in through here but i don't really need to the way that you know if you need to put it inside of an arrow function is this if i have to put the parentheses on the function which usually means like i'm trying to pass it something so let's say that this is a one and let's say that this is a two if we come back to here now and we say this is an id let's just call it an n for the number if we do this what we're doing is we're calling the on change this is the on change we're calling that function we're passing the function here then we're passing it to here then we're calling it here we're passing in one so if you click on home you get a one if you click on about us you get a two if you click on home you get a one if you click on about us you get a two watch what happens if i take away the arrow function you see how it's stuck on two and the reason why is because when this component loads it is calling the function one or calling the function on change so this is where you're getting by value you're not getting the actual function you're getting what happens if i call the function and then i get it so this if you use function substitution what you actually get is that and then what you actually get is that so it's passing those values into onchange so when that loads it calls this once for the one and then it calls it again for the two and then the counter stuck at two but i don't need to pass in a value because the value happens automatically here does that make sense it's exact what are you doing now state is resetting on changing manually the url or hard refresh page there is no refresh right now the page is never refreshing the page is being re-rendered based on us clicking on the link it's not refreshing the whole page is not reloading we're not getting new html every time we click a link if we do this and we type about dash us we're getting new html we're getting new everything new javascript new everything if we click on the links all it's doing is it's just substituting the stuff through component rendering now i think one of the questions you ask is like what happens if the user does this right what happens if they just type something in here you lose all your state and this is true but you can do a technique with local storage where you can store that data long term but i don't think we're quite there yet i'm going to get rid of this on change because all it is is a way to show you how to do something it doesn't actually help our app out at all remember what we're building here is a web app a web page that can have multiple landing pages which is what we already have we have multiple landing pages now and we wanted to be able to build a shopping cart into it and we wanted to build a blog into it so i'm just gonna get rid of all of this stuff that is not really needed and get us back to here okay so let's add a shopping cart in order to add a shopping cart we have to have a products page right so we're going to create a products page inside of the products page of course we're going to have an index.jsx which is the entry point by the way if we change this let me do it on this one if we change home page to home dot jsx you see how it says that there's there's an error here now that's because we're importing home page so what i'd have to do now is i'd have to say pages slash home page home and then it works but i don't want to have to add this extra import so if you're importing a folder it's automatically going to look for an index.jsx or an index.js file which is why i name it index.jsx because that is the standard if you require a folder it's going to look for a file called index.js or index.jsx that's just how babel and common js importing works i can get rid of that counter i can get rid of that counter i can get rid of that counter and i can get rid of that counter all right so our products page products page our products we sell okay so now that we have this page how do we make it load with a url and the answer is we have to add it to our router right so we have to import it this is going to be called our products page and we're going to load at pages slash products then we have to create a route for it products products page and what's he complaining about oh yeah this is supposed to be home page all right so how do we add it to our menu well that's easy here's our menu we just say okay well let's add oh yeah we can get rid of these on changes they don't do anything anymore so now we have forward slash products and products and usually the products page would be before the about us page and it would probably say something like store so now we have a store link and we click on the store link it goes to the store page or the products page you're gonna have to wait jonathan we're not quite to the point to where we're going to be storing anything in local storage because when i store something in local storage that's persistent data and i want to store important stuff into the local storage this is one of the reasons why i don't like redux redux you get this giant store for all of the state of your application and no matter where you're at on the site and what form you're editing it's all in global state and i don't want everything in global state and i don't want everything being persistent so we're only going to persist the things in your local storage that actually matter which would be something like a shopping cart right if you put something in your shopping cart and then you come back you would expect that thing to still be in your shopping cart until you check out so that's what we're going to do next we can close the layout because we don't really need it we can close the pages because we don't really need it i'm going to introduce another folder here it's going to be called features what is a feature well the difference between a feature and a component is a feature is a collection of components that gives you a feature so i would argue that um the concept of a shopping cart you have a page in your app that if you go to it's your view cart page but the technically the shopping cart is on every page but you don't see all the items in your shopping cart on every page you have like a little you know shopping cart icon so we're gonna put our shopping cart inside of our features folder our products page is going to be here and that's going to be displaying all the products that we sell now we have to know where do we get the data for the products we sell so we're going to create another folder this one's going to be called data if i can type not datas data is like fish it is plural and it is singular you say the fish you don't say the fishes you don't say the datas unless you're a weirdo you say data okay so what's inside of data well let's create a file called products.json because that's data then we're just going to create some json here um so the idea here is that you're going to have a javascript object so that now we're talking about some data structures that javascript object is going to contain all of the products that you have right so let's say that you have a key called products actually let's not even use a key call product so let's just go straight to the the array so you have an array of javascript objects each of those javascript objects is going to be a product in your store so you got like a name okay and since this is javascript we have to put double quotes around the keys because it's it's not really a javascript object it's a json object which has to have their keys inside of strings so the name of this is going to be something like um well let's just take a look what kind of uh what product can we find let's go to uh amazon why not and it's in spanish because i live in mexico let's go to food awesome so we've got some well house uh nuts mitadas it just means that it's in half right now you know i'll just do this in english so that you guys are not like what the is that okay in english let's go to amazonbasics here's something an amazon basics nylon braided lightning to usb cable that's a mouthful let's click on the page okay so this is the name of the product so let's put that here that's now the name of our product what is the price of the product the price of the product is 21.99 let's see we've got sizes we've got styles i'm not going to worry about sizes and styles just yet yeah you know what why not so here's the thing look if you click different different style or different sizes you get whether or not it has any in stock and also you notice the price changes right and if you click on style you'll also see that the price changes so how can we model the data we have a product the product can have a price but the product can also have sizes and those also have different prices and the product can have styles and those also can have prices this should be good with firebase yeah you could use firebase but uh if you have even one percent of the products that you have on amazon firebase would fail you pretty fast firebase is not firebase is not a performant database for relational data firebase is basically a hosted db database that is meant for document data document data and relational database and relational data are not the same thing this is another instance of when something is new everybody jumps on the bandwagon and says use firebase for everything use mongodb for everything okay what if you have a million products yeah your firebase database is going to go to crap really fast you know it won't go to crap really fast postgres sql so if you're going to have relational data and you're going to have millions of things that are in your relational database don't use firebase use a real database so again back to this how can we model the data the data is we got a product the product has a price but the product can also have a size or multiple size options i should say and the different size options that you pick will change the price it also has multiple styles and if you pick multiple styles they can change the price look at this we've also got colors the colors don't change the price though so how do we model this well i would say why not have a field called sizes and of course sizes is an array of things so it's going to be an array and then you're going to have something to model that okay so that means a javascript object so we've got a one pack so the name is one pack the little thing that you got here that's that's the same thing right now if we click on one pack we see that it is 8.49 so 8.49 is a price and it's got to be in quotes so there's your 849. so the one pack is 849 and then they have a two pack and a five pack so the two pack has a price of oh also we have these styles so let's see um let's start with this item can't be shipped to my location because i live in mexico so we're just going to do some fake prices here um if we're on a one pack and a three foot this one has 8.49 um i'm just going to make up prices because i don't want to jump on a vpn for this so a one pack is 849 if it's a three foot if it's a one foot let's say that it's a uh a base price of five dollars and a two pack is a base price of eight dollars okay so that takes care of the sizes if you have styles okay so if you have a style of one foot and three foot those would have like a price modifier so if you get a well you could do it two ways either the styles have the prices and the sizes have like the like a discount the more you buy the more you save kind of thing you could do it that way but i'm gonna do price modifiers instead so if you have a one foot that's the base price if you have a three foot it's going to be more expensive so i think actually i'll go with this this is going to be a price modifier so that's a one because if you have a one pack it's a one times the number if you have a two pack let's just do a two times right so we've got some products we've got one product so far it has sizes and it has styles if you choose this product let's just cut this down we don't really need it to be long nylon braided lightning to usb cable make that a little bit simpler we've got a base price let's get rid of the base price because the base price doesn't make any sense here okay so how do we get oh we also have it have an image and here's the thing the image changes based on the color so let's add colors too hopefully i didn't heard anybody's feelings about firebase not being a real database actually i don't really care um so we've got gray and you've got an image so let's just say we'll just say image to get that image we can right click this to inspect element find the actual image which is here let's make sure that it's publicly available that's not the image that's this uh you see when we zoom over it we have that little graph thing that's what it's actually talking about so to get the actual image my guess is it's this one so let's try that hey there we go so now we have the image for the gray one so let's do the same thing for the next option we're just going to do two of these let's do red image and the image for the red one is going to be switch our options to red inspect get the appropriate value now of course if this was your own store you'd have your own images you wouldn't be stealing them from amazon but this is just a learning exercise so it doesn't really matter okay we have one product we'll start with one product and then we'll move on to multiple products so how do we get that stuff here well the answer is we can import our products from dot dot forward slash dot dot forward slash data slash products and again this wouldn't work if you had a million products this is only going to be i have a small store we sell 12 different types of i don't know water filters or whatever it is if you're going to have let's say between 100 products and a half a million products you might use something like uh firebase or postgres if you're going to have something like a half a million to 10 million products you're going to want something like postgres so the size of the problem matters and also the format of the data that you're trying to store matters so here's this how we could do this check this out we can say i want to go over my products let's create a div called products so you say okay well i have these products and i want to print out a product component for each product so you use map that's why i showed you guys map at the beginning of this because map becomes important when you're dealing with gsx and i want to display a product component which doesn't exist yet and i want to get all of the values for that product so that doesn't exist yet let's create a product dot jsx file we're going to create a component for it called product products have a name they have sizes and they have styles and they have colors let's take a look at the chat before i get too much further um yeah my sequel is a a relational database and there's nothing wrong with using my sequel it's not as good as postgres but that's a religious war i mean if you like mysql you like mysql i would prefer a developer that prefers microsql to firebase over a developer who doesn't know the difference between firebase and mysql before i would start worrying about which one is better is it my sequel or is it postgresql they're both relational databases they are both industrial grade they're both perfectly fine some of us prefer things that are more purely sql like myself which is why i like postgres but if you want to have a database system that has all of its own its own things that are not supported by pl sql like its own extensions then you could use oracle you could use mysql you use a lot of different things coding after 30 i used to use firebase but none of the job descriptions i saw had it as a requirement you're going to start seeing jobbers job descriptions have firebase in the next six months to a year would be my guess but the thing is is that when okay so if you're watching this video you're not a senior developer okay you're a junior you're a mid you're somewhere that's not a senior if you're going to go to work for another organization they're going to be people like me at that organization that are at the architect level and we have already decided what we're going to model our data in you can always tell an organization that only has junior developers because every database is a database so the thing about those job descriptions that don't mention firebase is this those organizations have people like me there and we know that you have to have the right tool for the right job if all you have is mongodb everything starts looking like a flat file if all you have is a hammer everything starts looking like a nail right so firebase serves a very specific thing like for instance authentication with firebase perfectly fine because all you're really storing is an encrypted password and an email and maybe some basic user information but i would still argue that that data would be better in postgres sql i mean like if i had to build a stack today that i thought would last for 10 years which is really a long time in prog in software i would build a serverless backend that uses postgresql as the database that uses react as the front end and it would be probably server side rendered through something like next anyway let's get back to this okay so we got a div called dot product for its css class so that we can style it later we're not going to worry about styling it now it's going to have a dot name which is just going to show the name it's going to have an image tag which is going to show the image tag which is going to come in as a path so we're just going to pass that path to src the alt tag is going to be something like image for the name and then we're going to have sizes let's do the sizes in in a minute so our products component needs to import product and we're going to display one product for every product that's in our database and so now you can see here is our product name here's our image our image is not showing up let's find out why our image is not showing up inspect element because for some reason oh that's right uh image is based off of which color you've selected right so it doesn't have an image it has colors so let's do the colors next so for the colors we're going to iterate over those colors with a map same thing as before for each one we're going to get a color option for each of those color options let's just do a div right now dot color and inside of there now we can do our image tag because our image tag is going to have a color dot image and so now you can see that it defaults to the gray image and then there's the red one so let's put a width on this so that we can constrain the size of it and let's just say that these are 100 for now that way we can see both of them in the same place right so we need to know what the the image is but we also need to know what the name of it is so color.name and then let's put that here now let's make it so that when i think it's pretty obvious what color they are so maybe we don't need the name let's make it so that when you click on it it's going to show you that color um actually how would we do this well how does amazon do it so amazon only shows you one color they show you the starting color they have this color selection thing so let's do sort of the same thing let's say that we're going to iterate over the colors and we're just going to put the color dot name like so and then we're going to have another div where we're going to show the image based on the color that they've selected so we need to have some piece of state to know which color they've selected so use state then of course we're going to come down here and we're going to say const let's call it selected color and set selected color and we're going to start off with the colors at the index of zero so it's going to start off by having the first color selected so now we're going to see a list of colors and it's going to start off with the first one and we want to make it so when you click on the different colors you get the different colors right so to do that we're going to add an on click handler here like so and inside of there we're going to say that when you call that we're going to call set selected color and we're going to pass the color that you clicked on and so now if you click on red it turns red if you click on gray it turns gray let's see what's going on in the comments why did you use a template literal for an image in the alt because it is a string it says image for and then the name of the image so we're using string interpolation for the alt tag and that's why should you constrain the image size or image in a wrapper so it is responsible you mean so it's responsive yeah you could do that and yeah because we're not going to be displaying both images at the same time so it's not readily available or readily noticeable that you can click on these things like you can but it's not obvious so let's make it look a little bit more like this and by doing so let's do this let's make this one like 400 so that you get something sort of like that and then we're going to show a small version of the image as the thing that you can click on so now when you click on them like this you get the thing so let's say that this is in a div called colors and it's going to say available in actually let's not do that let's do available in we're going to do the color name like so and let's put that inside of a span tag that has a class of color and the reason i chose a span tag is because spans automatically go right to left sorry left to right let's add a styles.css file and inside of here we're going to say colors and dot color and this is going to be something that has you know like a padding of one rim two rims so it looks like a button and it has a margin of maybe one rim and it has a border color of gray and it has a font a color sorry of black why not actually let's do um yeah we'll just do black well black is the default so we come back to here let's do import dot forward styles dot css and so now you'll see is that we have this and border color let's do border because if we say border color it doesn't say what size it is so 1px solid gray and these are going to be too big so let's do 0.5 and 1. and then this one can be 0.25 so now you get things that you can click basically and let's give it a background color of light gray and then i'm going to make that even more light so then you get a button like this and if you want you could do something like you know border radius three pixels so you get those kind of buttons and let's make it so it's a uh not so tall and make it so that you can click it so we'll put our on click handler back and say that when you click this we're going to set the selected color to the color all right so it's not readily apparent which one you've clicked except for the image like the button should also you should know which button is selected so i would say that we should probably also have a class name on this which will be color and then whether or not it's selected so if the selected color is the same as the color then we're going to add the string selected to it otherwise we're not so then if we come back to here to our product css and we say colors.color dot selected we can change these values to make it obvious that it is the selected color so let's just make that blue sky blue so now you see that it starts off with the gray one selected because that is the first one and then when you click here now you've got buttons and you can see which one you've actually clicked on let's see what's going on in the comments nothing is going on in the comments you people are not commenting enough i'm just joking but i do need another coffee and i'm starting to lose my voice i have about another 30 minutes that i can hang out with you guys and then i have to do a session with one of my students because my day job is to mentor javascript and react and just general web developers today i didn't have a lot of students which is why i can do this long form uh screencast so again if you haven't hit like already smash that like button and i'm gonna go get some coffee and i will be right back he's an idiot he just keeps scheduling somebody that i did the sound with and he just keeps scheduling so that he thinks i have to pay him i'm like if i need you i'll schedule you stop scheduling yourself his name is alexander or something just ignore him actually actually he canceled both of [Music] them it just disappears disappeared because i deleted him because he canceled cause he was busy oh if you want to change um how are you going here is teach your boyfriend so you can take better care of her you marry somebody for like another 20 minutes so that this albia can disperse ah hello hello hello i'm back and i have a fresh coffee cheers and okay so let's make sure that the stream is still on looks like the stream is still on so we have the ability to do this sort of thing and let me just get rid of that we also need to be able to have the price and they need to be able to select um which one of these they want thank you thank you so let's add that information as well all right so we have our colors now at some point i would say that that should just be extracted out into its own thing um we might do it now yeah let's just do it now why not so we're gonna create a new folder we're just gonna call it uh color options we're going to create another oh that's supposed to be a folder not a file move to trash new folder color options new file index.jsx we're going to create our component and we're going to paste it just like that so where do the colors come from well they come from the component that it's going to be included in so we got to put in props we're going to call this color options and we got to pass in the selected color and the set selected color and remember that this is now container state it's not component state the state itself or the selected color and the setter are one level up because we can pass values down in react but you don't pass values back up it's not two-way binding it's one-way binding so we pass the values down and we pass the setter down which means that if we want to change the value from inside of the child component we can just call the set selected color and because that's just a function that was passed down it'll then bubble up to the parent component so to import this we're just going to say import color options from dot forward slash surprising surprising color options this allows us to focus on what this is which is the product page and not focus on the color options and like just having so much code in our way so this is going to be a self closing tag and we're going to be passing in the colors the selected color and the set selected color all right so let's go over these props the colors is because we're passing down all the colors that are here the selected colors so we can pass down the currently selected color and then we're passing the function that changes the selected color down too so that we can actually change that option from the inside and so now once it re-renders everything still works exactly the same so we could do the same thing for the sizes let's do uh styles first so style options index.jsx make sure that's a dot and not a hyphen and really i mean it's the same code almost as here so i'm just going to paste the color options in change that to style options change this to styles change this to selected style change this to set the selected style and then this is available in you could say um available styles so we got our styles we're going to map over those for each one we're going to get a single style let's change that to style style selected style set selected style becomes the style and the style.name style options so let's now import that our style options from our style options put that here change it to style options this is styles selected style once you realize that you've got the right abstraction for a problem you'll find that basically it's the same code over and over you're just passing in different values selected style which is the name of the prop 2 so set selected style and we need a piece of state for that right so we're also going to have selected style and set selected style and the first one is going to be the index of 0 for the styles and look at that it just works so the same thing happens here we need to be able to distinguish what we've clicked so inside of our our uh color options we got this color thing and that's defined here that we've got the i the concept of a of a thing that we can select and when we first made it the only thing that we had to select was the color but now we've got more than one thing so let's change that to option then when we come over here we can say this is our styles this becomes an option options options and so now you can see that we have both of those there's actually one more that we have to do which is here there we go so we got available styles and available colors and when you change the color obviously the product preview changes when you change the styles the price will change when you say abstraction you mean oop abstraction no when i say abstraction i mean exactly that so abstraction has nothing to do with object-oriented programming necessarily abstraction just means that you're finding a pattern that is general for a specific scenario right so like for instance a calendar a calendar is a collection of months which is a collection of weeks which is a collection of days but that's an abstraction there actually are no years months or days you have a planet that spins around in a circle which casts light and dark on the planet side and that planet also goes in a circle around the sun so that's the physics of the thing the abstraction is the calendar that we create and the abstraction of course is supposed to model the real thing as much as possible but think about the calendar we're modeling a planet going around the sun and a planet spinning at the same time so available styles available in so let's make it so that we have a price right and when you change the styles the price changes so we go back to our product and we need a place for our price let's just put it here so the price is based on the selected style and if we look at that json again we see that our styles has like a base price so based on whatever style we have selected that's the price that we have so what goes inside of price the answer is the selected style dot price so we get a five we get a 5. so if we do and that's because it's collapsing into an integer because we have 5.00 so what we're saying here is what we really want is we want a price that is a fixed decimal value of two spaces so we use the two fixed so now watch what happens when we click the one foot we get a five dollar when we click the three foot we get the eight dollar is it a good moment to ask about design patterns and react do you have a specific question about a design pattern in react because i'm showing you a lot of different design patterns right now for instance the container component and the child component where the container component has all the state that would be the product this is the container component and then all these child components are the dumb components and all they take is props that's one react pattern if you have a question about a specific react pattern go ahead and ask it and again if you're watching and you haven't hit that like button yet hit it if you guys get it up to 50 i will do another session on friday and continue this although it'd be nice if we got it a lot higher than 50. um so you can change the color doesn't affect the price you can change the style which affects the price so now let's make it so that we have price modifiers which is what the sizes are technically the sizes are quantities so i'm going to change that to qtys okay so let's do that one now let's call that quantities option so this will become qty actually you know what let's just keep it styles because the the abbreviation of qty kind of annoys me so we have now a size options got sizes you've got selected size you've got set selected size then we'd have to import that size options the size options file then you have to have set selected size and selected size and this one would become you state sizes at the index of zero and again like we could just copy this and paste it but if you'll notice that we now have a pattern everything inside of color options is exactly the same as everything inside of style options there's no difference it doesn't do anything different it just says available sizes available colors we've got colors colors colors color selected color color set selected color color color name style name set selected style style styles style styles styles so you can see that it's the exact same pattern over and over right thank you milan for the super chat donation that's awesome of you so check this out we can collapse these so we don't have to have the same code over and over let's just call it options and let's delete style options and let's find a way to make it so that we can just have one component that shows these options okay so instead of selected color let's call that selected option and instead of set selected color let's call that set selected option so set selected colors let's call that a label um this would be options let's give it a label so that we can say available whatever so that's our label then we've got options.map option and we've got selected option equals the current option and then we got set selected color which will become set selected option the color will become option the option will become option name and we have now genericized this so that it can be reused so let's go back to here instead of importing three different files that do the exact same thing let's just import options and then let's say that this is our options and the options are the sizes and the label is available sizes sets selected size will become selected option selected size set selected size will become set selected option we're gonna have to add a label here to the style options as well so that would be available styles options selected option set selected option same thing for colors now the reason i did style is because we not might not want to say available colors what if we wanted to say available in the label property gives us the availability to make it exactly what we want so this will become options this will become selected option and this will become set selected option look at that we have one component now that handles all three of those and everything still works so that's a concept of design pattern that's also the concept of an abstraction we found an abstraction for options that works with sizes colors and styles all three of those can be put into one component called options yeah i know i deserve way more subs i'm not a youtube expert i'm not even a streaming expert although i'm getting better at it but i am a programming expert i mean i've been doing this for a long time and i i literally code i'll bring my wife in if you want to hear her tell you this i literally code like 14 hours a day i don't have hobbies i don't have friends i have my career and that's what i have i notice that you extract out the components afterwards instead of building the shared components beforehand is that how it's supposed to be done there are no hard and fast answers of what it should be or what it shouldn't be everything is opinion and preference okay so that's the first thing we're not talking about mathematics here where there is a correct right answer and a wrong answer however over time you'll realize that your habits become you so your behaviors become your habits and your habits become you right and if you want to take that a step back further like the uh the stoic philosophers did back in greece they say that your thoughts become your actions your actions become your habits and your habits become who you are so as a programmer it's the exact same thing what i found is that if you try to figure out the abstraction first you'll likely come up with the wrong code and the wrong abstraction so what you do is you do a process of evolution you write your code out first you don't try to be clever in the beginning don't try to optimize in the beginning don't try to abstract it in the beginning don't try to be clever in the beginning instead let your code evolve and when you see a pattern refactor the pattern don't try to start out with the refactor in order to refactor you first must have code to refactor so that's why i do the code first and then i when i find a pattern that occurs naturally then i collapse it into some sort of an abstraction yeah i mean i like coding i've i've liked coding since i was like seven years old shouldn't you write tess first um i used to do a lot of test first development the problem with test first development is you can end up with very well tested code that does not do what the business wants you to do and you spend so much time writing tests for stuff that is not going to fail if you have good programming habits you get half the amount of work done that you would have gotten done if you don't write tests so for instance this thing that we're building today if we had built this test first we would have gotten a quarter of the way through where we're at right now so i still like test first development for some things for complicated business logic i do test first development but for user interfaces there's no reason to do test driven development for user interfaces your interface should not be designed based on your test the interface should be driven by the business in this case i'm acting like the ceo the designer the marketer all of the things but yeah for complicated business logic i would write tests for ui there's no point okay so back to it so now let's make it so that based on the available sizes that you have you get a price modification so we have our price here and we could do this inline but i think it'd be better if we don't but let's do an inline first and then extract it so how do we do this well we would say the selected size dot price i think i made it price yep so now you can see that oh but the problem here is we have to take this wrap that in parentheses and put the two fixed on the outside so that we don't lose our decimal value so now you can see it's eight right and if you buy a two pack it becomes 16 if you buy one pack it's eight if you set it to the one foot you get a five but if you buy a two pack it's ten what do you guys think of what you've seen so far is it good is it okay is it boring what also if i'm doing anything that annoys you if you think that i could be presenting something better if you think i'm going too fast or too slow please let me know in the comments so that i can get better at what i do which is to try to figure out how to get the stuff that's up here into your heads and i'll enjoy my perfectly temperature coffee while i wait for your answer and by the way if you guys think that this is amazing if you think that it's useful if you think that it's well worth more than the price of free remember that i do do one-on-one private mentoring um at the low price of 80 usd an hour and if you can't afford that but you have programmer friends i do group sessions too where like three people can split the cost of that and also if you think that this is an amazing thing do me a favor and tell all the other programmers that you know about my youtube channel and then they can watch it with you and that would make everybody else happy yeah i don't know of any other youtuber that does what i do i know some streamers i know some teams of streamers i know a lot of people that make videos most of them are junior programmers that are disguised as senior programmers they're like 20 years old so they can't be that experienced and they're they're looking at another screen and they're copying code from the other screen and then they're putting it over here they're not really building it real time i'm the only one that i know of that does exactly what i do which is why i'm hoping someday i'll have a million subscribers but technically i've only been doing this for about six months um i did i've had this channel live for well excuse me it was react university for like a year but i only posted a few videos and i got kind of well i lived in a really noisy area first off and i didn't have a good studio so you guys can't see it but or maybe you can this is what my studio looks like so you got this bright light here you got some sound panels that i made here to absorb the sound so it's not all echoey you got my ugly closet there and then over here i got these giant bay windows right those are filled up with foam now in fact i'll show you why not this is a lot of fun so this is what my windows look like now sorry if you couldn't hear this is what my windows look like now that foam that foam is the reason why you don't hear all of the dogs barking and all the fiestas and all the airplanes that fly overhead and everything else so that's why i'm able to do this like basically full time now because i moved to mexico city where i had a good internet connection and i built out my own little studio and i've got all the equipment that i need by the way if you're interested this move it over to my camera this is the microphone that i'm working with it's like a four hundred dollar microphone it's a rode boom mic my camera is a sony a7 mark ii and yeah i'm planning on doing this like basically full time i don't have a job anymore because my job kind of got killed by kovid and then i just decided why work for somebody else if i can just work for myself so i built devmentor live and i'm doing my youtube channel um this is probably about what we're gonna have to call it because i do have a new student that i have to meet up with in about a half an hour and my voice is starting to go out so i need to let it rest i'll probably drink some tea while i'm waiting to meet with paul but i would love to do this again and more often so please please please please share my channel with other programmers that you know if we can build this channel together it means that i can spend a lot more time teaching you guys how to do this stuff and again if it's in your budget to do private mentorship with me either by yourself or with some friends then you can go to devmentor.live and you can sign up there and you can send me an email i don't have a problem with putting my email on the internet i get spam anyway so it doesn't really matter so this is my email don't send me questions i'm not going to answer your questions in email but if you are interested in scheduling time as a student of mine you can do that that way and you can also go to devmentorlive.bookify.com if you're serious about getting mentorship and you can select a free mentor interview where we can talk about your goals you can get to know me a little bit better i can get to know you a little bit better and then we can schedule your first paid hour-long mentorship session so yeah i think that's it for right now thank you guys so much for joining me it's been a real pleasure to spend my wednesday afternoon with you and i will see you soon so happy hacking and adios

Channel: devmentorlive

Views: 4,943

Keywords: react, reactjs, web development, javascript, es6, programming, sofware development, learn to code, react spa, react website, react crash course, beginning react tutorial, zeo to hero react, modern reactjs, build a blog from scratch in reactjs, devmentorlive, devmentor, react js crash course, react tutorial 2020 for beginners, build a website with react, react js website, react js course, react tutorial dev ed, react tutorial mosh, react for beginners traversy media

Id: _1YojDFZEfU

Length: 191min 25sec (11485 seconds)

Published: Wed Oct 14 2020

Reddit Comments

[u/fk_the_system]

!RemindMe 1 hour

[u/CodedByElvis]

This looks really cool and I'm excited to learn! Especially the stripe store.

[u/devmentorlive]

I will be continuing this series! In the end we will end up with an SPA w landing pages, a online store powered by stripe, and a blog (not gatsby).