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

Обложка аудиозаписи

Подождите немного, мы готовим ссылки для удобного просмотра видео без рекламы и его скачивания.

Предыдущее видео: Курс React Native. Пишем Мобильное Приложение на JavaScript Следующее видео: 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

Канал: IT-KAMASUTRA

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

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

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

🔴 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)

Канал: 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)

Канал: Sonny Sangha

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

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

Канал: RED Group

87 - shouldComponentUpdate, PureComponent, memo - React JS

87 - shouldComponentUpdate, PureComponent, memo - React JS

Канал: IT-KAMASUTRA

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

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

Канал: Гоша Дударь

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

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

Канал: RED Group

React Native Crash Course | Build a Complete App

React Native Crash Course | Build a Complete App

Канал: Academind

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

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

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

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

добавим форму для добавления различных

00:00:03

новых записей внутри нашего приложения а

00:00:06

перед началом я бы хотел порекомендовать

00:00:07

вам сайт

00:00:08

а эти прагер точка ком на этом сайте вы

00:00:10

найдете код домашнее задание и много

00:00:12

другой полезной информации ссылка на

00:00:14

этот урок на сайте будет в описании к

00:00:16

этому видео переходите

00:00:17

не пожалеете мы с вами ранее уже

00:00:20

работали с формами даже когда вы

00:00:21

создавали приложение список дел мы тогда

00:00:24

работали с формочка из и таким

00:00:26

компонентам как текст input

00:00:27

ну и соответственно получали информацию

00:00:29

от пользователей и как либо с этой

00:00:31

информацией взаимодействовали в принципе

00:00:33

в этом уроке мы можем поступить точно

00:00:35

так же самым мы можем создать обычный

00:00:37

текст input и получать информацию дальше

00:00:40

и обрабатывать ноги добавлять эту

00:00:42

информацию как некую новую статью мы

00:00:44

можем поступить таким способом но я

00:00:47

предлагаю рассмотреть еще хоть

00:00:48

какой-либо новый вариант

00:00:49

добавлением но получение добавления

00:00:51

записей и этот вариант он будет основан

00:00:54

на таком на такой дополнительной

00:00:56

библиотеки которая называется как форме

00:00:59

форме это пожалуй одна из наиболее таких

00:01:01

удобных библиотек для разработки

00:01:03

различных форм если мы работаем с и

00:01:05

react ряд джесс или же react негев ну в

00:01:09

нашем случае именно реактив поэтому я

00:01:11

предлагаю в ходе этого урока

00:01:12

использовать именно for mick

00:01:13

познакомимся с тем как она эта система

00:01:15

работает ну и на ее основе создадим

00:01:17

необходимые нам формы сперва нам конечно

00:01:20

же необходимо установить форме cсылки на

00:01:22

это все будет в описании к этому видео

00:01:24

здесь мы просто копируем саму эту

00:01:26

команду также дополнительно нам

00:01:28

необходимо открыть терминал и в

00:01:31

терминале мы просто прописываем саму эту

00:01:33

команду по установке данной библиотеки

00:01:35

нашу форму мы давайте выделим в

00:01:37

отдельный компонент поэтому в папку

00:01:39

компонент мы добавляем новый файл этот

00:01:42

файл мы найдем как форм .

00:01:44

джесс ну здесь опишем весь необходимый

00:01:46

функционал

00:01:47

я предлагаю даже скопировать немного

00:01:49

кода из например full инфо джесс здесь

00:01:52

конечно же мы удаляем все ненужные нам

00:01:54

стиле

00:01:55

также наверняка мы давайте удалим все

00:01:57

что здесь возвращается мы переименуем

00:02:00

саму эту функцию она будет форма

00:02:02

называется здесь road метод параметры не

00:02:04

будем получать с вами также давайте

00:02:07

поменяем импорт и здесь мы react будем

00:02:09

подключать до по

00:02:11

для мы бы не подключать такие компоненты

00:02:12

как style щит бью

00:02:14

кроме этого нам необходимо подключать

00:02:16

еще кнопку при нажатии на которую мы как

00:02:18

