Download "Изучение React Native / Урок #10 – Форма для добавление записи"

Please wait. We're preparing links for easy ad-free video watching and downloading.

Previous video: Курс React Native. Пишем Мобильное Приложение на JavaScript Next video: 73 - React JS - http put, local state

0:00

Начало

0:20

Библиотека «Formik»

1:45

Создание компонента с формой

3:10

Создание формы с полями

12:30

Подключение формы

14:34

Добавление статьей

20:14

Добавление стилей

22:10

Заключительная часть

73 - React JS - http put, local state

73 - React JS - http put, local state

Channel: IT-KAMASUTRA

Курс React Native. Пишем Мобильное Приложение на JavaScript

Курс React Native. Пишем Мобильное Приложение на JavaScript

Channel: Владилен Минин

🔴 Let’s build Disney+ 2.0 with NEXT.JS 14! (Microsoft Azure, Caching, OpenAI, Shadcn, Tailwind, TS)

🔴 Let’s build Disney+ 2.0 with NEXT.JS 14! (Microsoft Azure, Caching, OpenAI, Shadcn, Tailwind, TS)

Channel: Sonny Sangha

🔴 Let’s build META Messenger 2.0 with Next.js 13 (Upstash, TypeScript, Redis, Tailwind, NextAuth)

🔴 Let’s build META Messenger 2.0 with Next.js 13 (Upstash, TypeScript, Redis, Tailwind, NextAuth)

Channel: Sonny Sangha

🤯 ИНТЕРНЕТ МАГАЗИН ЗА 12 ЧАСОВ! + оплата. СТРИМ-ЧЕЛЛЕНДЖ [React / TypeScript / Redux / Next.js]

🤯 ИНТЕРНЕТ МАГАЗИН ЗА 12 ЧАСОВ! + оплата. СТРИМ-ЧЕЛЛЕНДЖ [React / TypeScript / Redux / Next.js]

Channel: RED Group

87 - shouldComponentUpdate, PureComponent, memo - React JS

87 - shouldComponentUpdate, PureComponent, memo - React JS

Channel: IT-KAMASUTRA

Изучение React Native / Урок #2 – Создание проекта. Запуск на Андроид и iOS

Изучение React Native / Урок #2 – Создание проекта. Запуск на Андроид и iOS

Channel: Гоша Дударь

💥 Полный курс JavaScript 2022 за 5 часов [ JavaScript / Ecmascript / React / TypeScript ]

💥 Полный курс JavaScript 2022 за 5 часов [ JavaScript / Ecmascript / React / TypeScript ]

Channel: RED Group

React Native Crash Course | Build a Complete App

React Native Crash Course | Build a Complete App

Channel: Academind

React JS Быстрый Курс

React JS Быстрый Курс

Channel: Владилен Минин

formik react

formik tutorial

formik

react

react native

react native уроки

react native приложение

react native app

reactjs

native

reactjs native

js

javascript

android

ios

курс react

курс react native

уроки react

уроки reactjs

уроки react native

уроки javascript

урок react native

мобильная разработка

00:00:01

will add a form for adding various

00:00:03

new records inside our application and

00:00:06

before starting I would like to recommend

00:00:07

you the site

00:00:08

and these Prager dot com on this site you

00:00:10

will find the homework code and a lot of

00:00:12

other useful information link to

00:00:14

this lesson on the site will be in the description of

00:00:16

this video, go ahead,

00:00:17

you won’t regret it, we have already

00:00:20

worked with forms before, even when you

00:00:21

created the to-do list application, we then

00:00:24

worked with the form from and

00:00:26

components such as input text,

00:00:27

and accordingly received information

00:00:29

from users and interacted with this information in some way

00:00:31

in principle,

00:00:33

in this lesson we can do exactly the

00:00:35

same thing, we can create a regular

00:00:37

text input and receive information further

00:00:40

and process the legs, add this

00:00:42

information as a new article, we

00:00:44

can do it this way, but I

00:00:47

propose to consider at least

00:00:48

some new option

00:00:49

by adding but getting the addition of

00:00:51

records and this option will be based

00:00:54

on this additional

00:00:56

library which is called form

00:00:59

form this is perhaps one of the most

00:01:01

convenient libraries for developing

00:01:03

various forms if we work with

