Download "Crie seu próprio sistema de previsão do tempo!! (ReactJS consumindo api)"

"videoThumbnail Crie seu próprio sistema de previsão do tempo!! (ReactJS consumindo api)

🔴 Let's build Amazon 2.0 with NEXT.JS! (ReactJS, Webhooks, Stripe Checkout, Firestore, NextAuth)

🔴 Let's build Amazon 2.0 with NEXT.JS! (ReactJS, Webhooks, Stripe Checkout, Firestore, NextAuth)

Channel: Sonny Sangha

Nível 3 - Não comece sem ele: Te damos O MapaDev

Nível 3 - Não comece sem ele: Te damos O MapaDev

Channel: Dev em Dobro

🔴 Let’s build TRELLO 2.0 with REACT! (Next.js 13.4, GPT-4, Drag & Drop, Zustand, Appwrite Cloud, TS)

🔴 Let’s build TRELLO 2.0 with REACT! (Next.js 13.4, GPT-4, Drag & Drop, Zustand, Appwrite Cloud, TS)

Channel: Sonny Sangha

React para iniciantes #4

React para iniciantes #4

Channel: Miguel Maia

Java. Урок 3. Исключения и обобщенные типы в Java

Java. Урок 3. Исключения и обобщенные типы в Java

Channel: Splincode TV

Java. Урок 2. Javadoc и наследование

Java. Урок 2. Javadoc и наследование

Channel: Splincode TV

Java. Урок 13. Неблокирующая работа с файлами

Java. Урок 13. Неблокирующая работа с файлами

Channel: Splincode TV

Desenvolvendo uma aplicação de CLIMA com HTML, CSS e JavaScript | Integração com a API OpenWeather

Desenvolvendo uma aplicação de CLIMA com HTML, CSS e JavaScript | Integração com a API OpenWeather

Channel: Larissa Kich

Java. Урок 5. Многопоточность. Часть 1

Java. Урок 5. Многопоточность. Часть 1

Channel: Splincode TV

Nível 1 - As maiores recompensas da área de programação

Nível 1 - As maiores recompensas da área de programação

Channel: Dev em Dobro

html

php

css

javascript

cursos

video aula

como aprender html

como aprender css

curso html para iniciantes

curso html

video aula html

video aula css

como aprender a programar

portugues

tutorial br

video aula programação

programação

programação web

desenvolvimento web

typescript

ts

es6

es2015

react

vuejs

react para iniciantes

vuejs para iniciantes

single page application

spa

github

git

bitbucket

gitlab

bootstrap

responsividade

mobile

reactjs

00:00:00

Hi, what's

00:00:01

up, cool guys, this is

00:00:04

Miguel speaking, I was starting another video

00:00:05

for the channel, guys, before starting

00:00:09

the video I wanted to thank everyone who is

00:00:11

subscribing, everyone who

00:00:13

commented on our last video about

00:00:15

Bootstrap for beginners, guys

00:00:18

There was the video, there was very

00:00:20

positive feedback, thank you everyone, guys,

00:00:22

follow me on social media, so I'll

00:00:25

leave it on Instagram and if you have

00:00:27

any questions related to this class,

00:00:29

other classes, you can call me there and I'll

00:00:31

try to help you guys, first and

00:00:34

foremost so you can see that we are going to

00:00:37

do a little project from scratch with riecti,

00:00:39

it was a project that I did in the workshop

00:00:42

for a school in São Paulo. I hope

00:00:44

there is someone on the channel who has been

00:00:46

following me there and it is a really cool project

00:00:49

because I think that He teaches a lot of

00:00:51

Bootstrap concepts,

00:00:54

especially about reaction, consuming an

00:00:56

API that I don't know, I don't think we've

00:00:58

done this one yet,

00:00:59

and this class here for the channel, I'm going to

00:01:02

record this video,

00:01:03

just one video, and I'm going to divide it into several

00:01:06

parts to post over time. the week

00:01:09

because today is Saturday, as you can

00:01:13

see, October 30th at ten o'clock at night and

00:01:15

tomorrow morning I have a very

00:01:17

special trip, I want to take it so I can

00:01:20

take a break.

00:01:24

rest and then I wanted to know if

00:01:26

you want to follow my

00:01:28

trip on Instagram leave it in the

00:01:30

comments because if your return

00:01:33

from Galera was cool I'll post some

00:01:36

things from there about the trip guys

00:01:38

let's get our hands dirty here

00:01:42

what What am I going to do? I'm going to start

00:01:45

a riecti application from scratch. I'm not going to

00:01:47

use typescript in this application. It's going to

00:01:51

be JavaScript, so we can have

00:01:52

a slightly different approach

00:01:54

than we already have. do

00:01:57

you know

00:02:00

how to use an lpx you can use

00:02:04

npm

00:02:07

i you can use print at ep if you

00:02:10

have it installed on your machine you can

00:02:12

use npm there is a little video explaining

00:02:16

how you do it so you can do this

00:02:19

installation in our Rex series for

00:02:21

beginners watch the first video there

00:02:23

and I'll explain it to you because it's kind

00:02:25

of a prerequisite for you to have

00:02:28

watched the rack series for

00:02:29

beginners to be able to do this little

00:02:32

project that we're going to do here

00:02:34

so you're going to use the npx even the

00:02:37

rec ep client And then I'm going to give a consultation, let

00:02:42

me see here the weather,

00:02:47

the

00:02:48

iett can be any name, there's the

00:02:51

person he was the fictitious name

00:02:53

because weather consultation I had already

00:02:56

used

00:02:58

in the workshop, I already have this project

00:03:00

here on my machine and guys I I think

00:03:04

they're a really cool project for you

00:03:06

to use as a portfolio,

00:03:09

while you're going to do it at the installation, I'll

00:03:11

talk to you there And this is

00:03:14

very important for you who are

00:03:16

looking to enter your career. A lot of

00:03:18

people message me on Instagram

00:03:22

saying they're trying some tips for

00:03:24

being able to enter a career and I think

00:03:26

that sometimes people don't have

00:03:27

experience and having a portfolio is really

00:03:30

cool, you know. I think it's very important for

00:03:33

you to have your portfolio there so you

00:03:36

can actually

00:03:38

share this, you know, with the

00:03:40

life ranters out there while It's

00:03:43

installing

00:03:45

today, I'm going to show you what

00:03:47

we're going to need, okay,

00:03:50

I'm

00:03:51

going to bring it here

00:03:53

on my other monitor.

00:04:03

Yes, you're

00:04:05

going to come, no, go and create your account, I

00:04:08

already have mine so I'm going to log in

00:04:10

with it here

00:04:14

Andthen

00:04:16

I need to remember the password, I don't remember

00:04:19

the password

00:04:21

and that's it, so what are you going to do

00:04:24

once you log in? you're going to

00:04:27

go to this screen here and you're going to

00:04:29

copy this hippie that

00:04:31

we have here and get goose bumps and that

00:04:33

it's a free plan, okay guys you

00:04:35

don't need to pay it's completely free

00:04:38

I can do a million queries

00:04:40

per month in this Pein, so it's very

00:04:43

calm, it's

00:04:44

impossible for any of you to

00:04:47

cross this limit, folks, this is done,

00:04:51

this account created your account and copied this

00:04:53

hip here, what are you going to do, I'm going to

00:04:56

enter here in the project that I just

00:04:58

created and I'm going to I'm going to open my Visual

00:05:01

Studio code,

00:05:03

can you, I installed a little command

00:05:07

here Cold that I can open but you

00:05:10

can go to the same file where you are

00:05:13

in the folder What Did You Do This

00:05:15

Installation and open normally in vs

00:05:17

code coming here in files or pen and select

00:05:21