раз и будем добавлять новую запись и по

00:02:20

сути нам еще все-таки потребуется такой

00:02:22

компонент как текст input несмотря на то

00:02:24

что мы используем форме нам все равно

00:02:26

этот компонент потребуется потому что

00:02:27

именно он создает нам как бы формочку

00:02:29

для получения данных

00:02:31

поэтому его тоже здесь сразу с вами

00:02:33

подключим ну и глобальные стиле

00:02:34

наверняка мы тоже их здесь оставим кроме

00:02:37

этого нам необходимо конечно же

00:02:39

импортировать еще и объект форме и вот

00:02:41

этот компонент поэтому мы говорим что мы

00:02:43

импортируем for mick и

00:02:45

импортируемый из и и из такой библиотеки

00:02:47

которая так и называется как форме год в

00:02:50

общем там и все теперь давайте опишем то

00:02:53

что у нас здесь будет возвращаться здесь

00:02:55

пожалуй мы все-таки создадим объект view

00:02:57

пускай он все таки будет возможно к нему

00:03:00

давайте пока стиле никаких добавлять не

00:03:02

будем если что потом это все по

00:03:03

добавляем а также здесь мы описываем с

00:03:06

вами сам вот этот вот объект for mick его

00:03:09

нужно открыть а также закрыть ну и соответственно

00:03:11

внутри этого объекта мы описываем те

00:03:14

полян которые будут внутри нашей формы

00:03:17

вы можете спросить а зачем тогда вообще

00:03:18

использовать фармить если мы все равно

00:03:20

сейчас будем описывать все эти поля все

00:03:22

дело в том что если мы используем форме

00:03:25

кто мы получаем очень быстрый инструмент

00:03:27

для получения данных из каждой формочки

00:03:31

которая будет находиться ну и в каждом

00:03:32

поле которое будет находиться внутри

00:03:33

этого этой формы и плюс мы получаем еще

00:03:36

и быстрый процесс валидации этих данных

00:03:39

это достаточно удобно это облегчает нам

00:03:41

процесс построения

00:03:42

здесь же нам необходимо писать несколько

00:03:44

атрибутов первую очередь мы давайте

00:03:46

опишем такой атрибут который называется

00:03:48

как он сабмит по сути это обработчик

00:03:50

события и этот обработчик события он

00:03:53

будет срабатывать каждый раз когда мы

00:03:54

будем отправлять данные из формы

00:03:56

другими словами он будет срабатывать

00:03:58

каждый раз когда мы будем нажимать на

00:04:00

кнопку внутри формы ну и соответственно

00:04:02

мы будем получать данные который ввел

00:04:04

пользователь

00:04:05

здесь нам необходимо указать один

00:04:06

параметр и он может называться как

00:04:08

wellness то есть это те значения которые

00:04:11

мы получаем от пользователя из всех

00:04:13

полей что находится внутри самой

00:04:15

формочки здесь же я предлагаю просто

00:04:18

выводить полностью все эти данные на

00:04:20

экран мы или вернее в консоль чуть позже

00:04:22

мы их конечно же будем обрабатывать но

00:04:24

пока давайте пропишем console.log

00:04:26

и будем все эти данные выводить помимо

00:04:28

этого нам нужен еще один здесь

00:04:30

атрибут он называется и не shall be

00:04:32

always и в этом атрибуте мы с вами

00:04:35

указываем как бы какие параметры

00:04:37

какие значения мы будем получать из

00:04:40

самой формы в моем случае я хочу

00:04:43

получать несколько значений поэтому я

00:04:45

здесь еще открываю фигурные скобки

00:04:46

говорю что я буду получать как бы объект

00:04:49

состоящий из нескольких значений и я

00:04:51

буду из форм и получать такие значения

00:04:53

как название статьи

00:04:55

анонс статьи и полный текст статьи и да

00:04:58

кстати возможно давайте еще и будем

00:04:59

получать некий ural для картинки да то

00:05:02

есть у нас будет как бы четыре поля и

00:05:04

здесь мы просто описываем то что у нас в

00:05:07

форме будет четыре поля и мы эти четыре