00:01:05

react series Jess or react negev well in

00:01:09

our case it is react therefore,

00:01:11

during this lesson I propose

00:01:12

to use exactly for mick, let's

00:01:13

get acquainted with how this system

00:01:15

works, and on its basis we will create

00:01:17

the forms we need. First, of course, we

00:01:20

need to install the form links to

00:01:22

this, everything will be in the description of this video,

00:01:24

here we just copy the itself This

00:01:26

command also additionally we

00:01:28

need to open the terminal and in

00:01:31

the terminal we simply write this

00:01:33

command itself to install this library,

00:01:35

let's select our form into a

00:01:37

separate component, so

00:01:39

we add a new file to the component folder;

00:01:42

we will find this file as forms.

00:01:44

Jess, well, here we will describe all the necessary

00:01:46

functionality,

00:01:47

I suggest even copying a little

00:01:49

code from, for example, full info Jess here,

00:01:52

of course, we delete all the styles we don’t need,

00:01:55

also for sure, let’s delete everything

00:01:57

that is returned here, we will rename

00:02:00

this function itself, it will be a form

00:02:02

called here road method parameters not

00:02:04

we will receive with you also let's

00:02:07

change the import and here we will

00:02:09

connect react to the software

00:02:11

for we would not connect components

00:02:12

such as style shield I beat,

00:02:14

besides this we need to connect

00:02:16

another button when clicked on which we

00:02:18

will add a new entry and

00:02:20

essentially we we will still need such a

00:02:22

component as input text, despite the fact

00:02:24

that we are using the form, we will still

00:02:26

need this component because it is what

00:02:27

creates for us a kind of form

00:02:29

for receiving data,

00:02:31

so we will also connect it here right away with you,

00:02:33

and in the global style,

00:02:34

for sure we too We’ll leave them here besides

00:02:37

this, we need, of course, to

00:02:39

also import the form object and

00:02:41

this component, so we say that we

00:02:43

import for mick and

00:02:45

imported from and and from such a library

00:02:47

which is called the form year in

00:02:50

general there and everything now let’s describe it

00:02:53

what will we return here,

00:02:55

perhaps we will still create a view object,

00:02:57

let it still be possible to it,

00:03:02

let’s not add any style for now, if anything then we’ll add it all,

00:03:03

and also here we describe with

00:03:06

you this very object for mick it

00:03:09

needs to be opened and also closed, and accordingly,

00:03:11

inside this object we describe those

00:03:14

fields that will be inside our form,

00:03:17

you may ask why then

00:03:18

use farming at all if we are

00:03:20

going to describe all these fields now anyway, the whole

00:03:22

point is that if we use the form

00:03:25

who we get is a very fast tool

00:03:27

for obtaining data from each form

00:03:31

that will be located, and in each

00:03:32

field that will be located inside

00:03:33

this form, and plus we also get a

00:03:36

quick process of validating this data,

00:03:39

this is quite convenient, it makes the construction process easier for us, and

00:03:42

here we need write several

00:03:44

attributes, first of all, let's

00:03:46

describe an attribute called

00:03:48

submit, essentially it is an

00:03:50

event handler and this event handler

00:03:53

will fire every time we

00:03:54

submit data from the form, in

00:03:56

other words, it will fire

00:03:58

every time we click on the

00:04:00

button inside forms, and accordingly

00:04:02

we will receive the data that the user entered,

00:04:05

here we need to specify one

00:04:06

parameter and it can be called

00:04:08

wellness, that is, these are the values that

00:04:11

we receive from the user from all the

00:04:13

fields that are inside the

00:04:15

form itself, here I propose to simply

00:04:18

display all these in full We will display the data on

00:04:20

the screen, or rather to the console, a little later,

00:04:22

we will, of course, process it, but

00:04:24

for now let’s write console.log

00:04:26

and display all this data. In addition,

00:04:28

we need one more

00:04:30

attribute here, it is called and shall not be

00:04:32

always, and in this attribute we you

00:04:35

indicate what parameters

00:04:37

what values we will receive from the

00:04:40

form itself, in my case I want to

00:04:43

receive several values, so I

00:04:45

also open curly braces here and

00:04:46

say that I will receive an object

00:04:49

consisting of several values and I

00:04:51

will receive such values from forms

