`- So we're going to be looking at React
in quite a lot of detail in this lesson and the next lesson.
This lesson concentrates on explaining how React looks.
And then the following lesson
goes into more detail on how to test React applications.
So what is React?
Well, it's a lightweight client-side framework
from Facebook.
Makes it easier for you to organize large amounts
of user interface code.
You need to have some kind of framework
when you're implementing this one in the code.
So that you have structure in the work that you're doing.
Now, it turns out that with React,
you can actually create two different types of application.
You can create applications for a web browser,
this is ReactJS,
this is what we're gonna cover in this lesson.
Alternatively, you can use React
to create native applications in order to target,
in particular, mobile platform, like a cell phone.
So like a iOS or Android devices.
The React library itself is basically the same
but you can render your user interface
either in a web browser, ReactJS,
or on a native mobile device, React Native.
So we're gonna focus on ReactJS.
It turns out that you can either use JavaScript
or TypeScript
to implement React applications.
And to be honest,
there's probably as many people use one as the other.
JavaScript has the advantage of being simpler,
so you can write code with less ceremony.
But TypeScript is more rigorous
because in TypeScript when you declare a verbal,
you specify what type it's going to be
and therefore the compiler can help check misuse.
TypeScript also has other features
like interfaces and enums.
And those also, you know,
can help you write well structured applications
with fewer bugs.
So we're gonna kind of look at both approaches.
The first few examples we're gonna look at
will use JavaScript.
And then as we get into more complex examples later on,
we'll kind of switch and we look at TypeScript.
Which is, you know, probably,
I would choose TypeScript myself
because it gives you a little bit more rigor in your code.
But in either case,
you're gonna be making use of some of the new features
introduced in JavaScript.
So what I thought I'd do is,
before we actually dive into React in detail,
I thought I'd give you a quick summary
of some of the top new features in JavaScript
that you need to know about to use React effectively.
So, first of all, interpolated strings.
I'm gonna give you some examples
of each of these topics I'm gonna look at
in the next few minutes.
So an interpolated string,
would look like this,
you could declare a variable.
Let's say I've got a variable holding the person's name
and the person's name is Andy, a good name.
And the person's age is 21.
And what I'm gonna do is I'm gonna have a string.
I'm gonna declare a string.
Oh, let is a new way of declaring variables in ECMAScript 6.
I'm gonna declare a string called S,
which is going to be an interpolated string.
An interpolated string
starts with a back tick and inside the back ticks
you can have embedded expressions.
Hi and then you say dollar, curly bracket
and then inside the curly brackets
you can have an expression,
an embedded JavaScript expression
So, hi
Andy,
you will soon be,
excuse my typing,
dollar, age plus one.
Okay, so there you go.
Cheers.
So that's an example of an interpolated string.
A string that starts and ends with back ticks
and then inside it has curly bracket, dollar expressions,
which are evaluated.
Hi Andy, you will be 22 soon.
Cheers.
That's an interpolated string.
So that comes in quite handy because often in React
you are trying to build up a string of HTML
with embedded values,
so the back tick helps you to build up a string
in one expression.
Okay, next topic, arrow functions.
An arrow function is also known as a lambda
in other languages.
It's an anonymous function effectively.
So that's typically used for handling events.
So it might look something like this.
Well traditionally in JavaScript,
you might have written code like this.
Imagine you've got a button,
let button one equals something.
Okay, so you basically found a button in your code.
I'll just declare it as available, like that,
but either we've done something like document dot get
or how about this query selector,
query selector and you give it the ID of a button,
button one, in your webpage.
So button one is a button
and you wanna handle the click event.
So you can say button,
button one dot on click.
When the click event occurs,
oh, sorry about my typing,
you just,
you give it a function
and that function will be invoked
when the click event occurs.
So, in traditional programming,
JavaScript, you'd've had a callback function
a function like this,
which does some work.
So,
it does some handling event there.
Okay, so if I was gonna write it,
I'd write it like that.
So that would be, that would be fine.
But in ECMAScript these days,
instead of having an anonymous function written that way
you can have a lambda or an arrow function.
You have parenthesis representing the parameters
and then you have an arrow like this.
Okay?
So basically this is the lambda syntax,
or arrow functions,
more or less the same as callback functions in ECMAScript,
traditional ECMAScript, but a slightly easier syntax.
And this event handler can receive a parameter,
like an event.
Okay?
So you can say, this is the event that occurred,
click event, handle the event inside this arrow function.
Okay?
So those are called arrow functions, as in an arrow,
but they're also called lambdas in most other languages.
Okay, classes and inheritance.
So, JavaScript, for the last 15 years,
emulated object orientation
in a, kind of, relatively clumsy way
but ECMAScript these days has proper support
for classes and inheritance.
So you could find a class called bank account,
a good old bank account class.
And in the bank account class you'd have
a constructive function
to initialize a new bank account when it's created.
You'd pass in the name and the initial balance
and the constructor would add those properties
to the object.
This object now has a name, property,
which receives the incoming parameter name.
This bank account object has an age property,
age balance,
which is the value of the balance property passed in
like so.
So a constructive function would initialize a new object.
You might also have a method to deposit and withdraw.
So let's write the deposit method.
It takes in the amount to be deposited
and it increments this object balance
to include the amount,
like that.
And you'd have a withdrawal function and so on.
You could inherit from it,
a special kind of bank account called savings account,
which doesn't,
which adds interest.
So you'd say something like this,
class, savings account, extends or inherits from,
in other words bank account.
And in here you would define how does a savings account
extend bank account?
Does it have extra properties?
Does it have extra methods?
And so on.
Inheritance in JavaScript is based on Java,
syntax actually, not quite the same
but based on Java, but much simpler.
Okay?
So that's the basic idea of inheritance,
classes and inheritance.
That's an important feature you can imagine.
We also have destructuring.
Destructuring is where you take an object
or an array
and you deliberately extract each element
into a separate variable all in one go.
So, imagine I had this person object,
that person one.
I've got a person object
and that person object has a name, a name property.
Let's go for Jayne
and an age property,
21
and a nationality property,
guess what?
Correct.
Welsh.
So there's a person.
What I can do is I can declare variables
to extract each property one by one.
Well, I could do it manually, like this,
I could say, let's declare a property called name,
which will extract person one's name,
that'll be Jayne.
Let's declare another variable called age,
which will extract the person's one,
person one's age,
21.
Let's declare another variable called nat,
which will extract the person,
person one's nationality.
So in each of these cases, manually,
I've extracted a property from the object
and copied it into a variable
that happens to have the same name.
So the ability to take an object
and to access its properties one by one,
to store in separate variables,
I could write those three lines, equivalently, like this.
So these three lines here,
I'm gonna comment out.
And instead of those,
I'm gonna declare all in one line
this,
curly brackets, name, age, nat, equals p1.
This is destructuring.
It takes the object on the right hand side,
and it creates variables called name
and that automatically holds the p1's name.
This is the object that will donate its properties.
It'll donate its name property,
in other words, copy it into this variable.
It creates this variable to hold p1's age
and it creates that variable to hold p1's nationality.
So this destructuring,
take an object
and extract its properties into separate variables
is equivalent to these three lines of code here.
And we use that a lot in React, actually.
Often you pass objects around
and you want to get at their internal properties.
Destructuring does that for us.
So that's destructuring.
There's a similar, but opposite, process
called the spread operator.
Let me show you this one.
Imagine I had an array.
So, I've got an array here.
Let array one equals 10, 20, 30.
Okay.
I could do this.
I can say, console dot log a1.
Okay.
And what I'm gonna do is I'm gonna prefix it
with dot, dot, dot.
In that context, the dot, dot, dots index
means a spread operator.
What the spread operator does
is it expands the object or the array
into a comma-separated sequence of its elements.
It's equivalent,
this statement here,
is completely equivalent
to this console dot log.
The dot, dot, dot operator,
it says, basically,
give me element zero of the array,
a0,
a0, comma.
The spread operator basically expands with a comma
between each element,
a element one, comma,
a element two.
Okay?
So, those two statements are, again, equivalent.
The spread operator means take the object or the array
and split it into a comma-separated sequence,
element zero, comma, element one, comma, element two.
That's what the dot, dot, dot operator does.
And believe it or not,
that actually turns out to be really useful
in React as well.
Often, you have an object
and you want to split it into its individual parts
so that you can access each individual part separately.
And that's what that does.
It converts an object or an array
into a comma-separated sequence of its constituent parts.
Okay,
one last thing, array mapping and filtering.
You can take an array
and it has a map function to convert each element
into something else.
And it has a filter function
to keep analytical WHERE clause in SQL.
So I could take an array,
I could take a1
and I could say,
take my array, a1 and map each element.
The map function,
well, there are lots of different ways you can do this.
It basically takes a callback function to say,
what would you like to perform on each element?
So for each element, I'll call it i,
no, let's call it e, e for element.
Let's call it elem.
For each element
I would like to convert it into the element squared.
So it implicitly iterates,
you give it an array and the map function,
it automatically iterates through the elements.
It'll iterate through the elements there.
It'll call the lambda for each element.
First of all, it'll pass in 10
and we get back a hundred.
What you get back is a result array.
Whatever you wanna call it, let's just call it r, ra.
You give it an array
and for each element, it'll transform it into a squared.
I'll get back a result array
that will contain 10 squared, 20 squared, 30 squared.
Okay?
So that's very useful.
That's really useful in React as well,
because you'll see,
because you'll often have an array of data
and you want to transform the data
into some kind of HTML element.
Transform the data
into an HTML element that I can display.
Right.
There's a filter function as well.
Similar kind of thing.
You say a1 dot filter.
And again you give it a function
and that function is gonna be called, you know,
n times,
depending on your array size.
What you've gotta do in this function
is to return a true or false, you know,
so, depending on what your syntax is for why,
under what circumstances do you want to filter your data?
Maybe you wanna get back every element that is even.
So, if you take the element
and you divide it by two
if the remainder is zero, keep that element.
So it'll basically pass 10 into here
and then it'll pass in 20
and then it'll pass in 30, you know,
because that's array that I'm iterating over.
And for each time it'll return true or false.
If it returns true,
then the element survives the filter.
Okay?
So I'll call this, let the filtered array equal that.
And just to make it even more exciting than it already is,
let's change that to be 21.
So it'll pass in 10,
10 is evenly divisible by two.
So let's say, keep that element,
it returns true.
It then passes in 21,
21 is not evenly divisible by two,
so drop that one.
It's like saying select star from collection
where it's an odd number,
where it's an even number, like that.
Okay, so, these are all very useful techniques
that we've just looked at
and we'll be looking at them,
we'll be using them ad hoc during the next few sections.
Right.
There's also a bunch of libraries.
When you write a React application,
obviously you need to get the libraries from somewhere.
React is a relatively small framework.
Okay?
So there aren't that many libraries
that you need to pull in.
You've got two different ways
in which you can pull the libraries in.
The easiest approach,
we'll have a look at first,
is to write a simple webpage.
And in our webpage we're gonna include script tags,
which will pull in libraries directly from a website.
There's a website you might've come across
unpkg.com.
It's a website for many standard NodeJS libraries.
So initially, we write a simple React application
that'll pull in the libraries directly
using script tags from HTML.
A better approach
is to download the libraries onto your local machine,
rather than pulling them down as part of your web rendering.
It's better to pull those libraries down initially
and then kind of build them
into your application source code.
So to do that,
you need to use Node Package Manager or YARN.
So that's the preferred way of doing it
because it gives you a,
kind of like a way of optimizing
the application size afterwards.
So, we'll start off with the first approach,
in the first example
and then we'll see how to do it properly
using YARN or Node afterwards.
Okay?
So that gives you an idea of where we're heading.
What we'll do in the next section
is have a look at how to write a very simple
React application
where we've pulled down the libraries directly
using this first approach.
Then we'll take it a step further
and see how to do it properly
using Node Package Manager.