#100DaysOfWeb in Python Transcripts
Lecture: Brushing up some ES6 (modern) JS
0:53 and here I used a method str, that returns those variables in a concatenated string. Then I instantiate two Bites with different strings' endpoints
1:04 and called str method on both. Let's run this from a commandline using Node. Any arg get the two outputs, especially with the Hangman game
1:16 we will be using state in our applications. And for that, React uses classes. Secondly, it's inheritance
1:27 in React we will inherit from the component class and the syntax to do that is to use class extends base class.
1:36 So here, I have an EnterpriseBite that extends from Bite. And I'm just overriding the str method to prepend EP to the string method we already have.
1:48 So if I make a new EnterpriseBite make a new string and points I should get a different string And here we see ep bite
2:21 And we'll see const in a lot of React code so here are the hello string and that string is not meant to be changed so I defined it as a const.
2:31 However, if we do some sort of calculation I could intialise count variable to 0 and I would use let because this variable is changed within the body
2:43 With whatever we going to do. So for variables that change, you use let and for constants you use const. But don't use the var keyword anymore
3:21 if there's a single argument. And then we can even omit the curly braces if it's a single line function. And it is pretty compact.
3:31 Let's see if this works by removing all the previous revisions and only use the arrow function. And that worked.
3:56 Like so. And now when name is not given I get the default of stranger. Next is the destructuring
4:13 and this you can see as tuple unpacking in Python. So here I got an object a Bite with id title at 1 points and I can extract those attributes
4:26 using the syntax so I put the Variables inside curly braces and I get those individual variables extracted. Lastly, map and filter.
4:44 When we print like an unordered list of list items a common technique is to use a map and maybe a filter to reduce the amount of items you want to see
4:57 for example, the API where I can filter the tips So here, I got some ninja objects in an array and I'm going to filter the array
5:08 by only ensuring that ninjas with more or equal to 100 points. And then, do an operation on each of the items.
5:16 And that is wrapping them into list item a HTML tags So this should output only Mark and Mike and write their names in a li tags.
5:28 Let's run this. And indeed it does. See it as a list comprehension or actually Python has names work for method filter.
5:39 And though it also seems pretty regularly in React code To recap, if seen classes, constructor like they done to
5:49 dunder init in Python, methods, and where Python uses self we use this. Inheritance. You can inherit from a base guys
6:01 using the extence keyword and override methods. Just like in Python. For variable deceration, you want to use let and const. And shy away from var.
6:16 In React, immutability is very important. So you will see the use of const a lot because that makes a variable not changeable.
6:28 Arrow functions, classic function using the fat arrow omit the parenthesis in version single arg and omit the curly braces.
6:44 And here's an example of how to look in React pretty concise Destructing, this compared as tuple unpacking in Python
6:55 You have an object, you want to extract the variable. You put them in curly braces and we get the individual attributes
7:03 as seen here with this Bite example map and filter commonly used when we need to manipulate a sequence of items.
7:13 Here, we have an array of ninja objects and we filter them by ninjas with greater than or equal to 200 points and wrap them in li tags using map.
7:35 using a tool called create-react-app.