00:04:53

like the title of the article,

00:04:55

the announcement of the article and the full text of the article, and

00:04:58

by the way, perhaps let’s also

00:04:59

get some kind of ural for the image, that

00:05:02

is, we will have, as it were, four fields, and

00:05:04

here we simply describe that we

00:05:07

will have four fields in the form and we are these four

00:05:09

fields for these four values we will

00:05:11

get here this attribute and is called

00:05:14

as not Shalvovich the

00:05:17

initial value for all these

00:05:19

fields so here we indicate these

00:05:22

fields plus add to them the

00:05:24

initial value here everywhere I will

00:05:27

indicate as an empty string but if you

00:05:30

want you were immediately substituted with

00:05:32

some data, then accordingly you can

00:05:34

specify some other value here and

00:05:35

this means that you will be substituted in the

00:05:37

form specifically and I do

00:05:40

n’t need such a field, so here I will

00:05:41

write empty values everywhere and so

00:05:43

we will receive a name announcement with you

00:05:46

We will also receive the

00:05:48

full text with you and we will also receive

00:05:50

information regarding you real

00:05:51

pictures that we will substitute

00:05:54

for each specific entry, so in

00:05:56

general, find the required attributes

00:05:58

that would need to be added, yes, that

00:06:00

is, these are the values that we will

00:06:01

receive from form and this is an

00:06:03

event handler that is triggered when a

00:06:05

button in the form is clicked to send data.

00:06:08

Now the next thing we need to

00:06:10

do is inside the form object itself,

00:06:13

we need to describe all those

00:06:16

text fields through which we will

00:06:18

receive data

00:06:19

and we cannot just take and immediately

00:06:22

start using the input text

00:06:24

because if because if I immediately start

00:06:27

registering xinput objects here,

00:06:28

then in this case it will not be

00:06:30

tied in any way to the

00:06:32

form object itself, so I

00:06:34

need to open a curly brace here,

00:06:37

thereby I am saying that I

00:06:39

will have a certain one registered here java script code

00:06:41

here you and I receive certain

00:06:43

data, protection parameters are indicated, we will

00:06:46

receive certain data from each

00:06:48

of the fields, you can name this parameter

00:06:51

as you like, but often they are generally

00:06:53

called props, I suggest that you

00:06:55

call it the same and then we

00:06:57

open more round brackets and in them we

00:07:00

indicate what exactly we will

00:07:03

display to the user, yes, and here we can

00:07:06

do the following with you,

00:07:07

firstly, we will create another view object,

00:07:10

but again this is just a block and we

00:07:12

can add some

00:07:13

additional styles here if we

00:07:15

will need this,

00:07:16

but in fact, we can rudely not

00:07:18

add this object additionally

00:07:20

inside this object, we write the

00:07:22

text

00:07:23

input with you, so I started writing x

00:07:27

just input, we write it here, and

00:07:29

our first field, it will serve to

00:07:32

get, for example, a title of the

00:07:35

article itself, so here I propose to do

00:07:38

the following, firstly, we indicate with you the

00:07:40

blue attribute, you are in this attribute, we simply

00:07:43

say son, we simply say what

00:07:45

specific value we will

00:07:47

set

00:07:49

inside this from inside this

00:07:52

component of the form,

00:07:53

so that we can indicate this, we turn to

00:07:55

and props to this parameter here we

00:07:58

access the plus through a dot

00:08:00

and then we access one

00:08:03

of the possible properties, for example in my

00:08:06

case I will access it in this way,

00:08:08

everything that I enter inside this

00:08:10

text field

00:08:12

will be automatically installed immediately here

00:08:15

here for this property,

00:08:17

well, then I can pull out this

00:08:18

information and do with it whatever I

00:08:21

need, in addition to this, I would

00:08:24

also like to indicate here a placeholder

00:08:26

placeholder this is just text for the tips

00:08:28

here, for example, it will be written enter

00:08:30

the name here is an additional one, perhaps

00:08:34

I would like to indicate here that we will be

00:08:37

some kind of event handler and this

00:08:39

event handler it will be called

00:08:41

it challenge text is it fires

00:08:43

every time we enter something

00:08:45

inside the text field and in this

00:08:48

event handler we will not call

00:08:50

any of our own function instead

00:08:53