the mass giving the same, okay guys And then

00:05:24

what I'm going to do I'm going to open my

00:05:25

terminal I can do it on Mac it's against

00:05:29

Crazy or you can come here in

00:05:32

terminal newterm no and that's what I

00:05:35

'm going to do I'm going to give a

00:05:37

npm Run start or an early start as I

00:05:41

usually use early I will

00:05:43

use yarn here too and it will

00:05:48

open here for us it opened on my

00:05:50

other monitor here but I will bring it

00:05:52

down here we have a

00:05:53

simple installation from riet in this case

00:05:55

using JavaScript And then we're going

00:05:59

to do a little cleaning up on these

00:06:01

files here guys, which has a lot of

00:06:04

stuff that we won't need

00:06:05

to use so ep points SS we'll

00:06:08

delete the web. Test pay attention to this

00:06:12

we delete the index points SS we

00:06:15

delete the logo we delete and these two

00:06:19

files or these two files here

00:06:21

also the reporter ueviton if Hi and the

00:06:24

setup Taís we also delete it is because

00:06:28

Miguel you are deleting this because

00:06:30

in the basic installation of Hatch

00:06:33

there are a lot of things that we don't use.

00:06:35

So in this case, as a

00:06:37

very simple project, there is no need for us to

00:06:41

use it. I'll open the index here. JS

00:06:44

and I'm going to delete these comments too and

00:06:47

I'm deleting this call to this function

00:06:49

here from report web virus Because as

00:06:51

we deleted the file we don't need it

00:06:54

anymore it's on line number 5

00:06:58

we're also going to delete the report web

00:07:00

vittles

00:07:02

let's delete the import from this index

00:07:04

SS points on line three I'm going to save and then

00:07:08

he keeps complaining to me look and

00:07:10

then it's very easy there's someone who's saying

00:07:12

that he's trying to import the crazy thing.

00:07:14

Svg and it doesn't exist this one so it's

00:07:17

being called no F. JS So I'm going to delete

00:07:19

these two imports here and here I'm going to

00:07:22

delete everything and I'm going to have fun I'm going to give

00:07:25

one is a h1ac I'm going to put weather If I'm

00:07:30

going to go back to our little guy I'm going to

00:07:34

update I need to update right now

00:07:36

because I paid for a lot of

00:07:37

files Okay but normally you don't

00:07:39

need to update if I come here

00:07:41

notice that it's already here and if I change that

00:07:44

the team then two I'll save it's already

00:07:47

here it's already working perfectly

00:07:51

our a I'm going to do our basic installation of Hatch,

00:07:54

I'm going to send a little here

00:07:57

guys to make it easier for you to see,

00:07:58

I'm going to do this test here, I'm going to reduce it

00:08:01

a little and then what I'm going to do is

00:08:05

in our folder, guys, it's the nozzle, I'm going to close

00:08:07

these two files in our part at the

00:08:09

pub I'm going to delete the favia and also that

00:08:12

I don't want to, I'm going to delete these two Logos

00:08:15

here dot.png that I also don't need

00:08:17

anymore and I'm going to delete manifeste

00:08:21

Alisson's dot and the robots.

00:08:23

the fish Stitch because I'm doing

00:08:26

this guys so you can see that

00:08:29

the installation of the basic riecti it comes

00:08:31

with several things that are not

00:08:32

simple project You probably won't

00:08:34

use it and you can delete this one here is

00:08:37

the minimum condition that I need that I

00:08:39

need have for a riet application

00:08:41

to work Okay and that's what I'm going to do

00:08:44

within Publish I'm going to import

00:08:47

Bootstrap And that's where you can get

00:08:51

the link that I'm getting here I'll

00:08:53

leave it there in the description But if you

00:08:55

want to do this Same search as I

00:08:57

'm doing you will type in Google

00:08:59

Bootstrap Bootstrap CDN will open this

00:09:04

first link here get bootstrap.com and

00:09:07

here it already has this link here the

00:09:09

little faces here that we want I will copy

00:09:12

this little face why am I doing it

00:09:13

like this Okay guys, because the quickest way,

00:09:15

but it's not the most performant, is

00:09:18

what this guy is going to do, I'm going to open one

00:09:20

of them. HTML here,

00:09:23

I can remove everything that has green, which

00:09:26

are comments, we won't

00:09:28

need it either, I

00:09:29

'll delete it here, I'll explain it to

00:09:32

you, these two links here, we won't

00:09:35

need it either because

00:09:37

we deleted manifest.in Jackson and

00:09:39

we erased the rent, right? Let's pay, we

00:09:42

can erase this mint here as well as

00:09:45

this time color from here we

00:09:47

can also erase and let's erase this favia and

00:09:50

with here that we are not

00:09:51

using either I'm going to save everything works with

00:09:54

sex straw and talk that is Everything went

00:09:57

fine here, I can update Here,

00:10:00

everything is OK, so I'll come back here, I'll copy the

00:10:02

In fact, I already bought it, it's already in my

00:10:04

control c here and I'm going to paste it here under

00:10:06

Thai, that

00:10:07

's what you're doing, I'm in dust As

00:10:11

if I had importing personal CSS

00:10:13

is the same thing, but instead of it being

00:10:15

a file that is inside my project,

00:10:18

I'm getting it from the internet, so it doesn't

00:10:21

change anything, it's not the best way to do

00:10:24

it here, because what

00:10:27

happens if the user If you don't have an

00:10:29

internet connection, it won't download the

00:10:32

styles, ideally the style should be

00:10:34

local, so you could have downloaded the

00:10:37

Bootstrap files and placed them within

00:10:40

our project. And then I can

00:10:43

import them here, right, Bootstrap points SS,

00:10:45

but how This project of ours I want

00:10:49

it to be simple and I'm also going to

00:10:51

consult a fart time so I

00:10:54

need the user to have access to the

00:10:58

internet, right, so it

00:11:00

will work exactly the way I

00:11:03

want I'll save it and notice that the font

00:11:05

will change, I'll even give Zoom in here

00:11:06

so you can see that from the moment

00:11:08

I save the source it will lose

00:11:11

what we call hyphae, which

00:11:12

are these little dots, for example two

00:11:14

here, there is one. W Here's a little point

00:11:16

I'm going to save, notice that I saved it, it

00:11:20

removed the spacing and the Font changed

00:11:22

drastically and everyone was able to

00:11:25

notice this, it's a sign that Bootstrap is

00:11:28

working, it's in our application, so

00:11:30

we can continue

00:11:32

here, guys, I I'm going to need

00:11:35

to do basically just this,

00:11:38

I'm going to close our one of them. HTML and

00:11:42

go inside our ep. JS I will open

00:11:46

here and there in this ep. JS which is what

00:11:50

we are actually going to make our

00:11:52

changes to what we are going to

00:11:56

need to build and then what

00:11:59

I'm going to do I'm going to leave this one here

00:12:01

we can leave it here no

00:12:02

problem I'm just going to remove it this classname

00:12:05

because I'm not going to manipulate the CSS

00:12:07

directly I'm just going to use Boots

00:12:10

black here because it's for you to see what

00:12:12

I can do with Bootstrap that's what

00:12:15

we're going to do I'm going to create

00:12:17

a ship And then it's very important for us

00:12:20

to a semantics, right, I'm going to hit

00:12:23

this key a lot about the correct semantics, it's from

00:12:28

HTML because it helps with indexing. And then

00:12:31

what I'm going to do inside this side,

00:12:33

I can close it here and I won't

00:12:34

need to use it anymore inside this ship,

00:12:36

I'm going to use some classes Hello

00:12:38

everyone, it's It's important to point out that I

00:12:41

don't memorize that, that's it, that's not it, it's not