00:05:09

поля на эти четыре значения будем здесь

00:05:11

получать здесь этот атрибут а называется

00:05:14

как и не шалвович

00:05:17

изначальное значение для всех вот этих

00:05:19

вот полей поэтому здесь указываем эти

00:05:22

поля плюс добавляем к ним еще и

00:05:24

начальное значение здесь повсюду я буду

00:05:27

указывать как пустую строку но если

00:05:30

хотите чтобы вас сразу же подставлялись

00:05:32

какие-то данные то соответственно можно

00:05:34

здесь указывать еще какое-то значение и

00:05:35

это означает будет подставляться в

00:05:37

формочку вы конкретно и поле мне такой

00:05:40

не нужно поэтому здесь повсюду буду

00:05:41

прописывать именно пустые значения так

00:05:43

вот мы будем получать с вами name анонс

00:05:46

также мы будем получать с вами авт

00:05:48

полный текст и будем получать еще

00:05:50

информацию относительно you real

00:05:51

картинки который мы будем подставлять

00:05:54

для каждой конкретной записи вот в

00:05:56

общем-то найти обязательные атрибуты

00:05:58

которые нужно было бы добавить да то

00:06:00

есть это те значение которые мы будем

00:06:01

получать из формой и это обработчик

00:06:03

события которые срабатывают при нажатии

00:06:05

на кнопку в форме для отправки данных

00:06:08

теперь следующее что нам необходимо

00:06:10

сделать так это внутри самого объекта

00:06:13

форме к нам необходимо описать все те

00:06:16

текстовые поля за счет которых мы будем

00:06:18

получать данные

00:06:19

причем мы не можем просто взять и сразу

00:06:22

начать использовать текст input потому

00:06:24

что если потому что если сразу начну

00:06:27

здесь прописывать объекты xinput

00:06:28

то в таком случае он никак не будет

00:06:30

привязан к самой

00:06:32

объекту форме поэтому мне здесь

00:06:34

необходимо открыть фигурной скобки тем

00:06:37

самым я как бы говорю что здесь у меня

00:06:39

будет прописан некий java script код

00:06:41

здесь мы с вами получаем определенные

00:06:43

данные указаны параметры защиты мы будем

00:06:46

получать определенные данные из каждого

00:06:48

из полей этот параметр вы вы можете

00:06:51

назвать как угодно но зачастую вообще

00:06:53

называют как props я предлагаю так же

00:06:55

самое его и назвать ну и дальше мы

00:06:57

открываем еще круглые скобки и в них мы

00:07:00

указываем что конкретно мы будем

00:07:03

отображать пользователю да а здесь мы давайте

00:07:06

сделаем возможно с вами следующий

00:07:07

во-первых мы создадим еще один объект

00:07:10

view но опять же это как просто блок и мы

00:07:12

сможем добавить сюда какие-то

00:07:13

дополнительные стили если нам это

00:07:15

понадобится

00:07:16

но на самом-то деле можно грубый не

00:07:18

дописывать этот объект ее дополнительно

00:07:20

внутрь этого объекта мы прописываем с

00:07:22

вами текст

00:07:23

input ну так я начал прописывать x

00:07:27

просто input мы здесь прописываем ну и

00:07:29

первое наше поле она будет служить для

00:07:32

получения например на звание самой

00:07:35

статьи поэтому здесь я предлагаю сделать

00:07:38

следующее во-первых мы указываем с вами

00:07:40

блю атрибут вы этом атрибуте мы просто

00:07:43

говорим сын мы просто говорим какое

00:07:45

конкретное значение мы будем

00:07:47

устанавливать

00:07:49

внутри вот этого от внутри вот этого

00:07:52

компонента форме

00:07:53

чтобы нам такое указать мы обращаемся к

00:07:55

и props вот этому вот параметру здесь мы

00:07:58

через точку обращаемся к

00:08:00

плюс и дальше мы обращаемся уже к одному

00:08:03

из возможных свойств да например в моем

00:08:06

случае я обращусь к ней таким образом

00:08:08

все что я буду вписывать внутри этого

00:08:10