I will refer to the parameter prox and

00:08:56

then I turn to the built-in

00:08:58

function called findall czech,

00:09:00

here we simply also indicate one

00:09:03

additional parameters and, as it were,

00:09:04

say what value we are using in what

00:09:07

property we substitute the values from

00:09:09

this text field,

00:09:10

that is, in fact, at the moment,

00:09:12

let’s even I’ll break this down into several

00:09:14

lines of code so that everyone

00:09:16

can see it. At the moment, I wrote

00:09:19

that as the value for this

00:09:21

text field we substitute the

00:09:23

property that we have for the

00:09:25

form itself, also every time we

00:09:28

enter something new into this is a text

00:09:30

field, we will add this value,

00:09:33

well, the name property itself, which

00:09:35

belongs to the form,

00:09:37

and plus I just added

00:09:39

a placeholder here, this is purely, well, purely a hint

00:09:44

for this text field, in fact, there’s

00:09:46

nothing more here, let’s not add anything yet,

00:09:48

maybe in the future we’ll add more style

00:09:49

let's add it here, but for now I think

00:09:51

that's enough for now, we'll create a second

00:09:54

field here, we'll work

00:09:56

with the announcement accordingly, we'll just

00:09:58

change the announcement here and the announcement here, let's

00:10:00

see the announcement, we'll also

00:10:03

additionally create a third field

00:10:05

here we'll to receive complete

00:10:07

information about the article so here we

00:10:09

are working son full with such properties

00:10:12

here we will also leave everything there was a pool

00:10:13

here it will be written

00:10:15

see the article write for example and

00:10:20

we will have one more field it will already

00:10:22

work with and such a property as them than

00:10:25

here also m&g

00:10:26

and here indicate a photo, for example, let’s say

00:10:29

live here and the photo, in

00:10:32

general, that’s all that would need to be

00:10:34

added here, just one nuance, I

00:10:36

would probably like for us to

00:10:40

enter a large amount of text, I would like to

00:10:43

make it so that we have this text field

00:10:44

it accepted several lines of text,

00:10:49

and in order for me to indicate this, I

00:10:51

need to add another attribute here

00:10:53

called multiline,

00:10:55

so I can always enter

00:10:57

several lines of text and

00:10:58

here I don’t need to specify

00:11:00

any additional value for it, I

00:11:02

just specify multiline and that’s it what you and

00:11:04

this and this value does is that this

00:11:07

text field will accept

00:11:08

several lines of text here for the

00:11:11

announcement, I’ll probably do absolutely the same

00:11:13

thing, and perhaps we still

00:11:16

only have to add a button here, for

00:11:19

this we work with components such

00:11:21

as a loaf, here we indicate with you

00:11:24

title date all the text that will be

00:11:26

on the buttons let's be

00:11:28

written here for example add here we

00:11:30

add a click handler that is we

00:11:33

add the attribute it is press and here we

00:11:35

will not create our own

00:11:38

event

00:11:39

any function but we will work

00:11:41

with this function that exists in the

00:11:45

Formica object itself, for this we

00:11:47

just need to access the

00:11:48

props parameter and here we access the handle ourselves,

00:11:51

so we call the necessary

00:11:53

function and in fact, every time I

00:11:55

click on this button we will have

00:11:58

popper Of course, this event is triggered

00:12:00

here we call the findall function and

00:12:03

when we call the findall summit function we

00:12:06

also have this event handler called, it does

00:12:09

n’t work that when you click on the

00:12:11

button we will receive completely all the

00:12:14

data from all these text fields and

00:12:17

at once we will receive all this data output to

00:12:19

the console a little later, of course we

00:12:21

will still process this data and

00:12:22

add it as if it were a new article. Now

00:12:25

we can safely save all this with you

00:12:27

and let’s also display this

00:12:29

form inside the modal window. To do this,

00:12:32

first we need, of course,

00:12:35

to connect it here at the top. this component is for

00:12:39

this we say that I connect forms to the

00:12:41

game, I import forms from such a file

00:12:45

which is located perhaps in the same

00:12:47

folder, let's make sure of this on the

00:12:49

main and wiki. Jess and Forms. Jason

00:12:52

is in the same folder, that’s why I say

00:12:53

that from the same file from the same folder,

00:12:55

I connect a file