00:12:44

memorized in my head, but

00:12:46

as I did a workshop for a

00:12:48

school in São Paulo and it's recent,

00:12:53

so I end up remembering it because I

00:12:55

did it a lot live with a

00:12:58

group of people, and here are the suggestions, two

00:13:01

suggestions that you have, your mission is to

00:13:03

give me, if you want to see my

00:13:05

trip, I think this is a really cool trip, do you think it's

00:13:07

cool, some live events

00:13:11

here on the YouTube channel, let me know So

00:13:13

in the comment, if you watched it, okay,

00:13:16

so we're going to take a class here

00:13:18

called navbar,

00:13:20

I can save it here, you'll see that

00:13:22

nothing happens, okay. For

00:13:24

now, inside this ship here,

00:13:27

what am I going to do

00:13:29

and I'm going to put a link that goes

00:13:34

within this link I'm going to put it here,

00:13:36

Miguel Maia Miguel,

00:13:41

the weather forecast could be just like that

00:13:45

Ah, our link is already here And then what

00:13:49

I'm going to do is our link, one inside

00:13:52

this classname, here I'm going to

00:13:55

put some more classes I'm going

00:13:56

to put

00:13:58

navbar-expand-md and I want

00:14:01

it to be a little

00:14:03

more expanded in medium resolution. I want

00:14:06

my navbar to be navbar-dark in a

00:14:11

dark style and I want it to have

00:14:14

a BG background that's also

00:14:17

dark, notice that It's already dark for

00:14:21

me here and then I want it to have a

00:14:24

margin button, that is, everything

00:14:26

below it here that is four

00:14:29

pixels, right here, it's not necessarily 4 pixels,

00:14:31

okay, guys, it's the unlock button, it has a

00:14:33

measurement there, one is a little bit.

00:14:35

two is a little more three is a little

00:14:38

more and so on and so on and so on and

00:14:43

that's it from here I know because I've already tested it I've

00:14:46

done it a few other times so it won't

00:14:48

work well for me and then what

00:14:50

I want I'll put a classname

00:14:52

in this Karen here

00:14:54

navbar-brand

00:14:56

that will give me a

00:14:59

slightly bigger, a little more imposing stylization

00:15:01

And then guys, it's cool to point out that

00:15:05

the purpose of this video is to show

00:15:08

you consuming a pi and show

00:15:11

you the power of Bootstrap or of these

00:15:14

tools, which are these libraries

00:15:17

of style components. How

00:15:20

can you make quick use of them, right?

00:15:24

and build a project from scratch, with a

00:15:27

very high speed, I want

00:15:30

this guy here to be text-white, I want

00:15:32

his text to be White because

00:15:34

in this case it makes more sense to me he

00:15:36

is giving an order here whenever there is

00:15:39

this Yellow here some people

00:15:40

ask some and Don't worry

00:15:43

he is saying that there is something here

00:15:45

that could be wrong but that it is not a

00:15:47

problem it is just like you have

00:15:49

something here that is probably wrong

00:15:51

and it requires a little attention if I

00:15:54

leave the mouse here on top of this

00:15:56

anywhere on this yellow line

00:15:58

here it will show me Look at grabbing this

00:16:01

the HF attribute it is mandatory for a

00:16:04

Anchor to be accessible through the

00:16:08

keyboard and then I'm going to put a claw and

00:16:10

this one here I can put

00:16:12

anything here I'm going to put this

00:16:16

top here just so it stops that

00:16:19

this warning here when I put a

00:16:22

tic-tac-toe board means that I want navigate

00:16:23

to Any Diva anything that has

00:16:26

this Top as there is no one with

00:16:29

this Top it

00:16:30

won't work But it's just to take

00:16:33

the alert here for us,

00:16:35

okay guys, so we have our ship,

00:16:38

we have the our our link that doesn't

00:16:41

go anywhere separate that he

00:16:43

put the top here but it doesn't go

00:16:45

anywhere

00:16:46

And then under our ship here I'm going

00:16:50

to put a guy who I'm going to name after

00:16:52

myself who I'm going to give a name to not from me,

00:16:55

actually I'm going to use the Mendo HTML tag

00:16:58

and in this tegmen what I'm going to do

00:17:01

and I'm going to use a class also from

00:17:04

Bootstrap before using this class

00:17:07

here just so you understand, it's a

00:17:09

little more visual I'm going to remove it and I'll

00:17:11

I'm going to apply it right away I'm going to

00:17:13

create a create a div here it is in this diva

00:17:15

I'm going to use a class called

00:17:17

jumbotron the jumbotron my kitten is

00:17:21

here complaining about the jumbotron it's a

00:17:24

really cool use that I'm going to

00:17:26

explain to you and then I'll go put

00:17:29

the classic one here, I put the

00:17:31

container before the container, it limits a

00:17:35

part of my website and this is done what

00:17:39

I want, understand, I don't want it to

00:17:41

stay,

00:17:42

I don't want it to be without a

00:17:45

width of 100 percent and notice that it does

00:17:47

n't have 07 s in my project and it is already

00:17:51

responsive if I was adjusting here I already

00:17:54

have a very responsive project and then

00:17:57

inside my Jumbo so I will

00:17:58

first use personal and then

00:18:01

we can make the

00:18:04

actual connection with ati, right?

00:18:06

So inside

00:18:09

my jumbotron I'm going to create a

00:18:12

very simple paragraph and here I actually want

00:18:15

a title first underneath a paragraph

00:18:18

So I'm going to put my H1 here and here

00:18:21

I'm going to write check Let me

00:18:24

think now check the

00:18:29

weather forecast for your city and So we're going

00:18:33

to save it, the big one appeared here for

00:18:36

us, but it's great, this effect I really

00:18:38

want

00:18:40

because how tight it is, it gives the

00:18:43

feeling that it's big, right, but it's not that

00:18:45

big, and then what am I going to do

00:18:48

in this paragraph? I'm going to give a little

00:18:50

more instruction to the user I'm going to

00:18:51

put it here, type the name of your

00:18:57

city in the field below

00:19:00

and then click on search

00:19:07

beauty then I want to use a

00:19:10

Zinho class here from Bootstrap also

00:19:12

called Leite because it will give a

00:19:14

little more prominence here to

00:19:16

this paragraph of ours, ok And then what

00:19:19

I'm going to do

00:19:22

underneath this paragraph I'm going to create

00:19:25

another div and inside this div what I'm

00:19:30

going to do this one would say I'm going to put

00:19:32

a class in it that I I want it to

00:19:34

be a line so it will be a

00:19:37

whole I want it to have more than one

00:19:39

button of 4

00:19:41

Hi and then inside this little face here I will

00:19:44

create another div I will explain to

00:19:47

you and then inside this little face

00:19:50

what I'm going to do it, I'm going to put a

00:19:52

draw,

00:19:53

we've already used the implant in our

00:19:57

rieti classes, so here it's going to be a

00:20:00

very similar context, okay,

00:20:04

let's see how it goes,

00:20:06

saved So what do I want, this

00:20:08

implant of mine, I'm going to put a class in it

00:20:10

Look how cool guys it's called shape

00:20:13

control and it will stylize the

00:20:16

tie for us very simple okay And then

00:20:20

in this affection here o In this class that is

00:20:22

outside the implant I want a column

00:20:25

that is the width of six Ana

00:20:28

average width out of six because then I have

00:20:30

a draw here and it is very responsive,

00:20:34

notice here that we already have

00:20:37

practically a little responsiveness,

00:20:43

so guys, it's with just a few lines of

00:20:47

code You can already have something very

00:20:50

responsive It's logical that we can

00:20:52

improve a lot of things here but I think

00:20:55

that for the idea of this project for a