текстового поля она в автоматическом

00:08:12

режиме сразу будет устанавливаться вот

00:08:15

сюда для этого свойства

00:08:17

ну и дальше я смогу вытянуть эту

00:08:18

информацию и сделать с ней все что мне

00:08:21

только понадобится помимо этого я бы

00:08:24

здесь хотел еще указать placeholder

00:08:26

placeholder это просто текст подсказкам

00:08:28

здесь например будет написано введите

00:08:30

название вот дополнительная возможно

00:08:34

хотел бы здесь указать что у нас быть

00:08:37

некий обработчик события и этот

00:08:39

обработчик события он будет называться

00:08:41

он челендж текста есть он срабатывает

00:08:43

каждый раз когда мы что-либо вводим

00:08:45

внутри текстового поля и в этом

00:08:48

обработчике события мы не будем вызывать

00:08:50

какую-то нашу собственную функцию вместо

00:08:53

этого я обращусь к параметру prox и

00:08:56

дальше обращаюсь к встроенный такой

00:08:58

функцию которая называется findall czech

00:09:00

здесь же мы просто еще указываем один

00:09:03

дополнительные параметры и как бы

00:09:04

говорим в какое значение мы под в какое

00:09:07

свойство мы подставляем значения из

00:09:09

этого текстового поля

00:09:10

то есть по факту я на данный момент

00:09:12

давайте даже это разобью на несколько

00:09:14

строчек кода чтобы все чтобы бы это все

00:09:16

могли видеть на данный момент я прописал

00:09:19

то что в качестве значения для этого

00:09:21

текстового поля мы подставляем то

00:09:23

свойство которое у нас есть для самой

00:09:25

формочки также каждый раз когда мы что

00:09:28

то будем новое вписывать в это текстовое

00:09:30

поле мы это значение будем добавлять вы

00:09:33

ну сама свойство name которая

00:09:35

принадлежит к форме

00:09:37

ну и плюс я просто добавил здесь еще

00:09:39

плейсхолдер это чисто ну чисто подсказка

00:09:44

для этого текстового поля по сути больше

00:09:46

здесь ничего давайте пока не дописывать

00:09:48

возможно в будущем мы еще стиле сюда

00:09:49

добавим но на данный момент я думаю пока

00:09:51

и этого хватит мы создаем еще второе

00:09:54

поле здесь мы уже с вами будем работать

00:09:56

с анонсом соответственно мы просто

00:09:58

меняем здесь анонс и анонс здесь давайте

00:10:00

будет написано видите анонс также

00:10:03

дополнительно создаем еще и третье поле

00:10:05

здесь мы будем получать уже полную

00:10:07

информацию про статью поэтому здесь мы

00:10:09

работаем сын full таким вот свойствам

00:10:12

здесь также будем оставлять все был пул

00:10:13

здесь будет написано

00:10:15

видите статью написать например и еще

00:10:20

одно у нас будет поле она будет уже

00:10:22

работать с и таким свойством как им чем

00:10:25

здесь также m&g

00:10:26

и здесь укажите фото например давайте

00:10:29

так бы здесь написано жить и фото вот в

00:10:32

общем то и все что здесь необходимо было

00:10:34

бы дописать один только единстве нюанс я

00:10:36

бы наверное хотел чтобы у нас для для

00:10:40

ввода большого объема текста я бы хотел

00:10:43

сделать так чтобы нас это текстовое поле

00:10:44

она принимала несколько линий текста да

00:10:49

и чтобы мне такое указать мне здесь

00:10:51

необходимо добавить еще такой атрибут

00:10:53

который называется как multiline таким

00:10:55

образом я всегда смогу вписывать

00:10:57

несколько строчек текста

00:10:58

причем здесь не нужно указывать для него

00:11:00

никакого дополнительного значения я

00:11:02

просто указываю multiline и все га вы и

00:11:04

это и это значение делает то что данное

00:11:07

текстовое поле она будет принимать

00:11:08

несколько строчек текста здесь для

00:11:11

анонса я пожалуй сделаю абсолютно тоже

00:11:13

самое ну и пожалуй нам еще остается сюда