00:12:58

called forms and, in principle,

00:13:00

everything was written incorrectly here,

00:13:03

let’s write from, then we have everything

00:13:05

written here correctly, and so on I’m doing

00:13:08

the following here from the text inscriptions,

00:13:11

let’s

00:13:12

just display this form itself,

00:13:14

I

00:13:17

don’t specify any additional attributes here, and perhaps it’s

00:13:18

easy to save everything, now we open the

00:13:20

modal window and we really

00:13:23

have this form, I agree,

00:13:26

it looks quite like- it’s primitive, but at the

00:13:29

same time it exists, it already works, all that

00:13:32

remains is to add to this whole

00:13:33

style and adding additional

00:13:35

functionality to all of this

00:13:36

at first, let’s perhaps

00:13:38

just enter some text here, for example aitl,

00:13:41

here I’ll write an announcement here, for example, I

00:13:44

’ll write the full text and here we let’s

00:13:47

just indicate a photo for example and a match for

00:13:49

example, what is it, click add and

00:13:51

after that go to the server and here

00:13:55

it should have been displayed, but

00:13:58

oh well, but it’s not displayed here,

00:13:59

let’s just go to the terminal and

00:14:01

try to look here we are here,

00:14:04

by the way, here it is also display

00:14:06

the light here in the terminal, I have

00:14:08

an object displayed here and

00:14:10

all these parameters

00:14:12

that I received from the user here are displayed here,

00:14:14

I received an announcement and here there is still a huge

00:14:16

gap like this because I

00:14:18

really accidentally

00:14:19

added it here I receive the

00:14:22

full text and a picture, as it were, and

00:14:24

the title for the article touch all this data

00:14:26

that I entered through the form, I receive it here

00:14:28

and all I have to do is

00:14:30

process it, and that’s exactly what we will

00:14:32

do a little later, now let’s

00:14:34

develop the function through which we

00:14:37

we will add new articles

00:14:38

for this, I propose to register a

00:14:40

constant here, we will call this constant as from

00:14:43

article

00:14:44

and, accordingly, it will contain a

00:14:45

certain function, so here we open

00:14:47

parentheses and write the implementation of the

00:14:50

function itself, here we will need to

00:14:52

receive one parameter,

00:14:54

this parameter is essentially the article

00:14:56

that we will just add it,

00:14:58

so let’s add this parameter to ours

00:14:59

exactly as article,

00:15:01

then here we will write with you essentially

00:15:04

exactly the same functionality that we

00:15:06

already implemented when we worked

00:15:08

with the to-do list

00:15:09

dates, remember we returned there

00:15:11

and we returned the entire array that

00:15:14

we already have, plus we added one more

00:15:17

additional element, this element is

00:15:19

the parameter that is passed

00:15:20

here, we will do exactly the same thing, that

00:15:23

is, I turn to them such a thing as

00:15:25

what function is called site

00:15:27

news, it sets us a new

00:15:29

value for this array here we

00:15:32

just have to specify one parameter,

00:15:35

it’s like, well, our current list, let’s

00:15:38

call it just st and

00:15:41

here we also write down the

00:15:43

implementation of this function, so

00:15:45

all we do is return a new one

00:15:47

the list is our new list, it will

00:15:49

consist of the following things, firstly, we

00:15:52

will have a new one, ours, this

00:15:55

article that we are adding, and

00:15:57

there will also be a second parameter, and this second

00:15:59

parameter is completely all those records

00:16:03

that are currently in ours,

00:16:04

this one. list, in fact, we

00:16:07

could test this now,

00:16:09

migraines, too, against

00:16:11

tyranny, we could just move on,

00:16:13

but we still need to add something here, the

00:16:15

thing is that at the moment

00:16:17

we are accepting and the article this article

00:16:20

will be contain the title announcement

00:16:23

full text on also the picture but it

00:16:26

will not contain the key so

00:16:28

we need this key in a manual format

00:16:30

here we always add let's

00:16:32

perhaps add it somewhere here

00:16:34

for darkness we refer to the

00:16:36

article we refer to the very property that

00:16:40

we In my case, we want to set this

00:16:42

property called ti,

00:16:43

and here, again, according to the same logic,

00:16:46

we use mass, we use random,

00:16:49

and here we can even simplify everything a little,