00:20:56

portfolio to be something

00:20:59

initially simple if done super

00:21:01

well it's continuing here we have

00:21:06

our draw and then under this

00:21:09

debt here that we made I'm going to

00:21:11

put our button because we

00:21:14

told the user to click on search, right,

00:21:16

so we will have a button here,

00:21:18

notice that the native HTML button

00:21:21

has a very ugly use with

00:21:23

Bootstrap, we can improve this

00:21:27

very quickly if I type it, I just didn't

00:21:29

record it, finish it, right? If I just put btn

00:21:33

and it already Removes the Native stylization of the

00:21:36

button and then I can put a

00:21:39

btn-primary and then it becomes a much

00:21:42

prettier little blue button I

00:21:45

want it to be a little bigger also

00:21:47

closed guys at first This will be

00:21:50

ours, the stylization of our project,

00:21:53

we already have basically everything here that

00:21:55

we need to make it work

00:21:58

And then the real magic of reaction begins,

00:22:08

right? So the first thing we need is to be able to manipulate the name of the city, right? the user is typing

00:22:11

there and then we enter something

00:22:15

that we call in Direct which is called

00:22:17

two way data binding which is what a

00:22:19

two way manipulation Miguel I don't

00:22:23

understand nonsense what is this what

00:22:25

happens ok personal and iett so

00:22:29

it can control the screen here because

00:22:31

riet is a Lib and is

00:22:34

responsible for manipulating

00:22:37

what is displayed to the user, right

00:22:40

user here in this case it's me because

00:22:42

I'm creating it but imagine that you

00:22:43

want a service from some company that

00:22:46

It allows users to consult the

00:22:48

weather forecast for their city, so

00:22:51

what happens is iett

00:22:54

is responsible for

00:22:56

handling and delivering everything that

00:22:59

is on the front end to the client,

00:23:00

so iett when you come and type

00:23:04

something here he is looking at that

00:23:08

data beautifully and manipulating that data in

00:23:11

some way and this we call

00:23:13

uncle Hey databyte takes two-

00:23:16

way manipulation it is the user importing the data and

00:23:18

iett doing something with that

00:23:20

data and this is very easy for us to see

00:23:23

What do I need to do

00:23:25

here? So,

00:23:27

whenever I'm going to manipulate a

00:23:29

field, the input onclick of something,

00:23:32

most likely, mainly of a

00:23:35

field, I'm going to need

00:23:37

a state and then we have options for

00:23:41

global states that may be in the future

00:23:43

in the next video then I can explain

00:23:46

about them what a Global state is

00:23:48

And then there are several tools that can be used to

00:23:51

manipulate this state, a well-

00:23:53

known Redux is leave it in the

00:23:55

comments if you want to learn

00:23:57

about global states When we

00:23:59

use it and many more Sometimes we will

00:24:02

have a local state of the application because

00:24:04

we have this component all here and

00:24:08

hardly any other component will

00:24:11

need to know the name of the city or

00:24:14

when the user clicks on search

00:24:16

then we identify that we

00:24:17

need a local state and to be able to

00:24:20

use a local state I need some

00:24:23

affection from the riecti which is called and the

00:24:25

State Oi and the assistant he is a Hulk,

00:24:29

so whenever you see

00:24:30

something in reaction that is called IOS and

00:24:33

something that is a Hulk it is called of Hulk,

00:24:35

okay guys, so I'll do the following in

00:24:37

port of riecti And then between Keys here

00:24:42

I'm going to give a name for what I want to

00:24:43

import and in this case it's the iOS state so I

00:24:46

can use the iOS state how it works I've

00:24:48

already taught this I'm also going to create one name

00:24:52

a constant the first one in

00:24:56

brackets is the first parameter is the

00:24:59

name of our variable the thing that will

00:25:02

store the value is the thing that actually

00:25:05

stores the value so I'm going to name it

00:25:07

Siri to be very objective it's very

00:25:10

important that variables whether it has a

00:25:12

very clear name so when the person looks at it

00:25:15

they probably have to know

00:25:17

what that

00:25:19

variable is storing and in this case it is very

00:25:21

simple it is storing a city and

00:25:24

this second parameter notice that it is

00:25:26

a different thing later that I use

00:25:28

iOS state here is a function responsible

00:25:32

for storing the value in this variable

00:25:36

here so always remember that when

00:25:39

I use iOS state first parameter is

00:25:42

the value itself in fact second parameter

00:25:46

a function responsible for storing the

00:25:49

value only this function can save the

00:25:53

value within this variable here I

00:25:56

want to give the name so again I want

00:25:58

the name to be very explicit, that's what the

00:26:01

function that certain city is very clear and then

00:26:04

I come here and do the state Oops and the

00:26:07

state which is the affection that I imported it

00:26:09

there in the clothes that I imported there at the

00:26:11

front, notice that after I open and

00:26:15

close relatives here the iett he even

00:26:17

discovered for me that the first one is a

00:26:18

function if I leave the mouse here he

00:26:21

says bro that's what he did it is

00:26:25

signed that it was declared but it

00:26:27

was never read that is why there is this one at the back and

00:26:29

Jardim Amarelo gave the order here and the

00:26:31

second one he tells me that it is a

00:26:34

function that is why he is saying that it is

00:26:35

the iett awaken this function there it is

00:26:38

like it comes and wakes you up and in this guy

00:26:40

he doesn't know what it is because I

00:26:43

don't define it, it's undefined and then within

00:26:46

the relatives of the state rivers I put

00:26:50

What value do I want to be the

00:26:52

initial value of this function like city is

00:26:55

always a text and what value do I

00:26:58

want to be the initial value an

00:27:00

empty text and then if I go back and leave the mouse

00:27:03

up here notice that it is not as

00:27:06

defined but as I used the

00:27:09

"and" and it means that I I'm referring

00:27:13

a text to a string, a Spring type,

00:27:16

so it knows that the city is now a

00:27:19

string, Hi, and since I already have something

00:27:23

to be able to control a state

00:27:25

locally in this application, what am

00:27:27

I going to do, I want my implant

00:27:29

and when looking at HTML, it has a

00:27:31

velo property and I want it to have

00:27:33

the value of city, so that's it,

00:27:37

now there's a way of this

00:27:40

manipulation going on there and remember that I talked to

00:27:42

you, I removed data-bind So there's already a

00:27:44

way of iett can already control this

00:27:47

component, it can already control what it is, it is

00:27:50

already passing its value to the component,

00:27:53

so if I see it here, type,

00:27:55

notice that it will not work because

00:27:57

because I said to my HTML here,

00:28:00

look, who controls it, this is important

00:28:03

now. Rick because the value is a

00:28:06

state that I created within riet so much

00:28:09

so that what you hear is that typing mine

00:28:11

gives a city next to mine here which

00:28:13

is Belo Horizonte, the capital of Minas and

00:28:15

save notice that he will come here to

00:28:18

inside if I wanted if it were the city

00:28:21

Initial I could leave it here

00:28:23

inside the quotation marks And then iett what does it

00:28:26

do it takes this value Put it

00:28:29

here inside and then here inside this ti

00:28:31

now has the text Belo Horizonte and then

00:28:33

how I came here at INPI I told you that

00:28:35

the value of this draw is the city

00:28:39

I wanted above and the city is

00:28:41

Belo Horizonte because it already pays off

00:28:42

I'm here for me Miguel Ok but

00:28:45

that's not how it works, right I want being able

00:28:49

to type like any other important thing,

00:28:51

so we need to use 7-cite

00:28:53

because remember I told you

00:28:56

that this guy here, the only person who

00:28:59

has the power to manipulate and change

00:29:02

its value is this second parameter and it's

00:29:05

even bringing jadinho in yellow here is