00:11:16

добавить исключительно только кнопку для

00:11:19

этого мы работаем с таким компонентам

00:11:21

как батон здесь мы указываем с вами

00:11:24

тайтл дата все тот текст который будет

00:11:26

находиться на кнопки давайте здесь быть

00:11:28

написаны например добавить сюда же мы

00:11:30

добавляем обработчик нажатием то есть

00:11:33

добавляем атрибут он пресс и здесь мы

00:11:35

точно так же не будем создавать свое

00:11:38

какое-либо событие

00:11:39

свою какую-либо функцию а будем работать

00:11:41

с этой функцией которая существует в

00:11:45

самом объекте формики для этого нам

00:11:47

просто нужно обратиться к и параметру

00:11:48

props и здесь мы обращаемся к хендл сами

00:11:51

таким образом мы вызываем необходимую

00:11:53

функцию и по факту каждый раз когда я

00:11:55

буду нажимать на эту кнопку у нас будет

00:11:58

попер срабатывать конечно же это событие

00:12:00

здесь мы вызываем функцию findall и

00:12:03

когда мы вызываем функцию findall саммит

00:12:06

у нас еще вызывается вот этот обработчик

00:12:09

события не получается что при нажатии на

00:12:11

кнопку мы будем получать полностью все

00:12:14

данные из всех этих текстовых полей и

00:12:17

сразу все эти данные мы будем выводить в

00:12:19

консоль чуть позже вы конечно же эти

00:12:21

данные еще будем обрабатывать и будем

00:12:22

добавлять как бы как новую статью теперь

00:12:25

мы это все можем спокойно с вами

00:12:27

сохранить и давайте еще отобразим эту

00:12:29

форму внутри модального окна для этого

00:12:32

сперва нам необходимо конечно же здесь

00:12:35

вверху подключить сам этот компонент для

00:12:39

этого мы говорим что я подключаю форм

00:12:41

игре я импортирую форм из такого файлика

00:12:45

который находится пожалуй в этой же

00:12:47

папке давайте мы в этом убедимся на вики

00:12:49

main и . джесс и форм . джейсона

00:12:52

находится в одной папке поэтому и говорю

00:12:53

что из этого же файла из этой же папке

00:12:55

время я подключаю такой файл который

00:12:58

называется как форм да ну и в принципе

00:13:00

все только здесь неправильно писал

00:13:03

давайте from напишем вот тогда у нас все

00:13:05

здесь верно написано ну и дальше я делаю

00:13:08

следующее вот здесь от текстовые надписи

00:13:11

я давайте

00:13:12

просто буду выводить саму эту формочку

00:13:14

никаких дополнительных атрибутов здесь я

00:13:17

не указываю ну и пожалуй просто это

00:13:18

можно все сохранить теперь открываем

00:13:20

модальное окно и вот действительно у нас

00:13:23

есть данная форма я согласен выглядит

00:13:26

она достаточно как-то примитивно но в то

00:13:29

же время она есть она уже работает

00:13:32

остается только добавить к этому всему

00:13:33

стиле и добавив еще дополнительный

00:13:35

функционал этому всему

00:13:36

поначалу мы давайте возможно здесь

00:13:38

просто введём некий текст например aitl

00:13:41

здесь я напишу анонс здесь я например

00:13:44

напишу full текст и здесь мы укажем

00:13:47

просто фото например и матч на вот

00:13:49

например что такое нажимаем добавить и

00:13:51

после этого заходим на сервер и здесь

00:13:55

она вообще должно было бы отобразится ну

00:13:58

да ладно но здесь не отобразилась

00:13:59

давайте зайдем просто в терминал и

00:14:01

попробуем здесь посмотреть здесь мы

00:14:04

да кстати вот здесь она также отображать

00:14:06

свете вот в терминале у меня здесь

00:14:08

отображается объект и как бы здесь

00:14:10

отображаются все вот эти вот параметры

00:14:12

который я получил от пользователь здесь

00:14:14

я получил анонс и и здесь еще огромный

00:14:16

такой пробел получается потому что я его

00:14:18

