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.