00:29:07

the following he told me yesterday and

00:29:09

it was declared

00:29:10

but it was never read I'm not using

00:29:13

this guy so to be able to use him

00:29:16

what I'm going to do I'm going to create a

00:29:18

function and this function is called every

00:29:23

time the user type something

00:29:24

not important And then again I'm going to give

00:29:28

a very very didactic man here to

00:29:32

be clear, right, I'm going to call this function

00:29:35

here income Out and

00:29:37

the same opens and closes relatives was your

00:29:39

biggest fan I've already taught it to you if you

00:29:42

're not understanding this type of syntax,

00:29:44

here watch our

00:29:46

JavaScript classes, which is really cool And then, well,

00:29:49

we gave a function that still doesn't do

00:29:51

anything, ok, so what, I'm going to make

00:29:54

ours an HTML kit, I'm going to break it down,

00:29:56

I'm going to give an integer here

00:29:58

it has several types of events that I

00:30:02

can do what I can call

00:30:04

a function when this event is

00:30:06

triggered and Generally the events in

00:30:08

HTML are called something if

00:30:12

I type one here the Cold verse in this

00:30:14

generates a It's a lot, but it's really a lot, look at how

00:30:16

many events we have here and

00:30:19

what's what in what event?

00:30:21

Let's think a little here now,

00:30:23

what's the wind? I want it to fire

00:30:26

when the user is typing

00:30:28

here something is changing, I'm

00:30:31

changing the value of the draw, right, you

00:30:34

agree with me if you type my

00:30:35

name Miguel, I'm changing the value of this

00:30:37

payment, now I can't do it because Iett

00:30:39

is controlling it, right? And what's the name of the

00:30:43

event? it is triggered when

00:30:47

any change in the value is the name is very

00:30:49

simple it is called contingent And then I do

00:30:52

n't understand what I want to do I

00:30:54

want to call this function

00:30:55

so every time something changes in the

00:31:01

draw it will call this function so

00:31:03

every time When the user types

00:31:05

something, it calls this function, how do I

00:31:08

know it's working? I'm going to put a

00:31:09

log console and I'm going to type something

00:31:11

that changed.

00:31:21

and then what am I going to do I'm going to type

00:31:24

here oh ah I'm typing every time

00:31:27

I type something to clear it

00:31:29

again it's calling the function Ok

00:31:32

perfect we already have a function that is

00:31:35

called every time the user

00:31:39

types something something but Miguel, I want to

00:31:41

know what the user typed, what

00:31:44

happens in iett here

00:31:47

implicitly, that is, it's behind

00:31:51

the scenes, let's say like this

00:31:53

and it passes it to me, it's a value for

00:31:58

this function here, how do I know

00:32:00

This is because I read the documentation a lot,

00:32:03

guys, that's why it's important as a

00:32:05

developer, he has a job of

00:32:07

constant reading, so you're

00:32:10

always reading the documentation,

00:32:12

so here, implicitly, I

00:32:14

receive an event, I can give it any

00:32:16

name here if I If you want to call it Maria,

00:32:18

I can call it because if a variable

00:32:20

but I call it go or and 20 to be very

00:32:24

clear, okay guys, so always keep

00:32:26

that in mind if I come here and Plant

00:32:29

the IAC I know I'm receiving it

00:32:32

here I go save I'm going to clear it here

00:32:34

again I'm going to press it again this is the

00:32:36

event here synthetic and base and twenty and

00:32:40

then there's a lot of stuff here and I

00:32:43

know exactly what I want and what

00:32:45

I'm going to need I'm going to need a

00:32:47

Dude, it's called target, what is

00:32:50

this target Hi guys, the general event

00:32:53

is a change event, that's why it's yesterday,

00:32:56

it's an event of something and the

00:32:59

change team, so the and is this event in

00:33:03

fact and the target is the What is it?

00:33:06

Who was the target of this event?

00:33:08

Who was the target of this event? Was it an

00:33:10

implant and what do I want?

00:33:12

The value is important. So what do I

00:33:15

do within the event? I access the target, right?

00:33:17

The target and get it? the value

00:33:20

And then he cleaned it again and I'm going to write it

00:33:23

here,

00:33:24

notice that He painted Belo Horizonte

00:33:27

because that's what was already in here and

00:33:30

tried my air here at the end I

00:33:32

don't know if they can see it, let me

00:33:34

zoom in He painted it mine here at the

00:33:36

very end I'm going to click here again

00:33:38

press well now he asked Belo

00:33:41

Horizonte

00:33:42

and my baby here at the very end And

00:33:46

now I have the knife and the cheese in my hand

00:33:48

what do I want to do I want to change

00:33:51

this value and for me changing this value

00:33:53

is the only person who can change the

00:33:56

site is the City site. So I'm going to give

00:33:58

17 City o e point target. Old, which is the

00:34:02

value that the user entered, its

00:34:05

update, which may or may not be

00:34:07

authorized, but not automatically, and

00:34:10

now I'm going to type it, I'm going to delete it,

00:34:12

notice that it's working like a

00:34:15

normal draw, but the person controlling

00:34:18

this draw is iett, so if I type

00:34:21

here Maria it will happen Maria and

00:34:24

now yes I actually have uncle Hey

00:34:28

databind because user and assigns things to him

00:34:31

here through the keyboard that changes in

00:34:33

riet and iett changes based on the

00:34:37

moment of the

00:34:39

user anything I want to

00:34:41

change for example, here instead of being

00:34:43

this title here now, Miguel's weather forecast,

00:34:45

I want me to be City and

00:34:48

now it's actually afternoon play, now

00:34:51

look at you, user, he set a

00:34:53

value in the input via the keyboard,

00:34:57

so when you have a value in iett and it has already

00:35:01

changed a view for the user

00:35:03

so that's why it's twice for the

00:35:05

user to change something in ri and it's

00:35:07

that it changes something for the user

00:35:09

so here comes uncle ae databyte okay

00:35:11

guys I'm just going to press a control here

00:35:13

to undo Beauty we already have the

00:35:16

city we want perfect now it's

00:35:20

the easiest I want to

00:35:22

make a request I want to tell you to make a

00:35:25

request So I'm going to create another

00:35:27

another function, be sure to rent the URT

00:35:34

Hi and then laughing or freaking out later to

00:35:37

read the documentation, what do I want to

00:35:39

do, okay guys, I want to actually make

00:35:44

the request And then inside the documentation

00:35:47

I will leave the link to the

00:35:49

documentation so you can

00:35:51

study there and

00:35:53

I also know what I need and then I could

00:35:58

use the axios has a third party client

00:36:00

here that I would install a library for

00:36:02

But I can also use shipping,

00:36:05

shipping is native to JavaScript,

00:36:07

so shipping allows me to make a

00:36:10

request for a pe,

00:36:12

well, so what will this request

00:36:15

have?

00:36:16

for an in the

00:36:19

Point dap, in addition to a bridge, it is the address, okay,

00:36:22

friend, but this is a website, there is no

00:36:25

difference from a Point Point website, here,

00:36:27

an and Point

00:36:28

normally works with texts and

00:36:31

is not something very user-friendly

00:36:33

and a website is that that you browse right

00:36:35

that you enter that you are browsing

00:36:37

this here is a website that's in a

00:36:39

year from point of one pe it has the

00:36:42

PM version and everything

00:36:44

and then Miguel But how do you know it's

00:36:47

this

00:36:49

http// peil Éder ipiaê everything is written

00:36:52

here guys if you come here I'll

00:36:54

pull a little more here so you can

00:36:55

see the iexplorer team here

00:37:00

and if you come here look Docs has all the

00:37:06

documentation I read it from here so I

00:37:08

