#100DaysOfWeb in Python Transcripts
Chapter: Days 41-44: React: JavaScript user interfaces
Lecture: Brushing up some ES6 (modern) JS

Login or purchase this course to watch this video and the rest of the course contents.
0:01 Brush ups on ES6.
0:04 You should understand at least the basics of JavaScript
0:07 which you've seen in Day 25.
0:10 However, you should go beyond and learn a bit about ES6
0:14 because that modern JavaScript syntax
0:17 is often used in React code.
0:20 If you go to your checkout folder, I made an ES6 directory
0:25 and a couple of examples of modern JavaScript.
0:29 Let's look at them one by one.
0:35 First of all, you want to become familiar
0:37 with classes in JavaScript.
0:39 Here I define a simple Bite class
0:42 with a constructor that takes a title and points.
0:45 Where Python uses "self", JavaScript uses "this"
0:49 and here I just assigned it to variables
0:52 and here I used a method str, that returns those variables
0:55 in a concatenated string.
0:58 Then I instantiate two Bites
1:00 with different strings' endpoints
1:03 and called str method on both.
1:06 Let's run this from a commandline using Node.
1:11 Any arg get the two outputs, especially with the Hangman game
1:15 we will be using state in our applications.
1:20 And for that, React uses classes.
1:24 Secondly, it's inheritance
1:26 in React we will inherit from the component class
1:29 and the syntax to do that is to use class extends base class.
1:35 So here, I have an EnterpriseBite that extends from Bite.
1:39 And I'm just overriding the str method to
1:42 prepend EP to the string method we already have.
1:47 So if I make a new EnterpriseBite
1:49 make a new string and points I should get a different string
1:56 And here we see ep bite
1:58 because that's the method we overrode.
2:03 Next up are variables.
2:05 As I touched upon in my JavaScript lessons
2:07 old-style JavaScript used the var keyword.
2:10 In newer JavaScript, we have let which is safer
2:14 because it block scoped.
2:17 And for variables that don't change
2:19 we use const.
2:20 And we'll see const in a lot of React code
2:23 so here are the hello string
2:25 and that string is not meant to be changed
2:27 so I defined it as a const.
2:30 However, if we do some sort of calculation
2:33 I could intialise count variable to 0
2:37 and I would use let
2:38 because this variable is changed within the body
2:42 With whatever we going to do.
2:46 So for variables that change, you use let
2:49 and for constants you use const.
2:52 But don't use the var keyword anymore
2:54 because it's not convenient.
2:58 Next up, are arrow functions.
3:01 A very exciting feature of modern JavaScript.
3:05 So a classic function would be
3:08 function, argument, and return.
3:11 In newer JavaScript, we can remove the function
3:14 keyword and add a fat arrow.
3:19 Then we can omit the parenthesis
3:20 if there's a single argument.
3:22 And then we can even omit the curly braces
3:26 if it's a single line function.
3:28 And it is pretty compact.
3:30 Let's see if this works by removing all the
3:33 previous revisions and only use the arrow function.
3:41 And that worked.
3:42 In the sense that if I don't pass an argument
3:46 it undefined and as we've seen in the JavaScript lesson
3:50 we can even give it a default argument.
3:55 Like so. And now when name is not given
4:07 I get the default of stranger.
4:09 Next is the destructuring
4:12 and this you can see as tuple unpacking in Python.
4:17 So here I got an object a Bite
4:20 with id title at 1 points and I can extract those attributes
4:25 using the syntax so I put the
4:28 Variables inside curly braces
4:31 and I get those individual variables extracted.
4:40 Lastly, map and filter.
4:43 When we print like an unordered list of list items
4:48 a common technique is to use a map and maybe a filter
4:53 to reduce the amount of items you want to see
4:56 for example, the API where I can filter the tips
4:59 So here, I got some ninja objects in an array
5:03 and I'm going to filter the array
5:07 by only ensuring that ninjas
5:08 with more or equal to 100 points.
5:11 And then, do an operation on each of the items.
5:15 And that is wrapping them into list item a HTML tags
5:20 So this should output only Mark and Mike
5:24 and write their names in a li tags.
5:27 Let's run this. And indeed it does.
5:33 See it as a list comprehension or actually
5:36 Python has names work for method filter.
5:38 And though it also seems pretty regularly in React code
5:43 To recap, if seen classes, constructor like they done to
5:48 dunder init in Python, methods, and where Python uses self
5:54 we use this.
5:56 Inheritance. You can inherit from a base guys
6:00 using the extence keyword and override methods.
6:03 Just like in Python.
6:08 For variable deceration, you want to use let and const.
6:12 And shy away from var.
6:15 In React, immutability is very important.
6:18 So you will see the use of const a lot
6:21 because that makes a variable not changeable.
6:27 Arrow functions, classic function
6:32 using the fat arrow
6:36 omit the parenthesis in version single arg
6:39 and omit the curly braces.
6:43 And here's an example of how to look in React pretty concise
6:50 Destructing, this compared as tuple unpacking in Python
6:54 You have an object, you want to extract the variable.
6:57 You put them in curly braces and
6:59 we get the individual attributes
7:02 as seen here with this Bite example
7:06 map and filter commonly used when we need to
7:09 manipulate a sequence of items.
7:12 Here, we have an array of ninja objects
7:15 and we filter them by ninjas with greater than or equal
7:19 to 200 points and wrap them in li tags using map.
7:24 There concludes an overview of modern JavaScript features.
7:28 Next we're going to bootstrap our first project.
7:31 The fronter of our tips API
7:34 using a tool called create-react-app.