случайно здесь действительно

00:14:19

и добавил дополнительно здесь я получаю

00:14:22

полный текст и картинку как бы и

00:14:24

название для статьи touch все эти данные

00:14:26

которые я вел через формочку я их здесь

00:14:28

получают и мне остается их только

00:14:30

обрабатывать и что мы как раз и будем

00:14:32

делать чуть чуть позже теперь мы давайте

00:14:34

разработаем функцию за счет которым мы

00:14:37

будем добавлять новые статьи

00:14:38

для этого я предлагаю здесь прописать

00:14:40

константу назовем эту константу как от

00:14:43

article

00:14:44

ну и соответственно она будет содержать

00:14:45

некую функцию поэтому здесь открываем

00:14:47

круглые скобки и прописываем реализацию

00:14:50

самой функции здесь нам нужно будет

00:14:52

получать один параметр

00:14:54

этот параметр это по сути та статья

00:14:56

которую мы как раз и будем добавлять

00:14:58

поэтому я давайте на свой этот параметр

00:14:59

именно как article

00:15:01

далее здесь мы пропишем с вами по сути

00:15:04

точно тот же самый функционал который мы

00:15:06

с вами уже реализовывали когда работали

00:15:08

со списком дел

00:15:09

даты вспомните мы там с вами возвращали

00:15:11

и возвращали мы весь тот массив который

00:15:14

у нас и так есть плюс добавляли еще один

00:15:17

дополнительные элементы этот элемент это

00:15:19

тот параметр который сюда передается

00:15:20

здесь будем делать точно то же самое то

00:15:23

есть я обращаюсь к им такой вещи как

00:15:25

какой функции который называется site

00:15:27

news она устанавливает нам новое

00:15:29

значение для данного массива здесь мы с

00:15:32

вами просто должны указать один параметр

00:15:35

это как бы ну наш текущий список давайте

00:15:38

его так и назову как просто ул ест да и

00:15:41

здесь мы прописываем с вами тоже

00:15:43

реализацию как бы этой функции тут мы

00:15:45

все что делаем так это возвращаем новый

00:15:47

список наш новый список он будет

00:15:49

состоять из следующих вещей во-первых

00:15:52

это у нас будет новая наша вот эта вот

00:15:55

статья которую мы добавляем а также

00:15:57

будет второй параметр и этот второй

00:15:59

параметр это полностью все те записи

00:16:03

которые есть на данный момент в нашем

00:16:04

вот этом вот списке на самом-то деле мы

00:16:07

бы мы бы могли уже сейчас такое

00:16:09

протестировать мигрени тоже против

00:16:11

тирании могли бы просто двигаться дальше

00:16:13

но нам здесь еще необходимо кое-что

00:16:15

дописать дело в том что на данный момент

00:16:17

мы с вами принимаем а статью эта статья

00:16:20

она будет содержать название анонс

00:16:23

полный текст на также картинку но оно не

00:16:26

будет содержать ключ поэтому этот ключ

00:16:28

нам необходимо в ручном формате вот

00:16:30

здесь всегда добавлять давайте мы

00:16:32

возможно будем в где-нибудь вот здесь

00:16:34

добавлять для тьмы мы обращаемся к

00:16:36

article мы обращаемся к самому свойству который

00:16:40

мы хотим устанавливать моем случае это

00:16:42

свойство ти называется

00:16:43

и здесь опять же по той же самой логике

00:16:46

мы используем масс мы используем рэндом

00:16:49

и здесь мы можем даже немножко все

00:16:50

упростить мы сразу же это будем

00:16:52

приводить к формату строки и в общем то

00:16:54

все дат раньше еще писал здесь а некое

00:16:56

определенное значение и это все я еще

00:16:58

обрезал да но давайте возможность даже в

00:17:00

этот раз поступим немного проще таким

00:17:03

образом теперь у нас получается

00:17:05

следующая когда я буду вызывать вот эту

00:17:06

вот функцию мы будем сюда же передавать

00:17:09

определённую статью дальше к этой статье

00:17:11

мы будем добавлять определенный

00:17:13

случайный ключ и дальше мы просто эту

