Minimum JavaScript Intro for learning React. What you need to know in JS to become React dev. Part 1

Do you learn React and do not know JS? Or you  just want to improve your knowledge in JS to   improve your knowledge in React? So, React is the  most popular library in the world for front-end   development right now and many people are using  this library. But, not all of them knows JS.   JS is a core and if you want to create a great  application with React you need to know JS but   if you using some other language  and you just need to know how works   React and how you can create something so this  video helps to you helps you. In this video   I will describe to you the most important topics  from JS and I will show you how do we use these   topics in React. So, let's start from something  simple - it's variable declaration and data types. Then we will cover strings, objects, and arrays. It's the most important parts how to save   data in React and JS. Then we will talk about two  most powerful and most used features in React it's   the destructuring assignment and rest parameters and  spread syntax. Then, basic js is conditions loop and   functions. Functions are super important because  of its React and the latest React it's everything   about functions. You can forget about classes. But, we will talk about classes just a bit .  Also, I will show you how to handle errors with  try-catch, how you can work with forms, forms in   JS and the forms with React. Also, we will talk  about asynchronous js how to handle async actions. We will use promises and I will show you  what is async/await. It's a new syntax   sugar in JS for promises. And, then fetch. Fetch  it's a method to get data from your backend. Very popular and it's used  everywhere right now. So let's start! We will start from the super very beginning. We  have a simple React application. It's... We import   React, ReactDOM we have simple application  app and we rendering this application to   root element. So, let's start from the beginning - a variable declaration. So, how we can start   to declare a variable? We need to use const  for example, first Maksym. We are using cons   because if it's a constant and we are not planning to change a variable. For example another one. Age - we, during this course, we won't change my  age, but, for example, one more const isYouTuber = true. We will talk about data types soon so all  variables in javascript we declare with const   so it shows that you weren't going to change it   but if you need to change some  variable you can use let, for example, subscribersCount and let's do it for example this  number. So, it's the easiest way to declare it's   the only way in react to declare variables const  for constants you are not going to change during   your component or function and that in case you  need to change this variable. For example, we can   increase that plus one to show this data we can  use in JS for example subscribers count and one second what do we have is terminal that's the yarn start so it works as you seem for example  if we will try to use the same for h let's open inspect as well we will see we have type error we cannot  reassign constant variable it's okay okay with variable declaration we know how to do  it the next let's talk about types in javascript   we have a few different types it's strings for  example if we want to declare string number   integer or real number boolean data true or false number we already told also we can  declare variable for example that channel name so when we declare  variable but do not assign   any value this variable will be undefined so   under the hood it will be undefined undefined  it's a special data type so when we will try to show this variable so we won't see any result here  for undefined also we have one more type it's null now it's a false series falsive value for  example it's like zero or empty string   but we are using null if we want to assign some   false value it's not true not false  we just don't know any value what   what to assign to this variable okay it's the  most important data types you need to know   let's talk a bit more about strings one one of the  most used data types in javascript in this case we   created a string variable first name with double  quotes we can use single quotes it will be the same there is no difference recommended by is use  only single quotes but in jazz we have one more   type of quotes it's a backticks so you can define  it here it works in this case it works the same   but it has some specific behavior backticks  are used for calculated fields for example welcome message we want to write some  hello and put my name for example and then we want to show this in the component so when name is dynamic for example first name  we need to change it or write something like this in the template put two different variables   and it looks not good if we will delete  this part to solve this problem we can use   special syntax with dollar and curly  brackets and inside we can put a new variable   for example here is some expression and based on  this expression we will use some value from this   variable and now we can just output this welcome  message and we will have a result the same result   without creating some strange behavior but this  strange behavior is widely used as well and i   will show you how we can use it we will return  to backticks in the next sample and now let's   go to the next part is objects so for example  when we need to combine a few fields the same   user we want to save the user we can rub  these fields into the object for example the same so now we using object and inside we  have the same variable declaration   but with two dots it's fields fields  field first name with string max h   and for example youtube channel it's traverse  code and now we can use the same output first name for example so  as you see we have this data objects are used widely in react   one more feature i want to show you with objects  it's the calculated fields right now we declare   user with three predefined fields is first  name h and youtube channel but sometimes we   can generate the fields dynamically dynamically  based on some other property let's do console log user just to see what we have okay as you see we have user is first name h and  youtube channel it's pretty easy now let's add   something next for example we have first name and   val is maximum we can create a new  field based on this variable for example using square brackets we can put first name  inside the same two dots and assign some value let's take a look what do we have   and we have object we have new field maxim  this field was taken from variable first name   when and when we will change this field for  example even with space it's not a problem you see that we have one second we have new field maximum rooney and we have  new value it's new name so we have access to   this calculated fields this approach is used in  react when you need to create a controlled form   in react and save variable from the  input okay how we can get access to this value in case we will use first name what we will see   we have new name so as you see using this approach  with first name first name it's a variable the   same and it takes value as a key for object user  and gets its name in case you use through dot you see max and its field of its  predefined field field of user object   it might be a bit confusing but it works another  approach how you can use its direct approach with the defining a field you need to get in  our cases maximum rooney with space so   new value new name the same works super  simple so now you know how to define   different variables using const and that different  types strings numbers boolean null or undefined   and objects okay let's go to the next  topic it's arrays let's check our readme   so according our readme we need to check arrays  and the two methods is map and push so array let's delete it the same const how to declare array for example my favorite fruit to   define array we are using square brackets  so it's empty array now we can try to output this array but it's not a good idea it won't  show you ends you don't have anything so   hard to push some data we can  define with for example apple orange so you can use any string decoration  also you can use any other type for example 27   and true who knows what does it mean but and   inside you will see that you have apple orange  27 and even true so it was outputted this datum but usually we don't use this approach we  use another visa map or going through the   cycle okay how we can push some data when we  have this object we can use this object and   use method push for example  banana so we added one more item and we see we have banana okay how usually do we  output this data to output this data we are using   map method for example we need to build  a html html with data how we can do it we   can create a new const output for example and  we need to go one by one all items we have in   array and create some html okay to do it let's use our favorite backticks so one more feature with backticks we can define   html template it's a bit more complex  part and inside using this expression   we can use any expression in from  javascript for example using favorite   favorite fruits we need to go one  by one how to do it we will use map map it's a function which takes   which receives a callback function as a parameter  we'll talk about function a bit a bit more better but function we have  parameter with name fruit food and now we need to return  something let's return for example give and insight will be fruit okay what i remembered in case we were  using j6 and react we don't need these   back ticks here we can use it directly let's try to output our variable and we will see  what we have so as you see this one we don't need   as you see we are putting all our properties we  have in different div so we took every item in our   fruits array we put this item to variable fruit  and now we are working with only this one variable simple yep and then we output  this variable also we can   skip create an additional  variable we can delete it and output it directly so using  curly brackets is react expression   in our case we go one by one on favorite fruit  and output this datum for example we can put dash or we can put a number from ordered list for example how to do it   function which we are using to for map the  first argument it accepts item from our array   the second one its index index of this  item in array and in case we will put index index i mean index we will see  the index of this item in array okay this part we can simplify even   using backticks what i mentioned  before and now we can put index dash fruit it's a string calculated string and result is the same with dash and now it's time  to start doing something interesting and useful   in react so with erase we will talk about the next  topic it's structuring assignment okay what is it   let's create a new const for  example name it will be array and inside this array we will put two  parts the first name maxim and second name for example the next one we need the output  these variables so how we will do it usually   we need to use name and put index so by index 0  we will grab 0 item in the array and it's maximum   ok we see we have maximum but we need to use  this ugly x axis by index how we can solve we can   create a new variables for example  const array inside we will put   first name is our variable name second  name and we will assign the array name   so and now we will have access through first name  and second name let's take a look what do we have   we have maxim we have rooney how it  works we have array with two fields   the first one and second one and then we create  a new array we can say it calls called array   inside we declare two variables first name and  second name and where it will take where will it   take values it will take it from name so first  name is under index 0 so it will take from 0   index from name second name has index 1 and  it will take from index 1. in general it looks   the next one okay it looks this one so we  grab this value and save it to this variable okay and this approach is  used widely in react where   okay let me show you super simple example  with the effect use state you state is   the most popular use effect in react and  when we used you know we use const name set name and use effect use state sorry let's output this name so as you see  the same structure i already did it   so we have array and we have  two variables name and set name max so use state it returns array with two indexes  with two items item with zero with index zero its   name and the item with index one is function  set name and in case we will call set name we will set a new variable a new value yes but we cannot do it in this way  because it creates too many renders but   i hope you understand the approach  the same destruction assignment okay   it was pretty simple case with  arrays the same we can do with objects with objects for example we have the same user and this object has name and h when we trying to get access to some property  some field in this object we need call   user is object name and field  name okay yes yes so max is 27 years old but as you see we need copy this section with  user and user again so to prevent it we can   use approach with const using curly  brackets inside we will put name and h and we will assign user now we have two variables name and h so let's take  a look and we have the same result how it works   this case in this case it works  almost the same we have field   but it does not take by index it takes by name so  we have user we have name and based on this field   name we assign to a new variable for example  if we will use name one for example let's try it doesn't work it doesn't work because  we don't have name one field so it's easy okay for example we have one new variable  subscribers count and for example channel name travels control right now we're  using we are using only these two fields   two other fields are hidden so how we can to get  access to these fields so we can of course use the   same approach but let's go to our readme and let's  jump to this as spread syntax and rest parameters   let's start from rest parameters so in  our case we're using only two parameters   two fields are all other fields we  can save in some variable for example rest we will use special syntax three  dots so and we will use we will create   a variable rest but rest it's just a name so  we can say it we can rename it to any other other params really it doesn't matter so in this  case we can generate any variable and the name   and h will be saved name and h will be saved to  variables name and h these two fields will be   saved to variable other params for example console  log other params other params it will be object it will be object with two fields what  two rest fields feels what we didn't use   its subscribers count and the channel  name and as you see we have these fields so now we can use other programs subs channel name for example is only one year old so it all works three dots rest parameters  three dots is also another operator it's   spread syntax and we will talk about spread syntax  soon okay let's play with this rest parameters and   the instruction assignment a bit more for example  a bit more complex case we already have const name for example axon so cool name and we have another  object user where we have the same property name   so in case now we when we try to  declare variable name is a constant   and we already have constant  we will have error because of   name has already been declared so you cannot  use name but how we can avoid this problem   when we already have name it might be a variable  or it might be a parameter or props for react so   in this case we need to rename this field  so in case we have object with field   with field name we what we cannot use in component  or function anymore we need renaming how to do it   we can use name after that we put two dots and  we will put some new name for example first name so now in our component we will have access  to first name yep yep it's max max true   super so now we know how to rename property  okay let's go a bit deeply and deeply means best friend for example and it's object  object this object has name name for example   the same oxana channel name so we have a new field it's name oksana and  channel name so we have we already have this field   for user but inside deeply for field best friend  we have object new object with these fields   okay now we need to get these fields somehow  let's play with it okay how to get access to this   we can use the same best friend now we saved  we saved this field to variable best friend   and we have access to name but in this case  we will have the same problem when we need put properties we need to copy  this field again and again   to prevent it we can go  deeply with two dots we will define new object so in this case we will use the  same destruction assignment operator again and   here we can have access to name and channel name  okay let's output these fields so what do we have   we have error with name because of we use it use  it so let's rename it we already know how to do it for example we will create this new variable so and now one very important feature when we  used some kind of inner destruction assignment   so we will go deeply to this object we do  not have access to best friend object so we   will have x only two fields of this object and  it means we cannot use console.log best friend and as you see we have oxan and python programmer  girl so we have access to this datum so you can   play with this object and try to get different  data for example inside we can have the same best   friend object max and we inside we can have the same array okay so you can go deeply as  you need so it how it works so   when we are using this approach in  react so it looks a bit confusing and   difficult but how we can use it with react very  great question okay let's create a new component we'll call it user so as we need as we know we have new component  user and we have probes is a regular approach with   react so we are passing data to props okay  and now when we have these props we can have   access to any field inside for example  props name in case we are passing name and channel props channel name ok we created a new component user  and now let's use this component inside so here   we will have let's call h3 it parent component and  now we want to use our new created user component   and we need to pass data to user so as we know it  accepts name and channel name so let's put to name and channel name and let's grab it from  this variable user so let's delete this part let's delete this one so let's use only name and channel name and  now we need put these properties here so as you see we have parent component  inside we have user component   but we have some we need output this don't  forget to use curly brackets and now we have   these properties we have access  to name and channel name so okay now let's use some cool feature with  the structuring with the rest parameters   and the structuring assignment so props  is an object we know that so we can   use destruction assignment and we expecting  two properties its name and channel name   now it means we can skip these props so  we have access to props we put directly   without using this ugly variable probes  okay what we have we have the same result   cool yep okay for example we have two  additional fields h and subscribers count   so we have these fields and we want  to pass this field to object as well   so one approach we can put h new proper new props  h and we will put user h but what's the point if   we we won't put all fields from user to component  user it looks ugly so we can create we can use we can use spread syntax in this case it will  be spread syntax so how it works to user we are   using field user and three dots this operator it  split it will split our object to new variables   name h subscribers count and channel name variable  name will be object object key and value will be   value for this scheme and then we  will put will pass all these fields to   component user let's check yes it works so as  you see we don't need to copy all these fields   and now inside this component  we are using two fields let's save other fields we  will save it to operator rest   and now we can output actually what  we have in rest so to do it let's json extremely fine rest   so everything else what we have other probes  we will save to rest and we can use it as you see we have these fields  so if you need you can use rest h and it will work yep yep so now as you see we  have access to all data you need okay it means for example if you  will add some additional field sample topic programming automatically you will have this field  inside your new component user so   it how works this structuring assignment  and rest operator and spread okay one more feature about spread and i  guess it would be the end for this part and one more part about spread operator the most  important in react so we have user first one and   we want to create for example another user and  put this data so let's for example create second   user we need all the same fields but with  another name so let's create a new user tool   for example and all fields let's assign a user  we don't need this part and let's output user 2. so we have two users and for  second user we want to change a name   so let's do it use it to name another one okay and oh what do we have we  have for the first user was changed name   and for the second one but we changed for the  only for the first one but how it works in jazz   we have references and values when we  are using objects we save this object by   reference so we have reference user it's a  reference for this object when we created   a new new variable user2 and  we assigned user we didn't   assign a new copy of the whole object we  only assigned a link reference to this object for example let's take a look okay so we have this object so first of all we created  reference to this object user and then we created a new reference it's   user 2 when we change something in user 2  we are changing the same field in user 1 so   it how it works so for react we need to  use values not reference how to do it   we can use in this case spread operator user so it  means we'll create a new variable user tool and we   will grab all properties from user and we these  fields they are copied by values so it's a values   because of its primitive data type so in jazz we  have primitive and objects data type so object   copy is copied for by reference primitive data  types by values so in this case we will copy   all databal by values and now we will have  user 2 name so we can use this approach now   let's try max axona so now we have two  absolutely different objects this one   and this one and this one user two and now we  can change any field we need so okay another   part of using this spread operator it's removing  this ugly part and adding this nice part so when   we copy object we can change any field in this  object or edit for example let's add something new for user 2 main top pick for  example it will be python and now you see for max we  don't have main topic but for max so we removed part of oxana we have main  topic python so let's fix so now we know how   to add any field now let's rename so we have field  name let's add new one new value it will be oxana   and yes it works so this part you will see every  day in any react code okay where you can see it it   this one is very synthetic sample  and usually we don't see it   okay let's show how to how  we can see this approach okay we have user for example let's use use state hook so let's create const let's put  this value to hook it will be user set user use state and as default value we will use   this object let's do it one this one  so we didn't change anything it works the same okay now how we can change some value  in this object it's very popular approach and big   problem when we have user and we need to change  some part of this for example let's create button we will call getting old and when we on click let's call function on click so we didn't  cover functions yet but anyway we can use it   so here i will show you how to use arrow functions so right now just copy this section and  i don't go deeply inside how it works   okay when we click we need the in increase h  by one so what we need to do we need call set user method and we need pass a new object with  a new field so we have h approach with putting h   user h plus one it won't work i guess you  know why why because of now we are putting new   object we rewrite this object and we will  delete all these fields and we will left on h okay now as you see we have our beautiful  fields when we click getting alt   we have only h without data it's not  what we expected we we need to use user so it means we getting all  fields we have in our object we spread these fields and we're changing a new  one we're changing one field we need and we will return a new object not by reference  by value we'll call that user with this new   object and react will render this  component and you will see a result okay   we have the same last click getting  old and as you see we changing this value works super easy and  this is the most popular approach of using this operator so it was the finish now it's the finish of  the first part in the this part we covered   variable declaration it's const and that  and what's important we didn't talk about   war so if you heard about war forget never use  war declaration for variables we cover data types   just a bit so if you want to learn more about  data types i have a separate video in my   channel link will be somewhere here we cover  strings a bit single quotes quoted double quoted   and backticks about backticks we will talk a bit  more in the second part of this course mini course   we covered objects and the computed property  fields it was useful just a bit talked about   arrays i guess we will return to arrays  when we will talk about loop loops we   talked about the structure assignment  when we need grab some value from object and we jump to rest and spread syntax in  the second part we will cover functions   loops conditions error handling  forms promises and fetches and   also we will cover all everything all other  fields topics we covered in this part and we will   improve our knowledge of in using these parts  so subscribe to my channel and see you soon

Channel: Travels Code

Views: 4,048

Rating: 4.9316239 out of 5

Keywords: Travels & Code, TravelsCode, Travels Code, academind, academind react, javascript tutorial for beginners, JS for React, learn JS for React, academind javascript course, js knowledge to start React, js rest operator in React, js spread and rest operator React, how to spread props react, React spred operator, react destructuring, react destructure some props, react destructuring not work, react variables, react variable declaration, Rest parameters and spread syntax

Id: XevQlT444qg

Length: 55min 52sec (3352 seconds)

Published: Tue Dec 22 2020