#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. You should understand at least the basics of JavaScript which you've seen in Day 25.
0:11
However, you should go beyond and learn a bit about ES6 because that modern JavaScript syntax is often used in React code.
0:21
If you go to your checkout folder, I made an ES6 directory and a couple of examples of modern JavaScript. Let's look at them one by one.
0:36
First of all, you want to become familiar with classes in JavaScript. Here I define a simple Bite class
0:43
with a constructor that takes a title and points. Where Python uses "self", JavaScript uses "this" and here I just assigned it to variables
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
1:59
because that's the method we overrode. Next up are variables. As I touched upon in my JavaScript lessons old-style JavaScript used the var keyword.
2:11
In newer JavaScript, we have let which is safer because it block scoped. And for variables that don't change we use const.
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
2:55
because it's not convenient. Next up, are arrow functions. A very exciting feature of modern JavaScript. So a classic function would be
3:09
function, argument, and return. In newer JavaScript, we can remove the function keyword and add a fat arrow. Then we can omit the parenthesis
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:43
In the sense that if I don't pass an argument it undefined and as we've seen in the JavaScript lesson we can even give it a default argument.
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:25
There concludes an overview of modern JavaScript features. Next we're going to bootstrap our first project. The fronter of our tips API
7:35
using a tool called create-react-app.