00:17:16

статью будем добавлять к текущему уже

00:17:19

массиву и все это будет выводиться на

00:17:21

экран у ну как бы в режиме real time

00:17:23

дополнительно здесь после уже функции

00:17:25

site news я еще хочу вызывать функцию

00:17:28

set модал window

00:17:29

и здесь я буду устанавливать значение

00:17:31

falls зачем мне это нужно дело в том что

00:17:33

когда я буду добавлять новую статью я бы

00:17:36

хотел чтобы у меня

00:17:37

это модальное окно она просто скрывалась

00:17:39

поэтому я буду вызывать сайт moodle

00:17:40

windows и действительно скрывать сама

00:17:43

вот это вот модальное окно теперь мне

00:17:45

необходимо передавать вот эту функцию и

00:17:47

the article внутрь нашего компонента

00:17:49

поэтому здесь мы пропишем что по

00:17:51

названию и the article я сюда передаю

00:17:53

такую функцию который так и называется

00:17:55

как это article

00:17:56

ну и дальше мне необходимо перейти в

00:17:58

компонент форм и здесь уже вместо вывода

00:18:01

информации просто на экран мы будем

00:18:04

соответственно работать сын данной

00:18:06

функцией во первых конечно же эту

00:18:07

функцию нужно здесь получать нужно ее

00:18:09

получать как параметр и дальше здесь мы

00:18:12

просто с вами делаем следующее мы

00:18:14

обращаемся к от article

00:18:15

и туда передаем вот этот вот объект в

00:18:19

тот объект который содержит полностью

00:18:22

всю информацию относительно того что вел

00:18:25

у нас пользователь ну и плюс возможно я

00:18:27

бы еще хотел сделать так чтобы нас эта

00:18:30

форма она полностью очищалась чтобы мне

00:18:33

такое реализовать мне необходимо здесь

00:18:34

получать еще один параметр он может

00:18:37

называться как угодно ну допустим я его

00:18:39

назову как экшен и здесь за счет этого

00:18:42

параметра мы получаем с вами доступ ко

00:18:44

множеству различных функций например мы

00:18:46

получаем доступ к такой функции который

00:18:48

называется как разят форм она позволяет

00:18:50

нам очистить полностью формочку это то

00:18:52

что мне как раз и нужна давайте

00:18:55

возможным и сейчас протестируем что у

00:18:56

нас получилось да стилем у нас они до

00:18:59

сих пор не особо красивые но ничего

00:19:01

страшного мы давайте так попробуем

00:19:03

протестировать и так я обновил страничку

00:19:06

экрана опять таки для этого можно нажать

00:19:07

control

00:19:08

р если это необходимо и теперь попробуем

00:19:11

добавить новую статью

00:19:12

раз уж у нас различные уже идут компании

00:19:15

то давайте мы еще допишем здесь допустим

00:19:18

ислам также мы допишем например что

00:19:20

тесла идут просто несколько

00:19:21

восклицательных знаков и тут будет у нас

00:19:23

написано пример тесла и school ну в

00:19:25

общем все по классике так как у нас те

00:19:28

статьи были написаны так и это будет а

00:19:30

также тут необходимо было бы еще

00:19:32

картинку добавить но поскольку я не

00:19:33

подготовил никакой картинки то давайте я

00:19:35

просто скопирую полный путь к

00:19:38

определенной некая картинки например

00:19:39

последнюю эту картинку возьму да и сюда

00:19:42

этот юрий я как раз и вставлю теперь мы

00:19:45

нажимаем на добавить и после этого мы

00:19:47

замечаем что да все обработ

00:19:49

абсолютно корректно у нас была добавлена

00:19:52

новая запись у нее верная картинка у нее

00:19:55

есть название у нее есть анонс мы можем

00:19:57

перейти на эту страничку и здесь

00:19:59

отображается полный текст опять же все

00:20:01

срабатывает

00:20:02

абсолютно верно да и у нас вот вы можете

00:20:04

заметить теперь уже есть 4 статьи все

00:20:07

они здесь корректно отображаются он и в

00:20:09