00:16:50

we will immediately

00:16:52

reduce it to a string format and, in general,

00:16:54

all the dates were previously written here and a certain

00:16:56

specific value and I’ve

00:16:58

cut it all off, yes, but let’s even

00:17:00

do it a little simpler this time,

00:17:03

so now we get

00:17:05

the following: when I call this

00:17:06

function, we will pass a

00:17:09

certain article here, further to this article

00:17:11

we will add a certain

00:17:13

random key and then we

00:17:16

will simply add this article to the current

00:17:19

array and all this will be displayed on the

00:17:21

screen, well, as if in real time mode,

00:17:23

additionally here after the

00:17:25

site news function I also want to call the

00:17:28

set function modal window

00:17:29

and here I will set value

00:17:31

falls why do I need this? The thing is that

00:17:33

when I add a new article, I would

00:17:36

like

00:17:37

this modal window to simply hide,

00:17:39

so I will call the moodle

00:17:40

windows website and really hide

00:17:43

this modal window myself. Now I

00:17:45

need to pass this one function and

00:17:47

the article inside our component,

00:17:49

so here we will write that by

00:17:51

name and the article, I pass here a

00:17:53

function that is called

00:17:55

like this article,

00:17:56

and then I need to go to the

00:17:58

forms component and here, instead of

00:18:01

simply displaying information on the screen, we will

00:18:04

accordingly work son with this

00:18:06

function, firstly, of course, this

00:18:07

function needs to be received here, you need to

00:18:09

receive it as a parameter, and then here we

00:18:12

just do the following: we

00:18:14

turn to from article

00:18:15

and there we pass this object to that

00:18:19

object that contains all the

00:18:22

information regarding what led by a

00:18:25

user, and plus, perhaps I

00:18:27

would also like to make sure that this

00:18:30

form is completely cleared for us so that I can

00:18:33

implement this, I need to

00:18:34

get another parameter here, it can

00:18:37

be called anything, well, let’s say I

00:18:39

call it an action and here due to this

00:18:42

parameter you and I get access to

00:18:44

many different functions, for example, we

00:18:46

get access to a function

00:18:48

called form depletion, it allows

00:18:50

us to completely clear the form, this is

00:18:52

exactly what I need, let’s try it

00:18:55

now and let’s test what

00:18:56

we got and in style we have them up to It’s

00:18:59

still not particularly beautiful, but that’s

00:19:01

okay, let’s try

00:19:03

to test it, and so I updated the page of

00:19:06

the screen, again, for this you can press

00:19:07

control

00:19:08

p if necessary, and now let’s try

00:19:11

to add a new article,

00:19:12

since we already have different companies,

00:19:15

then let’s add more here let's say

00:19:18

Islam, we will also add, for example, that

00:19:20

Teslas are just a few

00:19:21

exclamation marks, and here we will have an

00:19:23

example of Tesla and school written, well, in

00:19:25

general, everything is according to the classics, since our

00:19:28

articles were written like this and it will be, and

00:19:30

also here it would be necessary to

00:19:32

add another picture but since I

00:19:33

haven’t prepared any picture, let me

00:19:35

just copy the full path to a

00:19:38

certain picture, for example, I

00:19:39

’ll take this last picture, and

00:19:42

I’ll just paste this Yuri here, now we

00:19:45

click on add and after that we

00:19:47

notice that yes, all the processing is

00:19:49

absolutely correct a new entry has been added to us, it has the

00:19:52

correct picture, it

00:19:55

has a name, it has an announcement, we can

00:19:57

go to this page and the

00:19:59

full text is displayed here, again everything

00:20:01

works

00:20:02

absolutely correctly, and you can

00:20:04

see that now we already have 4 articles, all of

00:20:07

them are here it is displayed correctly and, in

00:20:09

principle, the process of adding new articles

00:20:11

occurs without any nuances; in

00:20:13

fact, all we have to do

00:20:15

is add styles to these fields

00:20:17

because at the moment these fields

00:20:19

look, to be honest, not very special,

00:20:21

so let’s do this too you can

00:20:24

quickly do it now so that we can add a

00:20:26

style to them, all that needs to be done is

00:20:27

firstly, here we refer to the

00:20:29

style attribute, then we refer to

00:20:32

styles and here we, for example, will