know how to use it Okay but this is the life

00:37:11

of a developer if you were at

00:37:13

work and your boss asked

00:37:15

you to make a change to Happy,

00:37:17

I'm going to implement it

00:37:20

once, you'd have to read where you are,

00:37:22

but most of it to be able to understand and how to

00:37:25

use it. I'm not going to go into all the

00:37:27

aspects here because I've already read the idea,

00:37:30

just show you how to consume an

00:37:32

ati. But if you want to ask any

00:37:35

questions, it's very simple, just go to

00:37:39

the documentation and read it and then

00:37:42

what happens npip the power to use

00:37:44

it and I need to use a guy

00:37:48

called current because what we do is

00:37:50

come from the current time, I want to know

00:37:52

exactly what time is in my

00:37:56

city where the user typed it now and

00:37:58

the current day is the format that I'm going to

00:38:00

use to make the return, it's

00:38:03

Dieyson, it's a more modern format,

00:38:04

but in the past they used a lot of XM-L,

00:38:07

they're still used, but I think less

00:38:09

than Dieyson. So, guys, what

00:38:12

happens, do you remember what I said? for

00:38:15

you, that's when you wanted an

00:38:17

account you wanted you get ipiaê

00:38:20

Key that you can make a million

00:38:22

requests per month so this one piá and

00:38:26

that is a way for the site to use and

00:38:29

recognize Who's Who so each account

00:38:32

you create there goes have an ipiaê

00:38:35

that this is the only one you can

00:38:38

use mine here if you want

00:38:40

to copy but I recommend that you

00:38:42

want your account there Take a

00:38:44

team the team to see and for you

00:38:47

to understand he playing with this same thing

00:38:50

and so on again

00:38:52

wipe here is like the username and

00:38:55

password of your Side So this is

00:38:57

private if you create yours then don't

00:39:00

share it with anyone so no I don't

00:39:02

mind sharing mine here

00:39:04

firstly it's a free account and

00:39:06

secondly it's hardly the We're going to hit

00:39:08

1 million requests and third

00:39:12

in this case here It doesn't involve risk, no, I

00:39:14

can't, you think it's going to exceed 1

00:39:16

million requests and you're going to be charged

00:39:18

Miguel, no, no, I don't know, when

00:39:20

you want the bill, you'll see

00:39:22

that it doesn't ask for any credit card details

00:39:24

or anything what will happen is

00:39:26

that I explained to the world it will be

00:39:28

blocked until next month and then I

00:39:31

need to pass a non-RL parameter

00:39:33

whenever I need to pass a

00:39:34

parameter and I use the question mark so

00:39:37

whenever you access the website and there's a

00:39:39

question mark something that doesn't

00:39:41

stop and this one has the parameter and it's

00:39:44

called the key here, well

00:39:47

then question mark parameter the name of the

00:39:51

parameter here and here the value so I'm going to

00:39:53

paste this value here and then as this is

00:39:58

a parameter OK, when I use

00:40:00

question mark I'm saying that I'm going to

00:40:02

start passing parameters from the

00:40:05

question mark here everything is a parameter But

00:40:07

my friend, if I want to pass another question

00:40:09

mark, I need to put another

00:40:11

question mark, not if you want to pass

00:40:13

another question mark, you use e Commercial

00:40:16

At least I know the ampersand and

00:40:19

I don't know what it's called as you

00:40:22

know it but you use shift the

00:40:24

letter

00:40:26

A number 7 on the keyboard which is hi commercial

00:40:30

at least mine here is the commercial e And

00:40:32

then I need to pass more two

00:40:34

parameters one which is what you're laughing at, right

00:40:38

what I'm looking for what here will be

00:40:40

the name of the city so you name of the

00:40:43

city here and another parameter which is

00:40:46

one that we call leng which

00:40:48

is the language which is equal to pt which is the same as in

00:40:51

Portuguese, I want it in Portuguese, so

00:40:53

let's go again, guys,

00:40:56

what is the first parameter? And then you will copy it

00:40:58

from your account, so the name of the

00:41:00

parameter is the same and the value of the

00:41:03

second parameter is what is the letter that is just the

00:41:07

same and the name of the city which is what

00:41:09

the user will type here in this

00:41:11

important third parameter length lng

00:41:15

equals PT because we are in Portuguese

00:41:17

beauty Miguel just working no because

00:41:21

here is a string you can see that he

00:41:23

let me leave it to Rosinha for me, I

00:41:26

want this name of the city here

00:41:28

to be dynamic Well, I want when I

00:41:30

want to get what's here, the name of the

00:41:33

city, we already try it, decide

00:41:36

what I want to do, then put the

00:41:38

place Here, how do I do

00:41:40

JavaScript? It allows me to do

00:41:42

stream interpolation, so in order for me to

00:41:45

do the interpolation, I'm going to

00:41:47

delete this single quotation mark that I put

00:41:49

around here and I deleted it at the beginning, I deleted it

00:41:51

in front and I'm going to use the backquote

00:41:54

or I don't know As you know, the

00:41:57

inverted quotation mark on my keyboard

00:42:00

is in the left corner of the number one, but it

00:42:03

's only for you to use the backquote and that's what

00:42:06

I'm going to do.

00:42:07

It's at the beginning of the string and at the end, my

00:42:11

friend, but with the same thing. No, I'm not

00:42:14

because with crazy what am I going to

00:42:16

do in the same way here is what? It's true that

00:42:21

the name of the parameter is equal to the value here

00:42:24

where I typed the name of the city I'm going to

00:42:27

delete it I'm going to use the

00:42:29

dollar symbol key open key that closes the key

00:42:33

notice that you saw that it was using so

00:42:36

when it's blue I can use

00:42:38

a variable that variable that I want

00:42:39

City

00:42:41

well so I'm going to recap it once again

00:42:43

guys and I'm going to leave the

00:42:46

address there for you but if you

00:42:48

want to type it it's

00:42:51

http ://ap. Weather and Piauí/see a

00:42:55

current sound bar

00:42:57

there Question first parameter name

00:43:00

that first stopping is called here the same

00:43:03

and then that's what you provided in your account

00:43:05

there

00:43:06

& for us to start the second stopping

00:43:09

What is the name of the second parameter

00:43:10

letter that is the same as there we put the

00:43:13

dollar symbol open key City which is the

00:43:16

name of our state that we put up

00:43:18

here

00:43:20

} third and last parameter length

00:43:23

the language and PT which is Portuguese and then

00:43:27

what happens

00:43:29

shipping it allows us to make a

00:43:31

request but what happens when

00:43:35

requests in javscript come out

00:43:37

we call them promises because

00:43:40

promises Miguel and I don't know what the

00:43:42

request is will come back to me I simply

00:43:44

know that it will return something to me thing

00:43:46

has the promise that it will return

00:43:48

something to me but I don't know if it will

00:43:49

work I don't know if the user has

00:43:51

internet I don't know for example if this

00:43:54

piá and here has already made more than 1 million

00:43:56

requests So I don't I know what's

00:43:58

going to happen,

00:43:59

well, so I can deal with a

00:44:01

promise that I'm going to make, I'm here at the

00:44:03

end, I'm going to press enter, I'm going to give a point, I'm

00:44:05

continuing the function and then he

00:44:07

suggests it to me, I have three things catch

00:44:09

finally you then So what do you want? use

00:44:12

dem because I know that this returns

00:44:15

a promise if I leave the mouse here

00:44:17

on top

00:44:18

of the freight it will say it returns a

00:44:21

promise that is like Luis ponse here oh

00:44:24

and then what happens in this right here

00:44:27

I will pass a function into

00:44:30

it, if you don't understand it,

00:44:33

new taxi, watch our

00:44:35