принципе процесс добавления новых статей

00:20:11

происходит без каких-либо нюансов по

00:20:13

сути все что нам остается сделать так

00:20:15

это добавить стили к вот этим вот полям

00:20:17

потому что на данный момент эти поля

00:20:19

выглядит ну честно говоря не особо

00:20:21

поэтому давайте это тоже с вами возможно

00:20:24

быстро сейчас сделаю чтобы нам добавить

00:20:26

к ним стиле все что необходимо сделать

00:20:27

это во первых вот здесь обратиться к

00:20:29

атрибуту style дальше мы обращаемся к

00:20:32

стайлз и здесь мы например будем

00:20:33

обращаться к такому свойству который

00:20:37

будет называться как input также мы

00:20:39

точно такой же стиль пропишем абсолютно

00:20:41

для всех вот этих вот полей ну и дальше

00:20:44

мы здесь просто создаем это свойство

00:20:46

например это будет input и здесь мы

00:20:49

возможно давайте сделаем с вами во

00:20:50

первых вот что мы укажем с вами border

00:20:53

with да то есть мы сделаем просто некую

00:20:55

обводку например один пиксель также я бы

00:20:58

хотел указать наверное мэр джин топ

00:21:01

возможно то есть отступ сверху здесь он

00:21:03

пускай будет по 15 ну и дополнительно

00:21:07

дополнительно давайте возможно еще

00:21:08

padding то есть это внутренние отступы

00:21:10

мы укажем например по 20 пикселей на

00:21:12

лето может даже больше под 10 пикселей и

00:21:15

вот такая форма нас выходит да согласен

00:21:17

пока еще не супер идеально давайте мы

00:21:19

тогда еще добавим border color то есть

00:21:21

этот свет для для нашей этой обводки

00:21:25

здесь мы укажем silver и дополнительная

00:21:27

еще возможно укажу border-radius

00:21:30

здесь мы укажем 5 пикселей и вот форма

00:21:33

уже намного лучше выглядеть чем это было

00:21:35

до этого также можно было бы указать

00:21:36

более большие внутренние отступы и

00:21:39

опять-таки форма еще чуть-чуть лучше

00:21:40

стало выглядеть ну в общем то со стилями

00:21:42

вы уже можете играться как вам будет

00:21:44

угодно здесь стиле как я уже не раз

00:21:47

говорил это по сути те же самые стиле

00:21:48

что есть вы языке css поэтому

00:21:51

изучить язык ceкc с и дальше можете

00:21:53

подписывать любые стили к любым вашим

00:21:56

вот этим вот

00:21:57

объектом кнопка в принципе выглядит

00:21:59

неплохо я наверное ничего добавлять не

00:22:01

буду но опять же если захотите там

00:22:03

можете уже здесь добавить стили и

00:22:05

сделать это немного еще более интересным

00:22:08

и красивым мы же с вами можем на этом

00:22:10

моменте остановиться у нас получилось

00:22:12

создать достаточно хорошее приложение с

00:22:15

картинками с добавлением новых статей с

00:22:18

и красивой формой причем эта форма

00:22:20

вполне очень очень логично потому что

00:22:22

она создана создан на основе отдельно

00:22:24

вообще библиотеки который называется

00:22:26

форме в общем то наше приложение хоть и

00:22:28

является маленьким но все же вполне себе

00:22:30

достойным и полноценно я надеюсь этот

00:22:33

урок вам понравился если так то ставьте

00:22:35

лайки подписывайтесь на канал также не

00:22:37

забывайте про наши соцсети ссылки на них

00:22:39

будут в описании к этому видео у меня ж

00:22:41

на этом все так что увидимся с вами в

00:22:43

дальнейшем до скорых встреч пока

Описание:

В прошлом уроке мы создали модальное окно. Настало время добавить форму и реализовать возможность добавление новой статьи в приложении. За урок мы познакомимся с добавлением форм на основе библиотеки 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

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

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

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "Изучение React Native / Урок #10 – Форма для добавление записи" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

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

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

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

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "Изучение React Native / Урок #10 – Форма для добавление записи"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

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

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.