00:20:33

refer to a property that

00:20:37

will be called input, we will also

00:20:39

write exactly the same style

00:20:41

for absolutely all of these fields, well, then

00:20:44

we just create this property here,

00:20:46

for example it will be input and here we

00:20:49

can perhaps do this with you

00:20:50

first of all, we will indicate with you border

00:20:53

with yes, that is, we will just make some kind of

00:20:55

stroke for example one pixel also I would

00:20:58

like to indicate probably the mayor gin top,

00:21:01

perhaps that is, let the indentation at the top here

00:21:03

be 15, and in addition,

00:21:07

in addition, let’s perhaps also add

00:21:08

padding, that is, these are the internal indents,

00:21:10

we will indicate, for example, 20 pixels for the

00:21:12

summer, maybe even more at 10 pixels and this is the

00:21:15

form Yes, I agree, it’s

00:21:17

not super perfect yet, let’s

00:21:19

then add a border color, that is,

00:21:21

this light for our stroke

00:21:25

here we’ll indicate silver and an additional one,

00:21:27

perhaps I’ll indicate a border-radius

00:21:30

here we’ll indicate 5 pixels and now the shape

00:21:33

looks much better than this was

00:21:35

before, it would also be possible to specify

00:21:36

larger internal margins and,

00:21:39

again, the form

00:21:40

would look a little better. Well, in general,

00:21:42

you can already play with styles as you

00:21:44

please here in style, as I have already

00:21:47

said in essence more than once the same style

00:21:48

that you have in the css language, so

00:21:51

learn the sex language and then you can

00:21:53

sign any styles to any of yours with

00:21:56

this

00:21:57

object, the button in principle looks

00:21:59

good, I probably won’t add anything,

00:22:01

but again, if you want,

00:22:03

you can add styles here and

00:22:05

to make it a little more interesting

00:22:08

and beautiful, you and I can stop at this

00:22:10

point; we managed to

00:22:12

create a fairly good application with

00:22:15

pictures with the addition of new articles

00:22:18

and a beautiful form, and this form is

00:22:20

quite very very logical because

00:22:22

it was created created on the basis of separately in

00:22:24

general library which is called

00:22:26

form, in general, our application, although

00:22:28

small, is still quite

00:22:30

worthy and complete, I hope

00:22:33

you liked this lesson, if so, then like,

00:22:35

subscribe to the channel, also do not

00:22:37

forget about our social networks, links to them

00:22:39

will be in the description of this video That's all for me,

00:22:41

so I'll see you in the

00:22:43

future, see you soon

Description:

В прошлом уроке мы создали модальное окно. Настало время добавить форму и реализовать возможность добавление новой статьи в приложении. За урок мы познакомимся с добавлением форм на основе библиотеки Formik. ✅ Полезные ссылки: – Бесплатные курсы на itProger: https://itproger.com/courses/react-native/10 – Официальный сайт: https://formik.org/ – Установка библиотеки: https://www.npmjs.com/package/formik ⏰ Тайм-коды: 00:00 - Начало 00:20 - Библиотека «Formik» 01:45 - Создание компонента с формой 03:10 - Создание формы с полями 12:30 - Подключение формы 14:34 - Добавление статьей 20:14 - Добавление стилей 22:10 - Заключительная часть ✔ Сообщество программистов: https://itproger.com/ ✔ ------------- Вступай в группу Вк - https://vk.com/prog_life 🚀 Группа FaceBook - https://www.facebook.com/unsupportedbrowser Инстаграм itProger: https://www.facebook.com/unsupportedbrowser Instagram: https://www.facebook.com/unsupportedbrowser Telegram: https://t.me/itProger_official Twitter - https://twitter.com/GoshaDudar - Уроки от #GoshaDudar 👨🏼‍💻 - Все уроки по хештегу #goshaLessons

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 "Изучение React Native / Урок #10 – Форма для добавление записи" 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 "Изучение React Native / Урок #10 – Форма для добавление записи" 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 "Изучение React Native / Урок #10 – Форма для добавление записи" 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 "Изучение React Native / Урок #10 – Форма для добавление записи" 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 "Изучение React Native / Урок #10 – Форма для добавление записи"?

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 "Изучение React Native / Урок #10 – Форма для добавление записи"?

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.