Java script classes and within this, well, I

00:44:39

can give it any name here, if you

00:44:40

want to give it Maria, I can, it's the same

00:44:42

thing as hurting, okay, I'm just going to give it one

00:44:44

name here the response because he is

00:44:46

telling me that he returns a

00:44:49

Luis fonsi is for sale So I can give

00:44:53

any name but the response is what makes the

00:44:55

most sense to me that what I'm going to

00:44:56

do I'm going to give a console. Login to this

00:44:58

response

00:44:59

we had what's happening, it's

00:45:03

Miguel but it's a bit like Clarinha here

00:45:06

because I'm not using it when

00:45:08

I want to use this function

00:45:10

when I want to call this function here

00:45:13

in our right-click

00:45:15

and I'm going to give a format of the comment

00:45:16

here just so we can see it better, it was just in

00:45:19

our paragraph where I already gave a tip,

00:45:21

click then on the search field

00:45:24

so I want to call that function when

00:45:26

the user clicks on search so it's

00:45:27

very simple, I'm just going to come here on the

00:45:29

button the button it also has an event

00:45:32

but now it's not Change it's a click And

00:45:36

then when there's a click here I want to

00:45:38

call income the surf I'm going to format it here

00:45:40

again and then notice I'm going to clear

00:45:45

our console and I'm going to type here Belo

00:45:47

Horizonte and I'm going to click on search it

00:45:50

took a little bit of a few seconds and

00:45:53

then it got back to me here in the response your

00:45:55

clicking here on open it got me back a

00:45:57

lot of things for example look it gets

00:45:59

back to me when it worked ok it's the same as

00:46:01

Tron it gets back to me the status this status

00:46:04

we will need it and here

00:46:07

it returns to me a goat the goat I

00:46:09

can't see why I need to do a

00:46:11

Zinho treatment on it even this one let's go

00:46:14

here it is of the Red bow string type and I

00:46:17

can't understand it if I click here

00:46:19

look it doesn't show anything to me

00:46:21

so I don't know it's working but I

00:46:24

just want to do this treatment on the goat

00:46:26

when I know that my request was

00:46:28

successful and how do I know that the request

00:46:30

was successful when it returns status

00:46:32

200 to me So what am I going to do

00:46:35

and I'm going to do a check if

00:46:38

response then I'm inside a sponsor

00:46:41

what I have has a status then

00:46:44

response. Status is equal to 200 what do

00:46:48

I want to do I want to give a

00:46:51

ritani

00:46:53

to irritate Nino

00:46:57

response. Jason, I want to transform

00:46:59

this guy here one day, if

00:47:02

our request has been successful And then it's

00:47:06

cool Guys, this little project here,

00:47:08

firstly, it serves as a portfolio

00:47:10

for you, secondly, we see everything

00:47:12

we learned from

00:47:15

HTML JavaScript rieti CSS debootstrap

00:47:20

just one project So from the moment

00:47:23

I gave the return to where I'm

00:47:24

returning, I can use

00:47:27

another point here again, well, what am I

00:47:30

doing, look, make a request, then

00:47:34

after the request finishes, I

00:47:35

don't I know how long it will take, that's why

00:47:37

I use it within dem, I

00:47:39

always use it when I don't know how

00:47:41

long it will take to finish, which

00:47:44

we call asynchronous requests,

00:47:47

meaning they can take as long as

00:47:49

they want

00:47:50

After the request finishes If I

00:47:53

look at the description, it worked, if it

00:47:55

worked, transform it into days,

00:47:58

after transforming it into days, I'm going to

00:48:00

do the same thing, I'm going to pass a

00:48:02

function and inside here I already have the data, it's

00:48:06

a piece of data that I want, I already have given

00:48:08

here I will give a console. Log in this

00:48:10

data here on this date I'm going to put it here

00:48:13

just to make it easier on this date and

00:48:16

I'm going to clear it here again if we came

00:48:18

here I'm just going to click on search

00:48:20

and it was very quick but notice that he already

00:48:24

brought a different guy here for

00:48:25

me ok I have location, which is where you

00:48:29

looked for it, I looked for it, right, the city there

00:48:31

shows the country, the latitude is the local time,

00:48:36

right, and you can see that it matches exactly. Of

00:48:39

course, it's not Real Time Snow, just

00:48:41

because it's a free one, but for

00:48:44

example, last time this skin made

00:48:46

this query it was 23:12 so it has three

00:48:48

minutes it's latitude and longitude the name the

00:48:52

region time Zone So if there is a lot of

00:48:54

information and this current here was what

00:48:57

we requested here you can see alcanti

00:48:59

Alisson Point and Candi There's an

00:49:01

accurate weather forecast, for example, the

00:49:04

partially cloudy weather condition,

00:49:06

that's why we mentioned the language

00:49:10

here, it's the thermal sensation, right, wires like And

00:49:14

then there's Fahrenheit in Celsius,

00:49:17

thermal action of 25 degrees, I at least think

00:49:19

it's very hot at humidity 69 percent

00:49:23

if it's daytime, that is, it's already night here,

00:49:25

so come back, supper So there's a lot of

00:49:28

information here and then what do I want to

00:49:31

do, well, I've already tested it, if it worked, if it

00:49:34

worked, I want to put it

00:49:36

inside who answered another state,

00:49:40

you got it right, so what am I going to do, I'm going to

00:49:42

create another state, this state here,

00:49:45

I'm going to put it, I'm going to give it a name here,

00:49:48

Wilder

00:49:50

podcast, which is the weather forecast and the

00:49:53

other one is set weather forecast in and

00:49:58

notice guys, I was going to so the name

00:50:00

will always be seven this affection here I

00:50:03

particularly in this pattern and that

00:50:05

it will be Miguel an empty object

00:50:07

because this guy is an object right and

00:50:10

I want him to be a phase object And

00:50:13

then it's very simple guys here

00:50:14

inside I'm going to give a set weather

00:50:16

forecast I put the date that's all I already

00:50:20

have the weather forecast in my hand

00:50:22

here now that I can do whatever I want

00:50:24

water and then just for us to end this

00:50:27

class I'm going to display

00:50:30

two little things here some information

00:50:33

What am I going to do, I'm

00:50:35

going to create a div

00:50:39

And then inside this div I'm going to create

00:50:42

another one, say,

00:50:46

and inside this debt that I wanted,

00:50:49

I'm going to do the following, I want it to have

00:50:50

a margin at the top, right, give us some

00:50:52

spacing.

00:50:54

a Zinho spacing here

00:50:57

and then what I'm going to do I'm going to create

00:50:59

another div here you

00:51:02

can display a little face because I've

00:51:05

already read it in their also okay guys I

00:51:08

want to display the weather forecast icon

00:51:10

I know it returns the icon

00:51:12

So I'm going to display this icon here and what's

00:51:15

going to be silicone here

00:51:17

I need guys is

00:51:20

and I need to display the Winder

00:51:26

Winder. Weather forecast. I already

00:51:29

know this because I remember it off the top of my head

00:51:32

. Condition. Oh,

00:51:35

let me see what he's complaining

00:51:37

to me Oh, okay, he can't read it

00:51:42

because what's happening is personal, he

00:51:45

's trying so I save him, he's

00:51:47

trying to read this guy, the current

00:51:49

condition and wow, just he It's an

00:51:52

empty object So because I haven't made the

00:51:55

request yet, this guy is

00:51:56

empty and so that doesn't happen, what

00:51:59

I want to do I'm going to make a

00:52:01

condition

00:52:02

opens and closes Keys here because I

00:52:05

want to use JavaScript in here I

00:52:07

don't know If I've already done this with you in

00:52:09

other classes, but I don't think so when

00:52:11

inside ritani here, inside the

