[...] And let's take a look at the other features that this version included
which are features that,
my goodness dude, [...]
[♫]
Hey Dev, everything okay??
In this video we will talk about the release of the version 3.3 that happened 8 days ago,
so I'm recording this video here on the 12th, it was released the 4th,
if my math is sharp,
and basically this version includes some very awesome features,
that's why I'll talk specifically about this version,
I don't analyze all the versions that are released from
"create react app", from React Native, and Node, and so on,
but for example, in the last Code/Drop, we talked about version 13 of Node which included
the ECMAscript modules part by default,
then use an import/export instead of the commonjs, if you haven't watched this Code/Drop yet,
it's really worth watching it,
um ... and today we go then specifically from this version 3.3
"create react app" which is the most famous boilerplate right, the starter point of React, we can say,
so, uh ... what they included in this version
that makes so much sense to stop to talk about it, to talk a little bit about it,
about this.
First thing that for me,
dude, so good to have released this, ~ wow, I used very old slang~ but, [makes more sense in Portuguese]
the part of custom templates.
What is this?
Since the beginning of React Native, if I'm not mistaken, since version 0.50, more or less,
when we ran the command "react-native init", why am I talking about React Native
here? Not about ReactJS, which is the "create react app"? We will understand it in a little while.
If I wanted to create a project, for example,
with a specific template, which means, with some settings
of my own or even a template from a... another user,
I just have to create this project,
pass a flag called "template",
and here for example if I put "Rocketseat"
he would look for a template, right, a package in npm called
"react-native-template-rocketseat" because that is the name of the template that I put.
Then it would download with the React Native settings,
also those files I had created.
Rocketseat even ended up creating,
uhm... a React Native template, I'm going show the two templates we have,
so we have "Advanced" today,
that it comes with all the configuration of Redux, Redux-Saga, ESLint,
Prettier, Config Editor and much more, a lot of people don't know this template yet,
we are improving it,
and there's also Rocketseat Basic, right,
that are the two React Native templates we had created so far.
So, as I said,
React Native already had this operating for a long time,
but ReactJS, when we used the "create react app",
we didn't have a template scheme yet
native, right, impor--
that was easy to create a package at npm with our template,
and go straight to using it with the "create react app".
And from version now 3.3, from day 4, which was here, I don't know why I tried to guess the date,
but since version 3.3 then,
if we create a package in npm
which starts, right, which has the prefix "cra-template"
" - " the name of our template, for example I can create a "cra"
"-template-rocketseat" for example,
and we, when we do the
"create react app", either with yarn or with npm, whether with npx, independent,
and pass the flag template, we can also use a specific template.
Here for example it is giving an example using the typescript template, so
let's try to create
this project using the template
of typescript. Then I'll call it...
uhm... "testcodedrop",
let's leave it creating there,
and let's take a look at the other features that this version included,
which are features that,
my goodness man ...
really, they will help a lot, we were even discussing this,
we talked about a...
tool that Facebook, and ...
~ we, what I'm talking about ... ~ here, the Rocket team,
we were talking this week about a very awesome tool, which Facebook has launched,
that's this idx, right?
This idx is basically a ...
uhm... a tool, a helper,
to achieve
getting deep into objects and vectors,
uhh... even when some properties of this object may be null.
Oh ... let me try
exemplify this in the code, that I ...
I can demonstrate
much better my line of thought
through the code. So let's suppose we have
a React component, alright? Here I will create
an rfc, right, a... React Functional Component,
and here, let's suppose it's
a list of repositories.
And this list of repositories, it... comes,
uhm... the list, it comes from a request
to the API, so we usually have useEffect,
right? This useEffect
it makes an API
request,
so I won't do everything in here,
so in here it does
and API request,
alright? And after it finishes the API request,
it sets
the value of the repository list, right, from the list of reposi--
* uhh * "repository listing
on the state "
this here is kind of a standard inside React, we search information from the API,
fill the state with that information, simple.
Alright,
But here in the return, we want to display this list of repositories,
or information from a specific repository.
Let's suppose we wanted to show
the name of the author of a repository.
Then we usually have a "p", let's suppose,
then we will get information from the state,
which is the repository, which we load from the API, let's suppose that here we load,
ã ... a single repository. "Set the value
of the repository
in the state ", we load a single repository, so now it will change to "Repository".
Alright.
Here we want to get the author of the repository,
Alright? Then we want to get the name of the repository.
So see that I'm coming in deep in that
repository, so I'm getting its author,
and from inside the author I'm getting its name.
What can happen here?
while this API request here is not finished,
there will be an error on my code.
Uhm... firstly, there will be an error, because
the repository, it may not be an object.
If it is not an object, it will not have the property "Author"
in it.
If the "Author"
if the repository is even an object but it is empty which is how we usually start
a state, right? We start the state here as an empty object, when it's information,
uhh... unique, which is not a listing, right,
uhm... if the repository is empty,
uhh... there will, no-- there won't be an error at this first part, right, he won't find the author in here,
however, as the author does not exist, right, an object that doesn't exist,
there will be an error on the name, which means, there will be an error
that this object ...
that the Author is not an object, that's why I can't find a name inside it.
Why is this happening, and what am I talking about, why am I talking about all this?
Facebook has released this library called "idx",
which is meant exactly to solve this problem, you can enter inside an object, or a vector,
and in case it finds something that doesn't exist, that is null,
it will simply return null, It will not cause error in your code.
This is a problem that we had, dude, a long time ago,
I had to keep doing this, check it out,
"if the repository
exists and if and the repository.author exists,
then yes I want to get their name.
So if at some point in your life you already failed, right, you already failed,
creating some kind of code like that, whether inside an if, or inside,
uhm... of rendering itself in here, uhm...
we now have a solution, it is not this "idx", this "idx" came to solve
the problem before we had it
here, [Reading] "This module exists as a stop-gap solution because Javascript does not currently
support optional" "optional chaining" "chaining", right?
uhm... what is this optional chaining?
It's a Javascript proposal
to include a new operator, and this proposal has advanced in a way
that's extremely fast.
How do I know that this proposal has advanced re-- extremely fast?
It's already on Stage 4, Stage 4,
is basically the point where this right here will be incorporated by default
inside Javascript, we can already safely include this in our application.
And then, inside of all this, before I talk about this optional chaining, I'll talk about it in practice,
why am I talking about it? Because "create react app"
included by default on the new versions from 3.3 onwards
the Optional Chaining and Nullish Coalescing Operators,
I'll talk about it here in a while, about this Nullish Operator, easy?
So let's talk about Optional Chaining. Let's see if our app has already been created,
uhm... it worked here, [Reading] "A template was not provided"
because I'm not using a recent version of "create react app"
fiiiine ...
so we have to add the most recent version of "create react app",
if I don't, really I won't be able to create a project
so what I'm going to do is, I'm going to add a "yarn global add create-react-app" again,
let's wait here for the installation ...
So alright, now that we installed "create-react-app" here,
we will do this, let's create our project again, I won't delete that other one over there,
so I'll do a "yarn create react-app ", I will call it...
uhm ... "testtemplate"
and now I will pass the flag
"template"
being equal to ty-- ~ no it's not equal, no... ~ just like that, "type" ...
"typescript".
Now I hope it works,
uhm... my...
my... template,
because we installed the latest version,
I could have run "create react app", right, I ran "yarn create",
so let's wait a little now.
Nice, now we can see that it showed here [Reading] "Installing template dependencies using
yarn package ",
which means, it realized that I'm doing the creation
of a package using a template, right, that is the typescript template,
and it is already installing, look, "tsconfig", all dependencies we need for this template.
So let's wait a little bit,
alright, it's over,
I will enter the project here, "testtemplate",
let's open it on VSCode,
Now, I will run a "yarn start",
of course, to run our project,
let's wait here a little bit,
perfect, our project is running here, of course, it ran with "tsx", because I used the typescript template,
so it's ready here,
right? All our files, alright, it already comes with setupTests, which it didn't have before,
ohh nice, it already includes "extend-expect", I don't need to talk about it now, but, it's really cool,
uhh...
Fine. Now we have here our component, right, the app.tsx,
that is using here a component in a constant format, and using this react.FC,
that probably
it's a typing of our component, alright. Fine.
So now, what are we going to do,
the template worked, so it's a feature we already validated there
about the template, now we will test that one,
uhm... the first one, which is the Optional Chaining Operator,
so let's open the localhost:3000 here in the browser,
and let's start with Optional Chaining, okay?
Optional Chaining, as we can see here,
it can be used for properties as well as for
methods, so let's suppose
let's make a real example here,
that we will
load information
from a user from inside the Github API, so I have here "api.github.com"
"/users" and I'll put my user, which is "diego3g" in there.
So here I have all the information here,
of the user itself,
uhm... let's see if I can get a little deeper information ...
uhm...
let's suppose that I want to show, actually,
my repositories.
I think that way it will be more... alright.
Now it will be nicer. So,
uhm...
let me see if I can get a single repository. "/repos"
"/rocketseat/unform", if I'm not mistaken, this should be it.
Now yeah. We want to get a single repository, which is Rocketseat's unform.
So now we will start by creating a state,
this is more or less what I talked about before, and a useEffect.
Alright? In here, I'll start creating our repository state,
which will start with an empty object, we have talked about this before,
and I will have here
an useEffect
to load
the data there from our API.
So I'll make a 'fetch' here inside my API,
I could use Axios, it doesn't matter, here I will have my response,
then I'll do a "response.json",
here I am not using async.await, but it could also be used, no problem,
Alright? It's just so we can do it very quickly,
and I'm going to do a setRepository on this da-- on this date,
which is what's coming from inside the Github API.
Now here, if all went well,
I could show it, inside an 'h1',
the data for example, of who was the creator of this repository.
If I take a look here at what returns to me from inside the API,
I have an object called "owner",
then I access the main object,
inside I have "owner", and inside I have "login"
right? So if I show here "repository.owner.login",
theoretically I'll get access this information, right?
So we will save this here now,
I go back to Google Chrome, and there's an error, right?
[Reading] "Property 'owner' does not exist on type"
and here is an empty object, right? it can't compile
this here primarily because of the
typescript, so,
let's start here by simply making an interface, this is just because of the typescript,
uhm... and in here I'll have
an "owner", inside the "owner" I I have a login, which is a string.
This here, just for us to do in a very simple way,
say that this state here it has this format here.
And then I'll start it as
null,
alright? This is just a question of typescript, I don't even need to start it actually.
Uhm... And here,
[Reading] "Object is possibly 'undefined'" Alright.
Here we fall into our problem.
So here, typescript, it's already telling me,
that this repository it can be
undefined, so if we put the question mark
here in front of the dot, look,
It already begins to change the error.
I had paused the video here now, as you understood, because I...
as you noticed, because I was, dude,
this error that's showing up here has nothing to do
with the linting thing, right, because it is telling me,
it understands this question mark as if it were an expression, maybe a ...
uhm... a... a... a ternary conditional, something like that,
and it didn't understand this new functionality.
And then I went taking a look, since I had only tested this Optional Chaining so far only with Javascript,
and not with Typescript, which was the project I created now.
And then I was taking a look here at the release, and it says, "if you are using typescript
with VSCode,
you need to make sure that you are using typescript version 3.7
and not a previous version ",
and then I opened my VSCode,
I looked here in the bottom right corner,
and it's there, "3.6.3",
and then I:
*facepalm*
then I looked at my package.json,
and typescript is on version 3.7,
but what happens is, by default VSCode have an embedded version of typescript,
and, in this version I'm using currently, maybe not yours,
it is on version 3.6.3,
so I could click up here
and ask it to use the typescript version of my project, not the global version.
From the moment I selected the global version 3-- the... project version 3.7.3,
boom, the error is gone, and then it already understood here my,
uhh... my Optional Chaining Operator, okay?
Saving it here now, going back in our Google Chrome, inside React,
there it is, Rocketseat, so it doesn't have that error anymore.
If I had not used this Optional Chaining Operator,
here the typescript it was going to show an error, because it says "dude, the repository,
it... this here, you are filling in an asynchronous way,
so there's a moment that this repository is undefined, it's empty, it's null" something like that,
so it no longer allows us to execute this code, it shows an error here, but this error is from typescript,
but if you are using only Javascript, even if it gives this typescript error,
it would also give error in the end,
right? You would have to do several conditionals to be able to
check this out, so the more traditional way you would do that, look.
If the repository is filled,
you save it,
and then it could
show. So we have to keep doing these... these conditionals, let's say,
oh, now we can just put the question mark in front
and then we already have this operation.
this here also works for a method, alright?
Let's suppose we had a method in here that was,
I don't know, uhh...
uhm... I don't know, signUp
had a method in here,
which is a function, that returns "void",
we could just simply call this signUp function in here,
even if, uhm... ~here it's waiting for a return, but that's fine~
even if,
~ ready, now yes. ~
even if it's not... let's say this, set
at the first moment, then, this Optional Chaining Operator,
it's fantastic, and it's available now, so in the new versions of create react app,
and now, we have a last one, a last feature I'd like to talk about
which is the Nullish Coalescing Operator,
which are the two question marks, one after another,
And now, I will give you an example that is very practical.
Let's suppose you have a calculation here in your application,
that it makes a calculation, Idk, of the total amount of an order. So, "orderTotal",
it makes a calculation,
Let's suppose, of how many products you have,
uhm... the price of the product times the quantity, and in the end it gives any number, let's suppose,
$1000, which is the total of our order here.
When you put this orderTotal in here,
if it is filled in, you want to show it.
If it is not filled in, you want show, let's say, "Carrinho vazio." ["Empty cart", in English]
So, we usually do this,
put an "or" in here, and wrote "Empty cart".
In this case here, for example, I save this,
it will show
the $1000, okay? That is the total of the order.
If this here were null as I said,
it would show "Empty cart".
So far so good, this sign here of the "or" it saved our life a lot until then,
but let's suppose that the total of our order,
ended up being $0,
not that he is null, but it really is 0.
Uhm... it added the products and it was $0, let's suppose the products are free.
We don't want to show "Empty cart",
because there are products in it, but the total is $0,
but, if I put 0 in here,
the "or" sign, it keeps understanding that 0 is a false value,
that's why it puts "Empty cart",
but, in this case, 0 it is not a false value for us, it's only 0, right? It is not null.
So now we have the two question marks,
which is like a check
of only if this here is null or undefined or
false, which we call, uhm... right, the...
excluding 0,
basically we will exclude 0 from this check.
So even if the order is $0 for now, it will show $0
and not "Empty cart" anymore.
So these two question marks are kinda
a replacement for the no-- for our "or" sign
when we want to do this check if this is filled in,
if it's not, I don't want to show anything else, so now we have these 2 question marks,
that we call the Nullish Coalescing Operator, if we go here in the TC39 description,
he is on Stage Tre--
~ stage "treis", heh, I was speaking a lot of English~ [basically he said "three" in Portuguese, but with an English accent, and it sounded funny]
uhm... soon it goes to Stage 4, fine? Stage 3 is also already a very advanced stage,
it is already being embed inside the language, uhm... in the vast majority
of... of the libraries, frameworks and everything.
And now, here we have too other features here from React 3.3,
but nothing thaaaaat important, I wanted to talk specifically about Custom Templates,
which I found fantastic,
someone can already create a template in a Rocketseat structure, if anyone creates it, put it in the comments
that I will check it out, who knows we don't put it on
Rocket's Github, I'll leave you there as a contributor,
uhm...
o-- you can also leave it on your own Github, there's no problem either,
uhm... and we also have Optional Chaining and the Nullish Coalescing Operators,
that for me, dude, this will help a lot,
specially who deals... with API, I think everyone does,
so who searches for very complex data from the API, if you want to keep browsing this data,
Optional Chaining, mainly, is what will help the most,
and of course, this Nullish Coalescing too,
It helps a lot in these cases of calculations, right, that we have, can have a zero value.
So that's it, I think we were able to do a... a very cool overview,
remembering that this is already available to those who are using the latest versions of "create react app",
just don't make the mistake--
the same mistake as I did, so use the version here of the workspace typescript, not the global version,
if you had--
if you have a problem, take a look at this-- at this changelog documentation that has
some, uhm... descriptions here, uhm, for those who are using Javascript, yadda yadda,
so you can read a lot here,
There are also these Numeric Separators which are nice when we have a very long number,
that we don't know how to separate this number,
you can't tell if this here is 1 million, if it is 10 million, if it is
1 billion, you can't tell,
so we can put this underline sign on the front,
to be able to understand for example that this is 100 million, right? And the underline it will not,
uhh... make any difference, let's say it like that, in the number, so this one is really cool,
a new Javascript feature that is being implemented that is also now
in the "create react app",
but that's it,
if you enjoyed this video, if you would like me to talk about
uhm... about the release, about... about versions of other libraries, other tools,
in the... of the ... universe of Javascript,
put it down there in the description
of this video, not on the description, in the comments of this video,
if you liked this video put there below also in the comments,
and leave suggestions for the next Code/Drops
I'll be staying around here, a big hug, and thanks!
[♫]