00:52:14

complaint, if I use open and close

00:52:16

Keys, I'm telling iett that I

00:52:20

want to use java script here,

00:52:22

so that's why I I use here open

00:52:24

and close Chaves because you have a

00:52:25

non-JavaScript variable in here the

00:52:28

same thing in here the same thing

00:52:29

so whenever I open and close

00:52:31

Chaves I'm saying that I want to use

00:52:32

a variable and here I can make a

00:52:35

wi-fi I can make a normal non-if condition,

00:52:37

I can't do it

00:52:39

like that, but I can do a ternary if,

00:52:41

which is an ifternary, it's a

00:52:43

one-line wi-fi, which I want to do if the

00:52:46

ID is set, that is, if

00:52:49

it exists I'm going to display some things

00:52:53

in here if it doesn't exist I don't

00:52:56

display anything and what I want to display

00:52:58

what I had just done I just copied and

00:53:01

pasted it in here well

00:53:03

so again explaining

00:53:06

if the Uber podcast has anything in

00:53:09

here because if it is an

00:53:11

empty object this condition will be false if it

00:53:13

is like this, if it is this here that I

00:53:17

mentioned here, you can see this

00:53:19

empty object this will return false And then

00:53:23

If this is false it will enter here

00:53:25

then it it won't do anything if there is

00:53:28

something inside that object that

00:53:30

it will do and show me

00:53:32

the image so if I save it

00:53:34

I'll update it here

00:53:37

let me see what it's complaining about

00:53:39

now

00:53:48

Andthen

00:53:49

ah ah I understand, okay guys my error

00:53:53

here is that I can't place it

00:53:55

like this I'm going to start it as on the wall I

00:53:57

don't want it to be an object because

00:54:00

as I started it as an object it

00:54:02

also falls into this condition this condition

00:54:04

becomes true the only thing

00:54:06

you're going to do you are here as null

00:54:08

But I still need this condition, okay,

00:54:12

so we keep the condition and in the and

00:54:14

the states here we are right as a number,

00:54:16

it's cool that we can see these

00:54:18

errors happening so you can see that it's

00:54:21

normal, okay, and that's what what I'm going to do, I'm going to

00:54:23

click on search And then he went there in the p

00:54:26

i va your in the sector for me the

00:54:31

sector for me a leader for Cash and

00:54:34

within that date I have the icon

00:54:37

Zinho, see and then I was able to read

00:54:39

this icon But what I want to

00:54:41

do besides reading this icon here

00:54:44

I also want to display a little image,

00:54:49

right, so I can stay there, so right below

00:54:52

this debt here I'm going to create another

00:54:55

div

00:54:57

and right below the debt image

00:55:00

I'm going to separate it here to make it

00:55:02

easier for you to see, I'm going to create another

00:55:04

div and inside this div I'm going to put an

00:55:07

H3 and I'm going to put today the day

00:55:11

is a colon and then again open and

00:55:15

close Keys because I want to use

00:55:17

JavaScript I want to bring the result

00:55:19

of AP so I will put the

00:55:22

forecast id. Current again. Condition

00:55:26

that why is this Miguel because

00:55:30

people have already done this a lot here so I

00:55:32

remember it off the top of my head, but if you

00:55:35

want to test it, just come here to the

00:55:37

console. Log in the dem in the inside data I

00:55:42

will give a console. Away here and I'm going to

00:55:44

research again that I'm doing

00:55:47

the intercom Cash is the name of the state in

00:55:49

our application so that's the name

00:55:53

we created Then I enter the current

00:55:57

and from the current I'm between Oops sorry

00:56:00

inside the car I'm entering inside

00:56:01

condition account and inside condition

00:56:05

I'm getting the text you see here

00:56:07

clear sky and here it's the same thing but

00:56:10

instead of getting the text I'm getting the celery

00:56:11

so that's what it shows

00:56:13

me here And then below just present

00:56:16

close guys I'm going to put a

00:56:19

paragraph

00:56:21

oops I'm going to put a paragraph and this

00:56:25

paragraph here I'm going to put the

00:56:27

temperature our temperature is

00:56:31

open and close relatives same thing Wind

00:56:34

forecast. Chain. Underline time I know

00:56:38

that the temperature in Celsius the

00:56:40

temperature is 22° And so I think it's

00:56:44

very hot

00:56:45

guys so let's just give it a stylized look

00:56:48

before we finish this

00:56:50

video of ours I'm going to do the following, it's

00:56:54

in this affection here that I put the

00:56:56

margin I'm going to give it to the Flex

00:56:59

because we will have everything on the same

00:57:01

line

00:57:02

and then I will give an online A items Center

00:57:08

because then the line for me is in the middle,

00:57:11

here it looks cooler, so I put

00:57:14

a Flex class that puts

00:57:16

display-flex for me and I put

00:57:18

another class that calls there in center to

00:57:22

be able to align the middle here and in this

00:57:24

affection here we are going to give

00:57:26

that same name that we gave that is

00:57:29

gone the lid guys there is our System

00:57:32

me it is created I will leave a

00:57:34

little task for you, I'll

00:57:37

add more information and I see that it's

00:57:40

responsive. It's cool to add more

00:57:43

information. I'll put it here in

00:57:45

Fortaleza. Let's see what it's like there in

00:57:47

Fortaleza. Fortaleza, and I'll click on

00:57:50

search.

00:57:51

Fortaleza. Same thing, it's just a little

00:57:53

warmer than here. so I'll leave it

00:57:55

to you to go home, hey

00:57:58

guys, so you can try to add more

00:58:01

information that we already know how to do.

00:58:04

Just access an object here. There's

00:58:06

a lot of information. There's thermal sensation. There are

00:58:10

other temperatures. There's

00:58:12

the city of the cool person. the

00:58:16

person's city to see if they

00:58:18

researched correctly, so here's an

00:58:20

exercise for you to put more

00:58:22

data here, style it the way

00:58:24

you want using Bootstrap or

00:58:26

not and put unloading here for me

00:58:29

because when I click here, just

00:58:30

type it here, I

00:58:32

know Here,

00:58:35

New York, I don't know if you're researching or

00:58:39

not, this could cause people to get

00:58:41

involved here, so they improve

00:58:44

usability for the user and then when

00:58:47

you do it, tag me on Instagram

00:58:49

and I'll repost you, the person has a

00:58:51

lot people who are

00:58:54

Tech Run have, right, who are looking for

00:58:56

professionals that hi or tag me

00:58:59

on Linkedin and I'll repost you

00:59:02

Guys, I hope you liked it

00:59:04

and thanks

Description:

Me sigam nas redes sociais: Instagram: @mj_maia ou se preferir: https://www.facebook.com/unsupportedbrowser Twitter: @mja_maia Discord: https://discord.com/invite/FA3musFR

Preparing download options

Popular

HD video

Only sound

All

* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."

** — Link intended for online playback in specialized players

Questions about downloading video

How can I download "Crie seu próprio sistema de previsão do tempo!! (ReactJS consumindo api)" video?

http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

Which format of "Crie seu próprio sistema de previsão do tempo!! (ReactJS consumindo api)" video should I choose?

The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

Why does my computer freeze when loading a "Crie seu próprio sistema de previsão do tempo!! (ReactJS consumindo api)" video?

The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

How can I download "Crie seu próprio sistema de previsão do tempo!! (ReactJS consumindo api)" video to my phone?

You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

How can I download an audio track (music) to MP3 "Crie seu próprio sistema de previsão do tempo!! (ReactJS consumindo api)"?

The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

How can I save a frame from a video "Crie seu próprio sistema de previsão do tempo!! (ReactJS consumindo api)"?

This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

What's the price of all this stuff?

It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.