привет, ребята, приглашаем вас в другой мини-мини
Конечно, в этом видео мы собираемся посмотреть
на входах и выходах реагируют Дж / с хорошо
и реакция на самом деле одна из моих любимых
технологии, с которыми я работал
в последнее время, и если вы его не использовали, я
определенно предлагать действительно изучать
потому что он может изменить способ
вы думаете о пользовательских интерфейсах и работе
с пользовательскими интерфейсами Я работаю над 10
проект протекает сейчас, как только
это доступно. Я поставлю ссылку в
в описании у меня также есть введение
реагировать и реагировать и поток
проект, чтобы вы могли проверить, как
ну хорошо теперь мы будем прыгать в
и посмотрите на какой-то код, но я хочу
просто переходите по-настоящему быстро, я просто
в основном, что такое реакция, и некоторые из его
преимущества
хорошо, так что это с открытым исходным кодом
Библиотека JavaScript для построения динамических
пользовательских интерфейсов, и у него нет
ничего общего с бэкэндом ваших
приложение, работающее с базой данных и
так на это это в основном V в MVC а
и Model View Controller это
Поддержка Facebook Instagram а
сообщества индивидуальных разработчиков
некоторые преимущества реакции позволяют
для разработки простых декларативных представлений для
каждое государство в вашей заявке, если вы
не знаю, что я имею в виду по состоянию, если мы
подумайте о почтовом клиенте при просмотре
ваш почтовый ящик, который считается государством, если
вы должны были нажимать, а затем
редактор открывает это другое состояние, поэтому
реагирует на эти состояния и позволяет вам
для создания и управления представлениями и
компоненты для них хорошо так
все в представлении инкапсулировано в
компонент и эти компоненты могут
имеют свои собственные свойства и
хорошо , если вы хотите , чтобы попасть в более
сложное приложение
может смотреть на поток или редукцию, которая
архитектуры приложения, но это
немного сложнее, чем я хочу
сегодня влезть, так что мы будем
строго говоря, реагируя на Джаса
реагирует на использование так называемого виртуального Dom
или объектная модель виртуального документа я буду
поговорите об этом через минуту, но
в основном это позволяет работать с и
делают только некоторые части Dom
что вам нужно еще одно большое преимущество
реагируют, это полностью не зависит от
остальное приложение, как я сказал, чтобы вы
может использовать его практически в любом другом
рамки или любую другую технологию, которая
Вы хотели бы это также может оказать на
клиента или сервера, вы можете использовать его с
nodejs и NPM
а также просто включить его в
скриптовый тег и его использование прямо под HTML
файлов, так как я сказал, что реакция использует виртуальную
Дом и она в основном абстрагирует
Dom и создает свою собственную версию, которая
упрощается и включает только вещи
что вам все нужно, это также помогает нам
определить , какие части были изменены так
когда вы обновляете свой компонент
так или иначе, и вы хотите
сделать это вместо того , чтобы обновлять
реакция всего приложения может
посмотрите, что изменилось и посмотрите на
оригинал Dom, а затем просто re render
той части, которая должна обновиться
поэтому он определяет, как загрузить
браузера Dom более эффективно, и это
также гораздо более легкий и
делает работу намного быстрее , все в порядке , так
давайте рассмотрим чрезвычайно простой
приложения или чрезвычайно просто
компонент, называемый приветственным сообщением, и вы
может видеть, что в основном у нас есть класс
вызванное приветствие, которое расширяет реакцию
компонент и внутри здесь мы имеем
метод или функцию, называемую render, которая
это единственная функция, которая на самом деле
требуется в компоненте , вы знаете
еще много, и вы можете создавать собственные
функции, но требуется рендеринг, и вы
может видеть, что мы возвращаем то, что выглядит
элемент HTML это на самом деле JSX
ok Java- скрипты нетронутые расширения, которые
Я поговорю обо второй
в основном то, что мы делаем , говорит
привет, и тогда у нас есть эта точка
имя свойства или точка реквизита
так что теперь это свойство компонента вниз
здесь мы используем реакцию Dom для рендеринга
это вы можете видеть, что мы используем этот привет
сообщение , которое является именем из
компонент, и мы передаем
свойство называется именем со значением
Джейн все в порядке , так здесь будет
показать все, что мы здесь передаем,
это Джейн, и тогда этот параметр
мы хотим вставить компонент в наш
HTML, поэтому обычно у вас есть div с
Идентификатор застывания маршрута или что — то вроде
это и вы вставляете вставить его
прямо там, так что JSX стоит
для расширения синтаксиса JavaScript и
шаг препроцессора, который добавляет xml к
JavaScript выглядит так же, как XML или
HTML есть несколько отличий и
они пойдут позже, но
в основном он определяет знакомый синтаксис
для определения древовидных структур с
атрибутов, и это не требуется, но
определенно рекомендуется и maich вещь
делает вещи намного проще, а позже я
может показать вам пример JSX, а также
JavaScript, который его генерирует, и вы
может видеть, насколько проще просто
используйте JSX, чтобы вы научились этому
мини-курс, как создать реакцию
приложение, как создавать компоненты
управлять состоянием и свойствами
мероприятия работают с формами и вводной работой
с JSX
мы рассмотрим некоторые из
методы жизненного цикла, а также способы извлечения
данные из API и привести его в нашу
компонента, достаточно
слайды, давайте вскочимся и создадим реакцию
приложение все в порядке , так что мы собираемся
вскочить и начать писать код
с реагируют Дж / с в настоящее время, насколько
приложение построит это очень
простое приложение для управления проектами, но я
не хотите, чтобы вы сосредоточились на
функциональность приложения , потому что
моя цель в этом видео , чтобы показать вам
разные части реагировать и учить
вы основываете
вы можете перейти к созданию собственного
приложений и идей, так что если я
перейдите на веб-сайт реагирования и нажмите, чтобы получить
Началось это, и мы обратились к простому приветствию
пример мира, мы хотим нажать на это
установочная ссылка прямо здесь и
есть несколько различных способов , многие
различные способы, которыми вы можете использовать, реагируют на вас
может даже включать два сценария
здесь отреагируйте j / s и отреагируйте Dom прямо в
ваш файл index.html и работайте с
но мы хотим быть немного более эффективными
и чистым, поэтому я использовал что-то
как веб-пакет или глоток вместе с
реагировать на плагины, но недавно они создали
этот инструмент для создания реактивного приложения
инструмент командной строки, который позволит вам
генерировать реактивное приложение только одним
команда все в порядке , так что это это
определенно, что я предлагаю использовать
он собирает все , что компилирует все
JSX вам не нужно беспокоиться о
что-нибудь действительно в порядке, так что мы собираемся
идти вперед и устанавливать это и
необходимо установить во всем мире
не должны быть установлены js так, если
у вас нет этого, обратитесь к node.js org
скачайте его, установите
дайте вам узел вместе с NPM в порядке
после установки узла мы будем
откройте командную строку и вы хотите
запустите npm install, убедитесь, что вы добавили —
g4 глобально, а затем создать — реагировать — приложение
хорошо я уже устанавливали это так
я не собираюсь запускать его, а просто идти
вперед и запустите это, а затем перейдите к
где бы вы ни хотели создать свой проект
Я нахожусь в своем C-диске в папке моих проектов
и тогда мы просто хотим запустить create —
реагировать на приложение, а затем название вашего проекта
хорошо, поэтому я собираюсь назвать этот проект
менеджер, это займет минуту или
два, поэтому я остановлюсь на этом
и я вернусь , когда это сделано хорошо
так что прошло около двух минут
мы хотим записать CD в менеджера проекта
и тогда все, что нам нужно сделать, чтобы запустить наш
приложение выполняет NPM, и
и если мы посмотрим здесь на самом деле, я
не знаю, показывает ли это нам, но строить
это для производства, мы можем просто запустить I
думаю, что это NPM run build, и это будет
просто скомпилируйте все, чтобы вы могли
просто возьмите его и загрузите в свой
сервер или что-то в этом роде, поэтому мы запустили
приложение , и это то , что мы получаем нормально
Хорошая маленькая целевая страница Я не хочу
держите любой этот материал, например,
Логотип и стиль , так что я собираюсь
откройте мою папку в текстовом редакторе и
Я использую атом, который я бы рекомендовал
для реакции развития я нахожу это действительно
действительно полезно выделить код
очень приятно, и я заметил, что с
возвышенный текст, он не подбирает JSX
очень хорошо, поскольку подсветка кода
но атом отлично работает с ним и
есть, вероятно, плагин вы можете использовать
для возвышенного, но я просто предпочитаю использовать
атом, так что я собираюсь просто добавить свой
папка проекта здесь, которая находится на диске C
проектов и менеджеров проектов, так что это
это то, что оно нам дало, так что у нас есть
наш пакет JSON-файл, вы можете видеть, что
мы используем реакцию прямо сейчас, это версия
пятнадцать пунктов три пункта два вместе с
отредактируйте « Дом», а затем начните наши скрипты
мы просто запустим приложение, так как мы
просто сделал, как я сказал, что это
используется для компиляции всего тестового извлечения
Я никогда не использовал это так сейчас
давайте посмотрим в общей папке
у меня есть файл index.html. Я просто
собираюсь избавиться от всех этих комментариев
сделать его немного легче читать
и в основном все, что нам нужно знать, это
что у нас есть div с идентификатором маршрута
и вот где все будет
быть выходной Alright вы можете пойти дальше и
изменить название, если хотите сказать проект
менеджер
и мы могли бы сэкономить , и теперь вы можете
см. заголовки, обновленные сейчас в
в исходной папке, где все
наш реакционный материал идет, если мы посмотрим на индекс
J s или импортировать реагировать на реакцию. У нас есть
основной компонент приложения, который мы
импорт, а затем этот индексный файл CSS
который нам не нужен, я собираюсь избавиться
из этого, а затем здесь мы делаем
наша реакция на рендеринг в основном
компонент приложения, а затем мы говорим, что мы
хотите , чтобы вставить его в в элементе
который имеет идентификатор корня, который мы просто
видел здесь в порядке , так что это , где это
выводя таким образом, что мы можем сэкономить, что мы
не нужно касаться индекса JSON или
index HTML теперь приложение J s — это в основном
шлюз к нашему основному компоненту приложения
поэтому мы импортируем реакцию на логотип и
Я собираюсь избавиться от этого я
будет поддерживать правильное импортирование CSS в приложении dot
здесь и тогда у нас есть класс с
функция рендеринга, которая возвращает это
здесь сейчас очень важно знать
что когда вы вернетесь в рендеринг,
все должно быть в пределах одного
Я не мог бы иметь другой div
прямо здесь и вернем, что все в порядке
очевидно, мы можем иметь столько элементов
как мы хотим внутри главного div, но вы
может иметь только один div в самом
очень верхний уровень все прямо сейчас я собираюсь
чтобы избавиться от всего здесь , за исключением
это это Див хорошо и давайте только для
теперь мы просто скажем, что мое приложение в порядке
сохраните это, а затем давайте избавимся от этого
Логотип SVG вам не нужен, а затем
app CSS Я просто собираюсь очистить все это
и сохранить его, так что теперь у нас просто есть
мое приложение все в порядке я собираюсь открыть
консоль хром-инструментов, потому что
мы будем работать с этим совсем немного
так что теперь у нас есть пустая реакция
по существу сейчас для этого основного приложения
Я обычно использую его как вид
заполнитель для всех наших других
компоненты
мы можем импортировать их, и мы можем их разместить
прямо здесь, в рендере, чтобы мы пошли
иметь папку внутри источника
папка называется компонентами в порядке, и мы
собирается создать новый файл там и
мы будем называть этот проект CAS
хорошо, так что это будут наши проекты
компонент, и он будет отвечать за
перечисляя все наши проекты в порядке сейчас
Я собираюсь скопировать все, что у нас есть
app J s, потому что нам нужен тот же базовый
нам не нужен CSS, мы только
необходимо включить это в основное приложение
компонента, то мы собираемся изменить
класс для проектов, убедитесь, что мы экспортируем
что здесь , так что мы можем использовать его в
в других файлах этот div изменит
класс к проектам, и давайте просто скажем, что мой
проекты на данный момент хорошо, поэтому мы сэкономим
это, а затем мы вернемся в приложение
угадать и позволить нам импортировать проекты из и
это будет в компонентах
папки слэш проекты нормально нам не нужно
J s в конце, а затем здесь мы
может просто вводить проекты в порядке, как
мы бы сохранили XML или HTML, мы сэкономим
что и теперь вы можете видеть, что мы
получить мои проекты, чтобы все, что мы поставили
в компоненте проектов будет
вывод здесь, мы можем пройти
свойства, если мы хотим этого для
если мы скажем тест и установим это для
скажем, привет мир, а затем в
проектов, мы должны быть в состоянии просто пойти
например, я поставлю эту переменную и
тест не определен, потому что он
должен быть этот точечный реквизит dot test ok и
то мы получим привет мир все в порядке только
чтобы показать вам, что мы можем сделать это сейчас
Идея , что я хочу сделать здесь все
наши проекты будут проводиться в
все в порядке, где наши данные
необходимо провести
Обычно я привожу его с некоторых
вид API или базы данных, а затем
в нашем государстве, но мы просто собираемся положить
прямо в нашем государстве, так что мы хотим сделать
мы хотим создать конструктор так
прямо над рендером, мы хотим
Конструктор все в порядке , и это где
мы хотим определить наше начальное состояние
состояние клавиш , так что если мы говорим , это начинается
государство равно, и мы хотим установить проекты
и тогда проекты будут
массив объектов
все в порядке, поэтому каждый будет иметь заголовок
так скажем , бизнес — сайт , а также
категория мы будем всего лишь веб-дизайном
так что есть один проект, давайте скопируем
это, и это сделает три, так что бизнес
веб-сайт, тогда мы будем делать социальное приложение и
эта категория будет, скажем, мобильной
развития, а затем давайте делать электронную торговлю
корзина для покупок, а затем эта категория
будет веб-разработка прямо сейчас, мы
хочу принять это состояние, и мы хотим
передавать его в проекты как собственность
право так в основном вы хотите все
в верхней части вашего приложения в состоянии
а затем передать его другим
компоненты через свойства все в порядке
данные должны быть неизменными,
перейдите сверху вниз, давайте передадим его в
как проекты, и мы должны быть в состоянии сказать
эта точка точка точка проектов в порядке, так
теперь, если мы пойдем, мы получим ошибку
здесь и он говорит, что это запрещено
прежде чем супер, причина в том, когда
мы делаем, когда мы помещаем конструктор, и мы
нужно вызвать супер, как это сохранить его и
что сейчас уходит в проектах
если мы идем в рендеринг, но не в
вернуться и мы делаем консультироваться журнал и мы
скажите, что это точка реквизит
теперь, когда я перезагружаюсь, вы увидите, что мы получаем
свойства, и у нас есть эти проекты
с массивом со всеми нашими проектами
поэтому теперь мы можем получить доступ к этому из
компонента проекта, когда у вас есть
массив таких объектов, как вы, обычно
хотите создать отдельный компонент для
каждый отдельный элемент, а затем вы хотите
в основном отображать эти проекты
и вывести этот компонент, чтобы мы пошли
идти вперед, а в компонентах мы будем
создать новый файл, называемый элементом проекта
Jas все в порядке , мы будем копировать
все, что у нас есть в проектах, вставьте его
там, и мы изменим это на
проекта и ниже, убедитесь, что вы
изучить проект сейчас
это я не хочу возвращать div I
на самом деле хотите, чтобы это было в порядке литий каждый
один будет завернут в Ли, и мы
дать ему класс проекта и
образом , если вам интересно , почему это
имя класса, потому что в JSX есть
не может использовать классы и атрибуты всех
правильный класс или если вы используете
формы с ярлыками, которые вы не можете использовать для себя
должны использовать HTML 4 в порядке, просто попробуйте
и помните, что
поэтому на самом деле вы знаете, что мы будем
оставьте это, как сейчас, а затем давайте
вернуться к проектам , и то , что мы хотим
давайте посмотрим, что мы хотим попытаться подумать
о том, как я хочу это сделать, давайте рассмотрим выше
рендеринг и давайте просто создадим
переменная, называемая элементами проекта, а затем
мы хотим проверить , есть ли какие-либо
проектов, так что сделайте здесь инструкцию if
мы скажем, если эта точка реквизит точек проектов
то мы хотим взять эти объекты проекта
переменная, и мы хотим установить это для этого
Точка реквизит dot проекты dot map ok, так как
это массив, который мы хотим сопоставить
так что здесь мы собираемся использовать
arrow вы можете использовать обратный вызов
но я хочу сохранить это в основном в
es2015, поэтому здесь мы хотим сделать
прежде всего давайте сделаем консольный журнал и
убедитесь , что мы действительно получаем
каждый проект в порядке, поэтому давайте посмотрим неожиданный
токен ожидаемых круглых скобок, о, я положил это
в неправильном месте это должно быть
внутри рендеринга, поэтому мы собираемся
здесь все в порядке, так что теперь здесь
вы можете видеть, что он регистрирует каждый
это работает или получается каждый
индивидуальный проект, который мы хотим
прокомментируйте это , и мы хотим вернуться
и здесь мы собираемся поставить
компонента компонента проекта
то мы хотим передать в каждом проекте, как
свойство хорошо так мы присваиваем
каждый элемент проекта соответствует этой переменной
здесь, так что здесь мы должны уметь
просто введите объекты проекта, и мы сохраним
это хорошо, поэтому нам также необходимо импортировать
компонент элемента проекта, который мы создали
так сказать, импортировать проект из точки
элемент проекта «слэш» в порядке, теперь мы
получение этой ошибки, в которой говорится, что каждый ребенок
в массиве должен быть уникальный ключ
так что это не ошибка, это
но это хорошая идея добавить
ключ к нашему элементу проекта прямо здесь
обычно, если у вас есть идентификатор, который вы бы использовали
что, но мы просто
название проекта в порядке, теперь ничего не происходит
здесь, потому что, если мы войдем в
элемент проекта мы ничего не поставили
здесь еще так давайте ставим пром
мы должны получать проект как
собственность, которую мы прошли в порядке
здесь мы передаем его как собственность
так что, скажем, этот точечный реквизит
а затем мы также
категории, так что этот точечный реквизит dot project
все правильно, мы сохраним это
и теперь вы можете видеть, что мы выводим все
наши проекты наряду с категорией
все в порядке, давайте обернем это сильным
пометить все правильно и поместить двоеточие в порядке
поэтому он выглядит не очень хорошо, но
работаем мы поглаживаем, мы в основном
настройка нашего состояния в нашем главном приложении
компонент нормально, у нас есть состояние, называемое
проекты, которые мы передаем в проекты
как собственность, а затем внутри проектов
были отображены через этот массив и
мы выводим элемент проекта
компонент, который имеет каждый проект, где
мы выводим название и категорию
хорошо так что надеюсь , вы можете увидеть , как
это идет вместе сейчас одна вещь , которую я
хочу упомянуть приложение j / s в нашей
конструктор, мы устанавливаем состояние this
обычно не там, где вы хотите установить
фактические данные, которые вы хотите определить
состояния и ключей, но не
данные, для которых вы хотите использовать
жизненного цикла, и вы, вероятно, хотите
использовать компонент будет хорошо, так скажите
компонент будет монтироваться
и это фактически должно быть уменьшено
так что это метод жизненного цикла, который он запускает
когда каждый компонент
переделано так вот, возьмем эти
и вырезать их, мы хотим сохранить
проектов, но так же, как пустой массив в
это в конструкторе здесь мы
хочу сказать, что эта точка устанавливает состояние передачи
объект, и мы скажем проекты, которые
это массив, а затем мы вставим
данные в так все в порядке , так что давайте идти
вперед и спасти , и теперь вы будете видеть
он все еще функционирует, но это всего лишь
лучший способ сделать это, чем иметь его в
конструктор вроде этого все правильно и
когда вы, например,
ajax call, если вы извлекаете данные из
из внешнего api вы хотите сделать это
в этом жизненном цикле, а также
этот или компонент был установлен, и если вы
перейдите в документацию для
см. все методы жизненного цикла и
в какое время они выносят или сжигают
поэтому теперь мы хотим сделать, это добавить
формы, чтобы мы могли добавить к нашему состоянию так
мы можем добавить проект, поэтому давайте создадим
другой компонент, и мы будем называть его добавлением
project dot J s, и давайте скопируем то, что мы
в проектах хорошо мы будем вставлять это и
мы можем избавиться от этого я собираюсь
изменить имя, чтобы добавить проект, избавиться
из этого измените это здесь, чтобы добавить
Проект все прямо сейчас давайте посмотрим , что делать
мы хотим сделать здесь, давайте сохраним
div Я собираюсь избавиться от класса
имя, и мы положим h3 здесь say add
проект
все в порядке, давайте просто сделаем так, чтобы мы могли
вставьте это в наши основные компоненты, чтобы
мы собираемся пойти в приложении J с и импорт
это точно так же, как мы делали с проектами все
вправо , а затем здесь мы поместим его
прямо над нами просто заменить это мой
приложение сохранит это, и теперь мы выводим
добавьте компонент проекта, чтобы мы захотели
это форма
хорошо, поэтому мы поместим тег формы и давайте
поставьте здесь div, это будет иметь
метка названия и тип ввода будут
‘, и мы собираемся дать это
атрибут называется ref, и это будет
помогите нам получить значение, когда мы отправляем
форма теперь вы должны иметь эту косую черту
здесь вы не можете использовать синтаксис html5 или
вы получите сообщение об ошибке в ref
давайте просто поместим заголовок все правильно, давайте
также ставьте здесь и снова, вы должны
сделайте свою косую черту, давайте скопируем эту пасту
что в то время это будет
но я хочу, чтобы это было выбрано
хорошо, поэтому мы скажем, выберите это также
иметь ссылку на категорию
все прямо сейчас, что я хочу сделать, это я
хотите, чтобы категории были имуществом
компонента прямо сейчас мы можем
задайте свойства по умолчанию, если мы перейдем
рендеринг, и мы будем говорить о статическом
по умолчанию, и мы хотим установить это для
объект и зададим категории для
массив, и мы скажем веб-дизайн web
развитие и мобильная разработка в порядке
и тогда мы хотим, чтобы мы хотели
на карту через них , а затем выводить
варианты, чтобы мы пошли выше
вернуть и отдать и сказать, пусть категория
варианты, которые мы установим для этой точки реквизита
потому что теперь мы можем получить доступ
это, а затем мы хотим называть точечную карту
все в порядке , а затем здесь будет оставаться
мы будем использовать функцию стрелки и
то мы хотим вернуть вариант, который мы
чтобы дать ему ключевую категорию и
значение категории, а затем мы также хотим
открыть категорию здесь все правильно, так что
теперь мы должны просто использовать это
варианты категории прямо здесь
ладно, давайте попробуем это, и мы пойдем
поэтому теперь мы выводим все
категорий, исходящих из
недвижимости здесь, чтобы отправить
что мы собираемся сделать, это
тег формы, мы добавим обработчик
призвал отправить в порядке , мы имеем на
отправить на клик есть целая куча
из них, поэтому мы хотим положить некоторые кудрявые
скобки и, допустим, эту метку точки
отправить все права, чтобы этот дескриптор
мы можем создать прямо здесь и просто
чтобы показать вам, давайте сделаем console.log и
мы просто скажем, поданный сейчас, я не
думаю, что это будет работать, но о, мы
даже не поставил кнопку отправки, так что нет
это не будет работать.
значение подавать в порядке, поэтому, если мы пойдем, когда мы
попробуйте представить это, вы увидите, что это
не консольный журнал здесь, потому что
он фактически представляет форму,
мы хотим сделать, это передать событие
параметр здесь и тогда, как и в
JavaScript или некоторые другие библиотеки мы
может использовать префикс для предотвращения по умолчанию и
будет препятствовать форме на самом деле
так что теперь, если мы это сделаем, вы можете
см. здесь, мы получаем наш консольный журнал сейчас
что мы хотим сделать, мы хотим сохранить
данные , которые мы представляем в состояние
поэтому мы добавим конструктор вверх
наверху
все в порядке и в конструкторе у нас есть
называть нашу суперфункцию, а затем
мы собираемся сказать это состояние точки и
у нас будет новый проект, который
будет объект , поэтому мы не хотим
чтобы заполнить его здесь, что мы хотим сделать, это
установить его, когда это отправлено
все сейчас, чтобы получить значения
форма, которую мы можем использовать, что refs
атрибут все правильно, давайте пусть некоторые
скажем, консоль dot log this dot refs dot
title dot value okay, так что теперь, если я напечатаю
что-то здесь и представить, что это
не работает, посмотрим, что я делаю неправильно
ref title
о, это не значит, что это мы
на самом деле необходимо связать его через
ручка отправить сюда или просто сказать точку
свяжите, а затем передайте это, так что теперь мы
submit вы можете видеть, что это консоль
записывать все, что я ставлю в заголовке сейчас
мы не хотим , чтобы они были в состоянии представить
пустой заголовок, чтобы мы могли фактически сделать
здесь мы скажем немного
если это контрольное значение заголовка равно
ничего, что мы хотим предупредить, и мы будем
говорите, что заголовок требуется все в порядке, а затем
у нас будет еще один, а затем мы сделаем то, что
мы хотим сделать это, если мы сохраним это, и мы
попробуйте представить, мы получаем предупреждение сейчас
если все сработает или если есть
Название мы хотим , чтобы установить состояние мы хотим
чтобы поместить данные в это значение так, чтобы
мы сохраним это состояние набора точек, и мы
хочу перейти сюда новый проект
и установите это для объекта, и давайте посмотрим
мы собираемся установить заголовок этой точки
refs dot dot dot value, а затем
категории к этой точке Refs
значение категории, чтобы установить
для нас сейчас, когда мы используем этот набор
что он может принимать второй параметр
который будет идти прямо здесь мы положить
запятая, и это будет обратный вызов
функции все в порядке, а затем вот давайте
сделать журнал консоли и войти в состояние
так что давайте сохраним это, и давайте просто скажем
тестовый веб-дизайн, а затем он дает
нам государство, у которого есть новый проект
с этими данными
теперь я должен был бы
упоминалось ранее, что государство в этом
компонент отличается от состояния в
основной компонент приложения подходит каждому
компонент имеет свое собственное состояние, но то, что мы
хочу сделать, это взять данные, которые мы отправляем
и передать его в основное приложение
компонент и сохранить его в сети в
это то, что мы можем сделать, мы можем
отправить его через собственность в порядке
через функцию внутри свойств
так что мы сделаем это , чтобы прокомментировать это
мы скажем, что этот точечный реквизит dot добавить проект
хорошо, а затем мы пройдем новый
сейчас, так как мы сделали это, мы должны
иметь доступ к этому из основного
, поэтому мы пойдем туда , где мы
есть проекты, мне жаль, добавь
проекта, и мы собираемся поставить
собственность, что мы называем это добавить проект
поэтому мы хотим использовать это прямо здесь
поэтому добавьте проект равным, а затем мы хотим
функционировать, чтобы справиться с этим, чтобы эта мысль
ручка добавить проект все в порядке , и мы
должен просто привязать это, а все правильно
и тогда мы создадим это прямо здесь
ручка добавить проект, который
проекта, и просто сделаем консольную точку
войдите, чтобы убедиться , что это работает
все в порядке, давайте посмотрим, что это за новый
проект не определен, давайте посмотрим, о, я
прошел новый проект, на самом деле это
государство, поэтому мы хотим сказать, что это начинается
state dot new project, так что теперь, если мы поставим
что-то здесь и представить эту точку
реквизит добавить проект не является функцией
давайте посмотрим, как эта точка точка-точка добавить проект
о, это должно быть прописным.
пойдите хорошо так теперь мы представляем это
мы передаем его этому компоненту
и консоль регистрирует его сейчас здесь, что
мы хотим сделать это, мы хотим добавить его в
состояние основного компонента в порядке
поэтому мы можем просто дать понять, как реагировать
заявить, что ваше состояние является неизменным значением
что вы не хотите его менять
хочу в основном обновить его, чтобы мы захотели
получить все, что в нем,
он подталкивает к нему новый проект, а затем
установите его снова, чтобы сделать это, мы скажем, пусть
проектов, мы установим это для этого запуска
государственные проекты точек, поэтому мы захватываем
что уже есть, а потом давайте
что и подтолкнуть к нему новый проект
и затем мы сбросим его, чтобы мы сказали:
это точка устанавливается состояние, а затем мы скажем
проекты проекты в порядке, поэтому давайте
сохраните это, а теперь, скажем, тестовую сеть
развитие подчиняется, и там это ох
говорит, что это неправильно, так что
посмотрим, что пошло не так, если мы пойдем
добавить проект прямо здесь значение
категорию, которую необходимо обернуть
фигурные скобки вы , ребята , наверное , видели , что
уже все в порядке, так что и мы там
идти мы говорим тест, чтобы выбрать мобильный
development submit, теперь мы можем добавить
проектов сейчас это не получится
когда я перезаряжаюсь, как я сказал
в начале реагировать для пользователя
интерфейсов это не он не собирается
сохраняйте данные, и теперь мы можем установить их
нажимать на какой-то API или, может быть,
локальное хранилище или что-то еще
что , но мы хотим , чтобы сосредоточиться только на
пользовательский интерфейс, и это
что здорово реагировать на то, что ваш
back-end полностью разделен, поэтому мы
это может пойти на локальное хранилище и
то мы могли бы легко заменить его
скажем , MongoDB или что — то подобное
отлично
Я собираюсь поставить курс выше этого, чтобы
это не так скручено вместе, поэтому
проекты, которые мы ставим h3 , просто скажут
последние проекты все в порядке , я положил
разрыв строки ниже этого входа , а также
oops Я собираюсь положить это прямо здесь
хорошо, поэтому он выглядит не слишком хорошо, но
это прекрасно, мы не фокусируемся на этом
так что теперь я хочу, чтобы я хотел
показать, как мы можем удалить их сейчас
изначально у нас нет, если мы посмотрим на
в нашем государстве наши проекты у нас нет
ID, и это хорошая идея иметь идентификатор
уникальный идентификатор, и на самом деле есть модуль
мы можем использовать UUID
поэтому давайте не будем знать , где они
документация для него, но мы собираемся
идти вперед и устанавливать это, и это просто
генерирует уникальный идентификатор для нас, это
действительно простой модуль, поэтому мы собираемся
продолжайте и просто прекратите это с помощью ctrl C
и установить NPM — — сохранить UUID
хорошо, а затем мы просто перезапустим NPM
Начало
и мы собираемся приехать сюда и
принесите это, чтобы импортировать UUID из UUID
и тогда мы просто пойдем сюда, мы будем
назначить идентификатор UU ID точка V 4 , который представляет собой
поэтому каждый раз, когда мы используем это, он будет
генерировать новый идентификатор , так что мы хотим один для
здесь и здесь тоже хорошо, а потом, когда
мы добавляем проект, который мы также хотим сделать
то же самое мы хотим добавить ID, чтобы мы
импортировать все правильно, мы будем использовать это право
здесь, где мы устанавливаем состояние для нового
ID проекта dot d4 так же, как и
который будет генерировать уникальный идентификатор для всех нас
правильно и просто, чтобы убедиться, что мы
на самом деле получить удостоверение личности, перейдем к нашей
проекта, и мы заменим это
название с идентификатором, и вы можете видеть, что это
выводя уникальные идентификаторы в порядке, я поставлю это
назад я хочу, чтобы иметь возможность удалить
поэтому перейдем к пункту проекта, где
мы сейчас собираемся поставить ссылку на
конец здесь
теперь ссылка на самом деле не идет
идти куда угодно, мы хотим поставить событие
Мне жаль, что обработчик события вызвал
нажмите, и мы установим это, чтобы увидеть
что я хочу установить для этой точки
Удалить проект все в порядке мы собираемся
do dot свяжите это также, а затем мы
собираюсь создать это прямо здесь
whoops не обрабатывает то, что было удалено
удалить проект
и давайте просто сделаем тест console.log.
чтобы убедиться, что он действительно работает
давайте откроем нашу консоль, если мы нажмем
что мы получаем тесты, мы хотим это сделать
та же идея , что мы хотим , чтобы нажать на нее в
этот компонент, но мы хотим его пропустить
к основному компоненту, а затем выполните
окончательное удаление там сейчас, так как мы в
элемент проекта был фактически двумя
компонентов глубоко, поэтому нам нужно его отбросить
проекты , а затем передать его на
основной компонент приложения прямо сейчас, чтобы сделать
что мы собираемся установить свойство this
точка опоры точка , и мы будем называть его
удалить, а затем мы просто хотим пройти
Идентификатор теперь должен пройти по
ID через эту функцию мы собираемся
идите после этого здесь, здесь введите запятую и
то мы собираемся сохранить эту точку
реквизит простейшего идентификатора точки справа, а затем
мы должны иметь доступ к нему через
здесь и тогда мы пройдем все это
так что давайте сохраним это, а потом мы
собираемся пойти на проекты J s и пойти в
где у нас есть элемент проекта , который
прямо здесь, и давайте посмотрим, что мы хотим добавить
на удаление здесь, а также сказать эту точку
удалить проект
покупая это, и мы также хотим создать
функция здесь удаляет проект
хорошо принимает идентификатор, а затем снова мы хотим
сделать это dot prop dot on delete pass
в ИД все в порядке, так что теперь мы проходим
это до основного компонента так вниз
где у нас есть проекты, которые мы хотим пройти
in on delete okay, мы установим это на этот
dot дескриптор удалить проект, и мы сделаем
dot bind, а затем передать это, а затем
как и мы с ручкой добавляем проект
мы собираемся добавить обрабатывать удаление проекта
все в порядке, что будет в ID
и тогда идея такая же, как с добавлением
проект, который мы хотим получить от государства
и затем мы хотим удалить проект
мы хотим, а затем переустановим состояние, пока вы
могли бы сделать это по — разному мы могли
используйте цикл for или что-то в этом роде
но мы будем использовать индекс поиска
допустим, пусть индексируем, и мы установим, что
к проектам dot find index и пройти в
здесь X, поэтому X dot ID и в основном что
это делается, это будет смотреть
все проекты, которые он найдет
идентификаторы и сопоставить их с текущим идентификатором
это передается в порядке, если это
матчей и он собирается получить положить в
индекс, то, что мы хотим сделать, — это
скажем, точечное сращивание, где этот индекс и
мы хотим удалить один из них, а затем
мы просто хотим сбросить состояние просто
как мы все сделали правильно, давайте
кроме того, что теперь мы должны быть в состоянии
нажмите X на одном из них и удалите
Это
хорошо, поэтому мы можем теперь добавлять проекты, и мы
может удалить их, чтобы мы в значительной степени
там, насколько все основы друг друга
вещь, которую я хочу показать, это типы prop
который является своего рода видом
валидация для наших свойств, поэтому для
пример давайте посмотрим, что у нас нет
основной компонент приложения, но если мы войдем в
проектов в наш проект, мы
есть ли у нас сами проекты,
свойство, а затем мы имеем функцию
на delete, которое является свойством, поэтому, если мы
хотите добавить подтверждение для
те, кого вы можете спуститься под класс
а затем скажем, что проекты типа dot prop и
скажем, проекты, и это массив
поэтому мы хотим убедиться, что он
отформатирован как массив
так что, если мы говорим , реагируют точечный гребной винт типа
dot, а затем мы удалим
которая является функцией таким образом , мы можем сказать , реагировать
dot prop типы dot func
теперь, если мы сохраним, что ничего не происходит
потому что это правильно , но если бы мы
скажем, проекты, если мы хотим формат
это как строка, если она должна быть
строка теперь мы получим ошибку
говоря, что проекты типа массива
Ожидается, что строка будет хорошо, поэтому
фактически не останавливает его от работы
но это дает вам это предупреждение
сообщая вам, что это свойство является
неправильный тип все правильно, так что это хорошо
практика, чтобы сделать это хорошо, теперь давайте скопируем
это и сделаем это для элемента проекта
также
элемент проекта, который мы снова имеем для удаления и
то у нас есть проект, который является
так что давайте пойдем сюда, и мы будем
измените это на элемент проекта
dot prop, и у нас есть проект, который
это нормально, поэтому мы хотим сделать это
а затем удалить, что, конечно, является
функция сохраняет, что ошибок нет
потому что теперь все правильно, мы будем
сделать то же самое для добавления проекта, чтобы добавить
проект, мы посмотрим, что у нас есть
категории, которая является собственностью и
это массив, поэтому мы собираемся сохранить
это, а затем мы добавим проект, который
где он находится прямо здесь, этот точечный реквизит
dot добавить проект, который работает нормально
так что нужно это делать, и там мы идем сейчас
Я также хочу показать вам, как мы можем
в других данных от внешнего API
поэтому я собираюсь закрыть все это, кроме
для приложений J s и в основном, что я хочу
do — это API-интерфейс разработчика под названием Jason placeholder
и давайте посмотрим, что хочу получить некоторые взносы
поэтому вы можете увидеть здесь, если мы нажмем на это
он дает нам API, где мы можем получить JSON
форматированные — счисления с идентификатором заголовка и
так и мы можем сделать запрос на получение
что — взносы так в нашем заявлении мы
хотите сделать запрос на жизненном цикле
функция, называемая компонентом,
мы добавим, что здесь
хорошо, мы должны положить это в оба
компонент сделал mount и компонент будет
mount, поэтому я собираюсь создать
функция, называемая get to Do’s и let’s
видеть , что мы будем хотеть работать , что в
оба из них так давайте пойдем сюда и скажем
это точка добраться до сборов , и мы также хотим
запустите это здесь и там, где мы положим
этот проект в штате я также хочу
создать функцию , которая отдельно
называемые проекты получения, а затем все, что мы
собираюсь сделать это захватить это вырезать его и
поместите это здесь, а затем мы назовем это
здесь просто сделайте вещи немного опрятными
хорошо все должно работать
хорошо сейчас, чтобы получить взносы, это то, где мы
хочу сделать наш запрос сейчас, мы можем использовать
много разных модулей для создания протокола HTTP
Я просто собираюсь использовать jQuery
все в порядке, давайте продолжим и установим
jQuery через NPM, и вы можете использовать Axios
хороший супер-агент — еще один
но я просто хочу, чтобы это было просто так
давайте продолжим и импортируем jQuery здесь
мы скажем импортный знак денег из jQuery
а затем отступить и получить взносы или
он здесь мы будем говорить JQuery
dot H ax, и мы хотим перейти сюда
URL теперь URL будет от
jason place holder, который будет таким
мы скопируем это
вставить , что в типе данных собирается
будь Джейсон, скажем, я собираюсь остаться
наличные ложные, и тогда у нас есть наш успех
хорошо, если все будет хорошо, это будет
и который принимает данные, которые
вернулся, а затем у нас также есть необходимость
связать это так же, как мы делаем с
другие — другие функции, которые мы
скажем, свяжу это, а потом мы
поместите запятую, и тогда у нас будет
наша ошибка в случае ошибки все
и тогда для этого
взять власть, на самом деле это собирается
взять пару вещей, которые он собирается
взять восемь и xhr статус и ошибку
и тогда все, что мы хотим сделать здесь, это
Теперь консольная точка регистрирует ошибку, если
все идет хорошо, мы хотим взять
данные, которые возвращены и помещены в наш
состояние в состоянии здесь, давайте добавим
— duze, который будет пустым массивом и
то здесь мы можем сказать, что этот набор точек
и мы скажем — дуэты, и мы установим
что данные все в порядке , а затем
давайте обратный вызов , а затем мы можем
проверьте состояние, чтобы консольная точка записывала это
точка, так как мы можем сделать это
работающих в этих жизненных циклах
должен запускаться сразу, когда приложение загружается так
давайте вернемся туда и откройте
консоли, и если мы посмотрим на объект, мы
конечно, есть наши проекты, а затем мы
есть 200 — дуэтов, хорошо, что это
входящий в этот API, так что это просто
так как для ввода данных извне
источника и помещать его в наше государство и
то мы можем использовать это в остальной части нашего
заявление
и я думаю, мы можем сделать это
быстро создадим еще один компонент
призванный делать zjs, и мы также создадим
один призвал сделать элемент J s, и мы
собираемся сделать то же самое, что мы
сделал с проектами , поэтому я собираюсь
копировать то, что у нас есть в проектах, и вставлять
что делать ZJS хорошо мы будем
измените много этих двух, чтобы сделать это
будет делать, я не собираюсь делать
удалять и добавлять, хотя я просто хочу
перечислите их, чтобы мы избавились от этого .
измените это, и я знаю, что я двигаюсь
быстро, но я просто хочу, чтобы я не хотел
это слишком долго , теперь мы будем
переходят в сборы как свойства так же, как мы
сделал здесь, а затем мы скажем, чтобы делать предметы
этот точечный реквизит dot to dues dot map okay
то здесь мы собираемся вернуть
Дела компонентам детали мы не нужны
на удаление , и я считаю , что двойки имеют
название давайте проверим это, да, они
название и идентификатор, чтобы это можно было сделать
точка, чтобы сделать oops
все в порядке, измените это, просто скажем
список дел, а затем для
мы не нуждаемся в удалении
а затем давайте убедиться, что мы экспортируем в
сборы все в порядке , так что давайте экономить , что и
то в текущих дел пункта мы будем копировать
что у нас есть в палитре элементов проекта,
в порядке, нам не нужно удалять
здесь назовем это, чтобы изменить, что мы
не нужна категория, поэтому давайте избавимся
о том, что это просто будет
нам не нужна ссылка для удаления изменений
что
все в порядке, поэтому мы сохраним это и давайте
см. сейчас в главном компоненте приложения, который мы
собираются импортировать обе из них:
фактически мы собираемся импортировать
все правильно, и тогда мы добавим, что
вниз, давайте поместим HR для сохранения и
Вероятно, у меня ошибка
мы ничего не выводим, и это
потому что мы не прошли ничего в к
сделаем это, мы хотим пройти по двум взносам
что у нас есть состояние, поэтому мы скажем это
точка точка точка две сборы сохранить его и там
они так поступают из
этот API, чтобы вы могли видеть, что это легко
вытащить данные и просто привести их в нашу
и затем опубликовать его до
компоненты через свойства, и мы
сделал запрос на получение, но, конечно, мы
также могли бы делать запросы по почте, и мы
может передавать данные в pis во внешние
базы данных и так далее в порядке , так что это
получив вид долго, поэтому мы собираемся
идти вперед и остановиться здесь мы рассмотрели довольно
много всех оснований реакции я делаю
надеюсь , что вы , ребята , узнали что — то и
наслаждался этим, я получу этот код
github и я также предлагаю проверить
из десяти сценариев реагирования проекта, которые
Я буду готов через неделю или около того, а потом
также у меня есть более простой ввод, чтобы реагировать
курс, а также курс потока реагентов
ладно, спасибо за просмотр, и я
увидимся в следующий раз
Конечно, в этом видео мы собираемся посмотреть
на входах и выходах реагируют Дж / с хорошо
и реакция на самом деле одна из моих любимых
технологии, с которыми я работал
в последнее время, и если вы его не использовали, я
определенно предлагать действительно изучать
потому что он может изменить способ
вы думаете о пользовательских интерфейсах и работе
с пользовательскими интерфейсами Я работаю над 10
проект протекает сейчас, как только
это доступно. Я поставлю ссылку в
в описании у меня также есть введение
реагировать и реагировать и поток
проект, чтобы вы могли проверить, как
ну хорошо теперь мы будем прыгать в
и посмотрите на какой-то код, но я хочу
просто переходите по-настоящему быстро, я просто
в основном, что такое реакция, и некоторые из его
преимущества
хорошо, так что это с открытым исходным кодом
Библиотека JavaScript для построения динамических
пользовательских интерфейсов, и у него нет
ничего общего с бэкэндом ваших
приложение, работающее с базой данных и
так на это это в основном V в MVC а
и Model View Controller это
Поддержка Facebook Instagram а
сообщества индивидуальных разработчиков
некоторые преимущества реакции позволяют
для разработки простых декларативных представлений для
каждое государство в вашей заявке, если вы
не знаю, что я имею в виду по состоянию, если мы
подумайте о почтовом клиенте при просмотре
ваш почтовый ящик, который считается государством, если
вы должны были нажимать, а затем
редактор открывает это другое состояние, поэтому
реагирует на эти состояния и позволяет вам
для создания и управления представлениями и
компоненты для них хорошо так
все в представлении инкапсулировано в
компонент и эти компоненты могут
имеют свои собственные свойства и
хорошо , если вы хотите , чтобы попасть в более
сложное приложение
может смотреть на поток или редукцию, которая
архитектуры приложения, но это
немного сложнее, чем я хочу
сегодня влезть, так что мы будем
строго говоря, реагируя на Джаса
реагирует на использование так называемого виртуального Dom
или объектная модель виртуального документа я буду
поговорите об этом через минуту, но
в основном это позволяет работать с и
делают только некоторые части Dom
что вам нужно еще одно большое преимущество
реагируют, это полностью не зависит от
остальное приложение, как я сказал, чтобы вы
может использовать его практически в любом другом
рамки или любую другую технологию, которая
Вы хотели бы это также может оказать на
клиента или сервера, вы можете использовать его с
nodejs и NPM
а также просто включить его в
скриптовый тег и его использование прямо под HTML
файлов, так как я сказал, что реакция использует виртуальную
Дом и она в основном абстрагирует
Dom и создает свою собственную версию, которая
упрощается и включает только вещи
что вам все нужно, это также помогает нам
определить , какие части были изменены так
когда вы обновляете свой компонент
так или иначе, и вы хотите
сделать это вместо того , чтобы обновлять
реакция всего приложения может
посмотрите, что изменилось и посмотрите на
оригинал Dom, а затем просто re render
той части, которая должна обновиться
поэтому он определяет, как загрузить
браузера Dom более эффективно, и это
также гораздо более легкий и
делает работу намного быстрее , все в порядке , так
давайте рассмотрим чрезвычайно простой
приложения или чрезвычайно просто
компонент, называемый приветственным сообщением, и вы
может видеть, что в основном у нас есть класс
вызванное приветствие, которое расширяет реакцию
компонент и внутри здесь мы имеем
метод или функцию, называемую render, которая
это единственная функция, которая на самом деле
требуется в компоненте , вы знаете
еще много, и вы можете создавать собственные
функции, но требуется рендеринг, и вы
может видеть, что мы возвращаем то, что выглядит
элемент HTML это на самом деле JSX
ok Java- скрипты нетронутые расширения, которые
Я поговорю обо второй
в основном то, что мы делаем , говорит
привет, и тогда у нас есть эта точка
имя свойства или точка реквизита
так что теперь это свойство компонента вниз
здесь мы используем реакцию Dom для рендеринга
это вы можете видеть, что мы используем этот привет
сообщение , которое является именем из
компонент, и мы передаем
свойство называется именем со значением
Джейн все в порядке , так здесь будет
показать все, что мы здесь передаем,
это Джейн, и тогда этот параметр
мы хотим вставить компонент в наш
HTML, поэтому обычно у вас есть div с
Идентификатор застывания маршрута или что — то вроде
это и вы вставляете вставить его
прямо там, так что JSX стоит
для расширения синтаксиса JavaScript и
шаг препроцессора, который добавляет xml к
JavaScript выглядит так же, как XML или
HTML есть несколько отличий и
они пойдут позже, но
в основном он определяет знакомый синтаксис
для определения древовидных структур с
атрибутов, и это не требуется, но
определенно рекомендуется и maich вещь
делает вещи намного проще, а позже я
может показать вам пример JSX, а также
JavaScript, который его генерирует, и вы
может видеть, насколько проще просто
используйте JSX, чтобы вы научились этому
мини-курс, как создать реакцию
приложение, как создавать компоненты
управлять состоянием и свойствами
мероприятия работают с формами и вводной работой
с JSX
мы рассмотрим некоторые из
методы жизненного цикла, а также способы извлечения
данные из API и привести его в нашу
компонента, достаточно
слайды, давайте вскочимся и создадим реакцию
приложение все в порядке , так что мы собираемся
вскочить и начать писать код
с реагируют Дж / с в настоящее время, насколько
приложение построит это очень
простое приложение для управления проектами, но я
не хотите, чтобы вы сосредоточились на
функциональность приложения , потому что
моя цель в этом видео , чтобы показать вам
разные части реагировать и учить
вы основываете
вы можете перейти к созданию собственного
приложений и идей, так что если я
перейдите на веб-сайт реагирования и нажмите, чтобы получить
Началось это, и мы обратились к простому приветствию
пример мира, мы хотим нажать на это
установочная ссылка прямо здесь и
есть несколько различных способов , многие
различные способы, которыми вы можете использовать, реагируют на вас
может даже включать два сценария
здесь отреагируйте j / s и отреагируйте Dom прямо в
ваш файл index.html и работайте с
но мы хотим быть немного более эффективными
и чистым, поэтому я использовал что-то
как веб-пакет или глоток вместе с
реагировать на плагины, но недавно они создали
этот инструмент для создания реактивного приложения
инструмент командной строки, который позволит вам
генерировать реактивное приложение только одним
команда все в порядке , так что это это
определенно, что я предлагаю использовать
он собирает все , что компилирует все
JSX вам не нужно беспокоиться о
что-нибудь действительно в порядке, так что мы собираемся
идти вперед и устанавливать это и
необходимо установить во всем мире
не должны быть установлены js так, если
у вас нет этого, обратитесь к node.js org
скачайте его, установите
дайте вам узел вместе с NPM в порядке
после установки узла мы будем
откройте командную строку и вы хотите
запустите npm install, убедитесь, что вы добавили —
g4 глобально, а затем создать — реагировать — приложение
хорошо я уже устанавливали это так
я не собираюсь запускать его, а просто идти
вперед и запустите это, а затем перейдите к
где бы вы ни хотели создать свой проект
Я нахожусь в своем C-диске в папке моих проектов
и тогда мы просто хотим запустить create —
реагировать на приложение, а затем название вашего проекта
хорошо, поэтому я собираюсь назвать этот проект
менеджер, это займет минуту или
два, поэтому я остановлюсь на этом
и я вернусь , когда это сделано хорошо
так что прошло около двух минут
мы хотим записать CD в менеджера проекта
и тогда все, что нам нужно сделать, чтобы запустить наш
приложение выполняет NPM, и
и если мы посмотрим здесь на самом деле, я
не знаю, показывает ли это нам, но строить
это для производства, мы можем просто запустить I
думаю, что это NPM run build, и это будет
просто скомпилируйте все, чтобы вы могли
просто возьмите его и загрузите в свой
сервер или что-то в этом роде, поэтому мы запустили
приложение , и это то , что мы получаем нормально
Хорошая маленькая целевая страница Я не хочу
держите любой этот материал, например,
Логотип и стиль , так что я собираюсь
откройте мою папку в текстовом редакторе и
Я использую атом, который я бы рекомендовал
для реакции развития я нахожу это действительно
действительно полезно выделить код
очень приятно, и я заметил, что с
возвышенный текст, он не подбирает JSX
очень хорошо, поскольку подсветка кода
но атом отлично работает с ним и
есть, вероятно, плагин вы можете использовать
для возвышенного, но я просто предпочитаю использовать
атом, так что я собираюсь просто добавить свой
папка проекта здесь, которая находится на диске C
проектов и менеджеров проектов, так что это
это то, что оно нам дало, так что у нас есть
наш пакет JSON-файл, вы можете видеть, что
мы используем реакцию прямо сейчас, это версия
пятнадцать пунктов три пункта два вместе с
отредактируйте « Дом», а затем начните наши скрипты
мы просто запустим приложение, так как мы
просто сделал, как я сказал, что это
используется для компиляции всего тестового извлечения
Я никогда не использовал это так сейчас
давайте посмотрим в общей папке
у меня есть файл index.html. Я просто
собираюсь избавиться от всех этих комментариев
сделать его немного легче читать
и в основном все, что нам нужно знать, это
что у нас есть div с идентификатором маршрута
и вот где все будет
быть выходной Alright вы можете пойти дальше и
изменить название, если хотите сказать проект
менеджер
и мы могли бы сэкономить , и теперь вы можете
см. заголовки, обновленные сейчас в
в исходной папке, где все
наш реакционный материал идет, если мы посмотрим на индекс
J s или импортировать реагировать на реакцию. У нас есть
основной компонент приложения, который мы
импорт, а затем этот индексный файл CSS
который нам не нужен, я собираюсь избавиться
из этого, а затем здесь мы делаем
наша реакция на рендеринг в основном
компонент приложения, а затем мы говорим, что мы
хотите , чтобы вставить его в в элементе
который имеет идентификатор корня, который мы просто
видел здесь в порядке , так что это , где это
выводя таким образом, что мы можем сэкономить, что мы
не нужно касаться индекса JSON или
index HTML теперь приложение J s — это в основном
шлюз к нашему основному компоненту приложения
поэтому мы импортируем реакцию на логотип и
Я собираюсь избавиться от этого я
будет поддерживать правильное импортирование CSS в приложении dot
здесь и тогда у нас есть класс с
функция рендеринга, которая возвращает это
здесь сейчас очень важно знать
что когда вы вернетесь в рендеринг,
все должно быть в пределах одного
Я не мог бы иметь другой div
прямо здесь и вернем, что все в порядке
очевидно, мы можем иметь столько элементов
как мы хотим внутри главного div, но вы
может иметь только один div в самом
очень верхний уровень все прямо сейчас я собираюсь
чтобы избавиться от всего здесь , за исключением
это это Див хорошо и давайте только для
теперь мы просто скажем, что мое приложение в порядке
сохраните это, а затем давайте избавимся от этого
Логотип SVG вам не нужен, а затем
app CSS Я просто собираюсь очистить все это
и сохранить его, так что теперь у нас просто есть
мое приложение все в порядке я собираюсь открыть
консоль хром-инструментов, потому что
мы будем работать с этим совсем немного
так что теперь у нас есть пустая реакция
по существу сейчас для этого основного приложения
Я обычно использую его как вид
заполнитель для всех наших других
компоненты
мы можем импортировать их, и мы можем их разместить
прямо здесь, в рендере, чтобы мы пошли
иметь папку внутри источника
папка называется компонентами в порядке, и мы
собирается создать новый файл там и
мы будем называть этот проект CAS
хорошо, так что это будут наши проекты
компонент, и он будет отвечать за
перечисляя все наши проекты в порядке сейчас
Я собираюсь скопировать все, что у нас есть
app J s, потому что нам нужен тот же базовый
нам не нужен CSS, мы только
необходимо включить это в основное приложение
компонента, то мы собираемся изменить
класс для проектов, убедитесь, что мы экспортируем
что здесь , так что мы можем использовать его в
в других файлах этот div изменит
класс к проектам, и давайте просто скажем, что мой
проекты на данный момент хорошо, поэтому мы сэкономим
это, а затем мы вернемся в приложение
угадать и позволить нам импортировать проекты из и
это будет в компонентах
папки слэш проекты нормально нам не нужно
J s в конце, а затем здесь мы
может просто вводить проекты в порядке, как
мы бы сохранили XML или HTML, мы сэкономим
что и теперь вы можете видеть, что мы
получить мои проекты, чтобы все, что мы поставили
в компоненте проектов будет
вывод здесь, мы можем пройти
свойства, если мы хотим этого для
если мы скажем тест и установим это для
скажем, привет мир, а затем в
проектов, мы должны быть в состоянии просто пойти
например, я поставлю эту переменную и
тест не определен, потому что он
должен быть этот точечный реквизит dot test ok и
то мы получим привет мир все в порядке только
чтобы показать вам, что мы можем сделать это сейчас
Идея , что я хочу сделать здесь все
наши проекты будут проводиться в
все в порядке, где наши данные
необходимо провести
Обычно я привожу его с некоторых
вид API или базы данных, а затем
в нашем государстве, но мы просто собираемся положить
прямо в нашем государстве, так что мы хотим сделать
мы хотим создать конструктор так
прямо над рендером, мы хотим
Конструктор все в порядке , и это где
мы хотим определить наше начальное состояние
состояние клавиш , так что если мы говорим , это начинается
государство равно, и мы хотим установить проекты
и тогда проекты будут
массив объектов
все в порядке, поэтому каждый будет иметь заголовок
так скажем , бизнес — сайт , а также
категория мы будем всего лишь веб-дизайном
так что есть один проект, давайте скопируем
это, и это сделает три, так что бизнес
веб-сайт, тогда мы будем делать социальное приложение и
эта категория будет, скажем, мобильной
развития, а затем давайте делать электронную торговлю
корзина для покупок, а затем эта категория
будет веб-разработка прямо сейчас, мы
хочу принять это состояние, и мы хотим
передавать его в проекты как собственность
право так в основном вы хотите все
в верхней части вашего приложения в состоянии
а затем передать его другим
компоненты через свойства все в порядке
данные должны быть неизменными,
перейдите сверху вниз, давайте передадим его в
как проекты, и мы должны быть в состоянии сказать
эта точка точка точка проектов в порядке, так
теперь, если мы пойдем, мы получим ошибку
здесь и он говорит, что это запрещено
прежде чем супер, причина в том, когда
мы делаем, когда мы помещаем конструктор, и мы
нужно вызвать супер, как это сохранить его и
что сейчас уходит в проектах
если мы идем в рендеринг, но не в
вернуться и мы делаем консультироваться журнал и мы
скажите, что это точка реквизит
теперь, когда я перезагружаюсь, вы увидите, что мы получаем
свойства, и у нас есть эти проекты
с массивом со всеми нашими проектами
поэтому теперь мы можем получить доступ к этому из
компонента проекта, когда у вас есть
массив таких объектов, как вы, обычно
хотите создать отдельный компонент для
каждый отдельный элемент, а затем вы хотите
в основном отображать эти проекты
и вывести этот компонент, чтобы мы пошли
идти вперед, а в компонентах мы будем
создать новый файл, называемый элементом проекта
Jas все в порядке , мы будем копировать
все, что у нас есть в проектах, вставьте его
там, и мы изменим это на
проекта и ниже, убедитесь, что вы
изучить проект сейчас
это я не хочу возвращать div I
на самом деле хотите, чтобы это было в порядке литий каждый
один будет завернут в Ли, и мы
дать ему класс проекта и
образом , если вам интересно , почему это
имя класса, потому что в JSX есть
не может использовать классы и атрибуты всех
правильный класс или если вы используете
формы с ярлыками, которые вы не можете использовать для себя
должны использовать HTML 4 в порядке, просто попробуйте
и помните, что
поэтому на самом деле вы знаете, что мы будем
оставьте это, как сейчас, а затем давайте
вернуться к проектам , и то , что мы хотим
давайте посмотрим, что мы хотим попытаться подумать
о том, как я хочу это сделать, давайте рассмотрим выше
рендеринг и давайте просто создадим
переменная, называемая элементами проекта, а затем
мы хотим проверить , есть ли какие-либо
проектов, так что сделайте здесь инструкцию if
мы скажем, если эта точка реквизит точек проектов
то мы хотим взять эти объекты проекта
переменная, и мы хотим установить это для этого
Точка реквизит dot проекты dot map ok, так как
это массив, который мы хотим сопоставить
так что здесь мы собираемся использовать
arrow вы можете использовать обратный вызов
но я хочу сохранить это в основном в
es2015, поэтому здесь мы хотим сделать
прежде всего давайте сделаем консольный журнал и
убедитесь , что мы действительно получаем
каждый проект в порядке, поэтому давайте посмотрим неожиданный
токен ожидаемых круглых скобок, о, я положил это
в неправильном месте это должно быть
внутри рендеринга, поэтому мы собираемся
здесь все в порядке, так что теперь здесь
вы можете видеть, что он регистрирует каждый
это работает или получается каждый
индивидуальный проект, который мы хотим
прокомментируйте это , и мы хотим вернуться
и здесь мы собираемся поставить
компонента компонента проекта
то мы хотим передать в каждом проекте, как
свойство хорошо так мы присваиваем
каждый элемент проекта соответствует этой переменной
здесь, так что здесь мы должны уметь
просто введите объекты проекта, и мы сохраним
это хорошо, поэтому нам также необходимо импортировать
компонент элемента проекта, который мы создали
так сказать, импортировать проект из точки
элемент проекта «слэш» в порядке, теперь мы
получение этой ошибки, в которой говорится, что каждый ребенок
в массиве должен быть уникальный ключ
так что это не ошибка, это
но это хорошая идея добавить
ключ к нашему элементу проекта прямо здесь
обычно, если у вас есть идентификатор, который вы бы использовали
что, но мы просто
название проекта в порядке, теперь ничего не происходит
здесь, потому что, если мы войдем в
элемент проекта мы ничего не поставили
здесь еще так давайте ставим пром
мы должны получать проект как
собственность, которую мы прошли в порядке
здесь мы передаем его как собственность
так что, скажем, этот точечный реквизит
а затем мы также
категории, так что этот точечный реквизит dot project
все правильно, мы сохраним это
и теперь вы можете видеть, что мы выводим все
наши проекты наряду с категорией
все в порядке, давайте обернем это сильным
пометить все правильно и поместить двоеточие в порядке
поэтому он выглядит не очень хорошо, но
работаем мы поглаживаем, мы в основном
настройка нашего состояния в нашем главном приложении
компонент нормально, у нас есть состояние, называемое
проекты, которые мы передаем в проекты
как собственность, а затем внутри проектов
были отображены через этот массив и
мы выводим элемент проекта
компонент, который имеет каждый проект, где
мы выводим название и категорию
хорошо так что надеюсь , вы можете увидеть , как
это идет вместе сейчас одна вещь , которую я
хочу упомянуть приложение j / s в нашей
конструктор, мы устанавливаем состояние this
обычно не там, где вы хотите установить
фактические данные, которые вы хотите определить
состояния и ключей, но не
данные, для которых вы хотите использовать
жизненного цикла, и вы, вероятно, хотите
использовать компонент будет хорошо, так скажите
компонент будет монтироваться
и это фактически должно быть уменьшено
так что это метод жизненного цикла, который он запускает
когда каждый компонент
переделано так вот, возьмем эти
и вырезать их, мы хотим сохранить
проектов, но так же, как пустой массив в
это в конструкторе здесь мы
хочу сказать, что эта точка устанавливает состояние передачи
объект, и мы скажем проекты, которые
это массив, а затем мы вставим
данные в так все в порядке , так что давайте идти
вперед и спасти , и теперь вы будете видеть
он все еще функционирует, но это всего лишь
лучший способ сделать это, чем иметь его в
конструктор вроде этого все правильно и
когда вы, например,
ajax call, если вы извлекаете данные из
из внешнего api вы хотите сделать это
в этом жизненном цикле, а также
этот или компонент был установлен, и если вы
перейдите в документацию для
см. все методы жизненного цикла и
в какое время они выносят или сжигают
поэтому теперь мы хотим сделать, это добавить
формы, чтобы мы могли добавить к нашему состоянию так
мы можем добавить проект, поэтому давайте создадим
другой компонент, и мы будем называть его добавлением
project dot J s, и давайте скопируем то, что мы
в проектах хорошо мы будем вставлять это и
мы можем избавиться от этого я собираюсь
изменить имя, чтобы добавить проект, избавиться
из этого измените это здесь, чтобы добавить
Проект все прямо сейчас давайте посмотрим , что делать
мы хотим сделать здесь, давайте сохраним
div Я собираюсь избавиться от класса
имя, и мы положим h3 здесь say add
проект
все в порядке, давайте просто сделаем так, чтобы мы могли
вставьте это в наши основные компоненты, чтобы
мы собираемся пойти в приложении J с и импорт
это точно так же, как мы делали с проектами все
вправо , а затем здесь мы поместим его
прямо над нами просто заменить это мой
приложение сохранит это, и теперь мы выводим
добавьте компонент проекта, чтобы мы захотели
это форма
хорошо, поэтому мы поместим тег формы и давайте
поставьте здесь div, это будет иметь
метка названия и тип ввода будут
‘, и мы собираемся дать это
атрибут называется ref, и это будет
помогите нам получить значение, когда мы отправляем
форма теперь вы должны иметь эту косую черту
здесь вы не можете использовать синтаксис html5 или
вы получите сообщение об ошибке в ref
давайте просто поместим заголовок все правильно, давайте
также ставьте здесь и снова, вы должны
сделайте свою косую черту, давайте скопируем эту пасту
что в то время это будет
но я хочу, чтобы это было выбрано
хорошо, поэтому мы скажем, выберите это также
иметь ссылку на категорию
все прямо сейчас, что я хочу сделать, это я
хотите, чтобы категории были имуществом
компонента прямо сейчас мы можем
задайте свойства по умолчанию, если мы перейдем
рендеринг, и мы будем говорить о статическом
по умолчанию, и мы хотим установить это для
объект и зададим категории для
массив, и мы скажем веб-дизайн web
развитие и мобильная разработка в порядке
и тогда мы хотим, чтобы мы хотели
на карту через них , а затем выводить
варианты, чтобы мы пошли выше
вернуть и отдать и сказать, пусть категория
варианты, которые мы установим для этой точки реквизита
потому что теперь мы можем получить доступ
это, а затем мы хотим называть точечную карту
все в порядке , а затем здесь будет оставаться
мы будем использовать функцию стрелки и
то мы хотим вернуть вариант, который мы
чтобы дать ему ключевую категорию и
значение категории, а затем мы также хотим
открыть категорию здесь все правильно, так что
теперь мы должны просто использовать это
варианты категории прямо здесь
ладно, давайте попробуем это, и мы пойдем
поэтому теперь мы выводим все
категорий, исходящих из
недвижимости здесь, чтобы отправить
что мы собираемся сделать, это
тег формы, мы добавим обработчик
призвал отправить в порядке , мы имеем на
отправить на клик есть целая куча
из них, поэтому мы хотим положить некоторые кудрявые
скобки и, допустим, эту метку точки
отправить все права, чтобы этот дескриптор
мы можем создать прямо здесь и просто
чтобы показать вам, давайте сделаем console.log и
мы просто скажем, поданный сейчас, я не
думаю, что это будет работать, но о, мы
даже не поставил кнопку отправки, так что нет
это не будет работать.
значение подавать в порядке, поэтому, если мы пойдем, когда мы
попробуйте представить это, вы увидите, что это
не консольный журнал здесь, потому что
он фактически представляет форму,
мы хотим сделать, это передать событие
параметр здесь и тогда, как и в
JavaScript или некоторые другие библиотеки мы
может использовать префикс для предотвращения по умолчанию и
будет препятствовать форме на самом деле
так что теперь, если мы это сделаем, вы можете
см. здесь, мы получаем наш консольный журнал сейчас
что мы хотим сделать, мы хотим сохранить
данные , которые мы представляем в состояние
поэтому мы добавим конструктор вверх
наверху
все в порядке и в конструкторе у нас есть
называть нашу суперфункцию, а затем
мы собираемся сказать это состояние точки и
у нас будет новый проект, который
будет объект , поэтому мы не хотим
чтобы заполнить его здесь, что мы хотим сделать, это
установить его, когда это отправлено
все сейчас, чтобы получить значения
форма, которую мы можем использовать, что refs
атрибут все правильно, давайте пусть некоторые
скажем, консоль dot log this dot refs dot
title dot value okay, так что теперь, если я напечатаю
что-то здесь и представить, что это
не работает, посмотрим, что я делаю неправильно
ref title
о, это не значит, что это мы
на самом деле необходимо связать его через
ручка отправить сюда или просто сказать точку
свяжите, а затем передайте это, так что теперь мы
submit вы можете видеть, что это консоль
записывать все, что я ставлю в заголовке сейчас
мы не хотим , чтобы они были в состоянии представить
пустой заголовок, чтобы мы могли фактически сделать
здесь мы скажем немного
если это контрольное значение заголовка равно
ничего, что мы хотим предупредить, и мы будем
говорите, что заголовок требуется все в порядке, а затем
у нас будет еще один, а затем мы сделаем то, что
мы хотим сделать это, если мы сохраним это, и мы
попробуйте представить, мы получаем предупреждение сейчас
если все сработает или если есть
Название мы хотим , чтобы установить состояние мы хотим
чтобы поместить данные в это значение так, чтобы
мы сохраним это состояние набора точек, и мы
хочу перейти сюда новый проект
и установите это для объекта, и давайте посмотрим
мы собираемся установить заголовок этой точки
refs dot dot dot value, а затем
категории к этой точке Refs
значение категории, чтобы установить
для нас сейчас, когда мы используем этот набор
что он может принимать второй параметр
который будет идти прямо здесь мы положить
запятая, и это будет обратный вызов
функции все в порядке, а затем вот давайте
сделать журнал консоли и войти в состояние
так что давайте сохраним это, и давайте просто скажем
тестовый веб-дизайн, а затем он дает
нам государство, у которого есть новый проект
с этими данными
теперь я должен был бы
упоминалось ранее, что государство в этом
компонент отличается от состояния в
основной компонент приложения подходит каждому
компонент имеет свое собственное состояние, но то, что мы
хочу сделать, это взять данные, которые мы отправляем
и передать его в основное приложение
компонент и сохранить его в сети в
это то, что мы можем сделать, мы можем
отправить его через собственность в порядке
через функцию внутри свойств
так что мы сделаем это , чтобы прокомментировать это
мы скажем, что этот точечный реквизит dot добавить проект
хорошо, а затем мы пройдем новый
сейчас, так как мы сделали это, мы должны
иметь доступ к этому из основного
, поэтому мы пойдем туда , где мы
есть проекты, мне жаль, добавь
проекта, и мы собираемся поставить
собственность, что мы называем это добавить проект
поэтому мы хотим использовать это прямо здесь
поэтому добавьте проект равным, а затем мы хотим
функционировать, чтобы справиться с этим, чтобы эта мысль
ручка добавить проект все в порядке , и мы
должен просто привязать это, а все правильно
и тогда мы создадим это прямо здесь
ручка добавить проект, который
проекта, и просто сделаем консольную точку
войдите, чтобы убедиться , что это работает
все в порядке, давайте посмотрим, что это за новый
проект не определен, давайте посмотрим, о, я
прошел новый проект, на самом деле это
государство, поэтому мы хотим сказать, что это начинается
state dot new project, так что теперь, если мы поставим
что-то здесь и представить эту точку
реквизит добавить проект не является функцией
давайте посмотрим, как эта точка точка-точка добавить проект
о, это должно быть прописным.
пойдите хорошо так теперь мы представляем это
мы передаем его этому компоненту
и консоль регистрирует его сейчас здесь, что
мы хотим сделать это, мы хотим добавить его в
состояние основного компонента в порядке
поэтому мы можем просто дать понять, как реагировать
заявить, что ваше состояние является неизменным значением
что вы не хотите его менять
хочу в основном обновить его, чтобы мы захотели
получить все, что в нем,
он подталкивает к нему новый проект, а затем
установите его снова, чтобы сделать это, мы скажем, пусть
проектов, мы установим это для этого запуска
государственные проекты точек, поэтому мы захватываем
что уже есть, а потом давайте
что и подтолкнуть к нему новый проект
и затем мы сбросим его, чтобы мы сказали:
это точка устанавливается состояние, а затем мы скажем
проекты проекты в порядке, поэтому давайте
сохраните это, а теперь, скажем, тестовую сеть
развитие подчиняется, и там это ох
говорит, что это неправильно, так что
посмотрим, что пошло не так, если мы пойдем
добавить проект прямо здесь значение
категорию, которую необходимо обернуть
фигурные скобки вы , ребята , наверное , видели , что
уже все в порядке, так что и мы там
идти мы говорим тест, чтобы выбрать мобильный
development submit, теперь мы можем добавить
проектов сейчас это не получится
когда я перезаряжаюсь, как я сказал
в начале реагировать для пользователя
интерфейсов это не он не собирается
сохраняйте данные, и теперь мы можем установить их
нажимать на какой-то API или, может быть,
локальное хранилище или что-то еще
что , но мы хотим , чтобы сосредоточиться только на
пользовательский интерфейс, и это
что здорово реагировать на то, что ваш
back-end полностью разделен, поэтому мы
это может пойти на локальное хранилище и
то мы могли бы легко заменить его
скажем , MongoDB или что — то подобное
отлично
Я собираюсь поставить курс выше этого, чтобы
это не так скручено вместе, поэтому
проекты, которые мы ставим h3 , просто скажут
последние проекты все в порядке , я положил
разрыв строки ниже этого входа , а также
oops Я собираюсь положить это прямо здесь
хорошо, поэтому он выглядит не слишком хорошо, но
это прекрасно, мы не фокусируемся на этом
так что теперь я хочу, чтобы я хотел
показать, как мы можем удалить их сейчас
изначально у нас нет, если мы посмотрим на
в нашем государстве наши проекты у нас нет
ID, и это хорошая идея иметь идентификатор
уникальный идентификатор, и на самом деле есть модуль
мы можем использовать UUID
поэтому давайте не будем знать , где они
документация для него, но мы собираемся
идти вперед и устанавливать это, и это просто
генерирует уникальный идентификатор для нас, это
действительно простой модуль, поэтому мы собираемся
продолжайте и просто прекратите это с помощью ctrl C
и установить NPM — — сохранить UUID
хорошо, а затем мы просто перезапустим NPM
Начало
и мы собираемся приехать сюда и
принесите это, чтобы импортировать UUID из UUID
и тогда мы просто пойдем сюда, мы будем
назначить идентификатор UU ID точка V 4 , который представляет собой
поэтому каждый раз, когда мы используем это, он будет
генерировать новый идентификатор , так что мы хотим один для
здесь и здесь тоже хорошо, а потом, когда
мы добавляем проект, который мы также хотим сделать
то же самое мы хотим добавить ID, чтобы мы
импортировать все правильно, мы будем использовать это право
здесь, где мы устанавливаем состояние для нового
ID проекта dot d4 так же, как и
который будет генерировать уникальный идентификатор для всех нас
правильно и просто, чтобы убедиться, что мы
на самом деле получить удостоверение личности, перейдем к нашей
проекта, и мы заменим это
название с идентификатором, и вы можете видеть, что это
выводя уникальные идентификаторы в порядке, я поставлю это
назад я хочу, чтобы иметь возможность удалить
поэтому перейдем к пункту проекта, где
мы сейчас собираемся поставить ссылку на
конец здесь
теперь ссылка на самом деле не идет
идти куда угодно, мы хотим поставить событие
Мне жаль, что обработчик события вызвал
нажмите, и мы установим это, чтобы увидеть
что я хочу установить для этой точки
Удалить проект все в порядке мы собираемся
do dot свяжите это также, а затем мы
собираюсь создать это прямо здесь
whoops не обрабатывает то, что было удалено
удалить проект
и давайте просто сделаем тест console.log.
чтобы убедиться, что он действительно работает
давайте откроем нашу консоль, если мы нажмем
что мы получаем тесты, мы хотим это сделать
та же идея , что мы хотим , чтобы нажать на нее в
этот компонент, но мы хотим его пропустить
к основному компоненту, а затем выполните
окончательное удаление там сейчас, так как мы в
элемент проекта был фактически двумя
компонентов глубоко, поэтому нам нужно его отбросить
проекты , а затем передать его на
основной компонент приложения прямо сейчас, чтобы сделать
что мы собираемся установить свойство this
точка опоры точка , и мы будем называть его
удалить, а затем мы просто хотим пройти
Идентификатор теперь должен пройти по
ID через эту функцию мы собираемся
идите после этого здесь, здесь введите запятую и
то мы собираемся сохранить эту точку
реквизит простейшего идентификатора точки справа, а затем
мы должны иметь доступ к нему через
здесь и тогда мы пройдем все это
так что давайте сохраним это, а потом мы
собираемся пойти на проекты J s и пойти в
где у нас есть элемент проекта , который
прямо здесь, и давайте посмотрим, что мы хотим добавить
на удаление здесь, а также сказать эту точку
удалить проект
покупая это, и мы также хотим создать
функция здесь удаляет проект
хорошо принимает идентификатор, а затем снова мы хотим
сделать это dot prop dot on delete pass
в ИД все в порядке, так что теперь мы проходим
это до основного компонента так вниз
где у нас есть проекты, которые мы хотим пройти
in on delete okay, мы установим это на этот
dot дескриптор удалить проект, и мы сделаем
dot bind, а затем передать это, а затем
как и мы с ручкой добавляем проект
мы собираемся добавить обрабатывать удаление проекта
все в порядке, что будет в ID
и тогда идея такая же, как с добавлением
проект, который мы хотим получить от государства
и затем мы хотим удалить проект
мы хотим, а затем переустановим состояние, пока вы
могли бы сделать это по — разному мы могли
используйте цикл for или что-то в этом роде
но мы будем использовать индекс поиска
допустим, пусть индексируем, и мы установим, что
к проектам dot find index и пройти в
здесь X, поэтому X dot ID и в основном что
это делается, это будет смотреть
все проекты, которые он найдет
идентификаторы и сопоставить их с текущим идентификатором
это передается в порядке, если это
матчей и он собирается получить положить в
индекс, то, что мы хотим сделать, — это
скажем, точечное сращивание, где этот индекс и
мы хотим удалить один из них, а затем
мы просто хотим сбросить состояние просто
как мы все сделали правильно, давайте
кроме того, что теперь мы должны быть в состоянии
нажмите X на одном из них и удалите
Это
хорошо, поэтому мы можем теперь добавлять проекты, и мы
может удалить их, чтобы мы в значительной степени
там, насколько все основы друг друга
вещь, которую я хочу показать, это типы prop
который является своего рода видом
валидация для наших свойств, поэтому для
пример давайте посмотрим, что у нас нет
основной компонент приложения, но если мы войдем в
проектов в наш проект, мы
есть ли у нас сами проекты,
свойство, а затем мы имеем функцию
на delete, которое является свойством, поэтому, если мы
хотите добавить подтверждение для
те, кого вы можете спуститься под класс
а затем скажем, что проекты типа dot prop и
скажем, проекты, и это массив
поэтому мы хотим убедиться, что он
отформатирован как массив
так что, если мы говорим , реагируют точечный гребной винт типа
dot, а затем мы удалим
которая является функцией таким образом , мы можем сказать , реагировать
dot prop типы dot func
теперь, если мы сохраним, что ничего не происходит
потому что это правильно , но если бы мы
скажем, проекты, если мы хотим формат
это как строка, если она должна быть
строка теперь мы получим ошибку
говоря, что проекты типа массива
Ожидается, что строка будет хорошо, поэтому
фактически не останавливает его от работы
но это дает вам это предупреждение
сообщая вам, что это свойство является
неправильный тип все правильно, так что это хорошо
практика, чтобы сделать это хорошо, теперь давайте скопируем
это и сделаем это для элемента проекта
также
элемент проекта, который мы снова имеем для удаления и
то у нас есть проект, который является
так что давайте пойдем сюда, и мы будем
измените это на элемент проекта
dot prop, и у нас есть проект, который
это нормально, поэтому мы хотим сделать это
а затем удалить, что, конечно, является
функция сохраняет, что ошибок нет
потому что теперь все правильно, мы будем
сделать то же самое для добавления проекта, чтобы добавить
проект, мы посмотрим, что у нас есть
категории, которая является собственностью и
это массив, поэтому мы собираемся сохранить
это, а затем мы добавим проект, который
где он находится прямо здесь, этот точечный реквизит
dot добавить проект, который работает нормально
так что нужно это делать, и там мы идем сейчас
Я также хочу показать вам, как мы можем
в других данных от внешнего API
поэтому я собираюсь закрыть все это, кроме
для приложений J s и в основном, что я хочу
do — это API-интерфейс разработчика под названием Jason placeholder
и давайте посмотрим, что хочу получить некоторые взносы
поэтому вы можете увидеть здесь, если мы нажмем на это
он дает нам API, где мы можем получить JSON
форматированные — счисления с идентификатором заголовка и
так и мы можем сделать запрос на получение
что — взносы так в нашем заявлении мы
хотите сделать запрос на жизненном цикле
функция, называемая компонентом,
мы добавим, что здесь
хорошо, мы должны положить это в оба
компонент сделал mount и компонент будет
mount, поэтому я собираюсь создать
функция, называемая get to Do’s и let’s
видеть , что мы будем хотеть работать , что в
оба из них так давайте пойдем сюда и скажем
это точка добраться до сборов , и мы также хотим
запустите это здесь и там, где мы положим
этот проект в штате я также хочу
создать функцию , которая отдельно
называемые проекты получения, а затем все, что мы
собираюсь сделать это захватить это вырезать его и
поместите это здесь, а затем мы назовем это
здесь просто сделайте вещи немного опрятными
хорошо все должно работать
хорошо сейчас, чтобы получить взносы, это то, где мы
хочу сделать наш запрос сейчас, мы можем использовать
много разных модулей для создания протокола HTTP
Я просто собираюсь использовать jQuery
все в порядке, давайте продолжим и установим
jQuery через NPM, и вы можете использовать Axios
хороший супер-агент — еще один
но я просто хочу, чтобы это было просто так
давайте продолжим и импортируем jQuery здесь
мы скажем импортный знак денег из jQuery
а затем отступить и получить взносы или
он здесь мы будем говорить JQuery
dot H ax, и мы хотим перейти сюда
URL теперь URL будет от
jason place holder, который будет таким
мы скопируем это
вставить , что в типе данных собирается
будь Джейсон, скажем, я собираюсь остаться
наличные ложные, и тогда у нас есть наш успех
хорошо, если все будет хорошо, это будет
и который принимает данные, которые
вернулся, а затем у нас также есть необходимость
связать это так же, как мы делаем с
другие — другие функции, которые мы
скажем, свяжу это, а потом мы
поместите запятую, и тогда у нас будет
наша ошибка в случае ошибки все
и тогда для этого
взять власть, на самом деле это собирается
взять пару вещей, которые он собирается
взять восемь и xhr статус и ошибку
и тогда все, что мы хотим сделать здесь, это
Теперь консольная точка регистрирует ошибку, если
все идет хорошо, мы хотим взять
данные, которые возвращены и помещены в наш
состояние в состоянии здесь, давайте добавим
— duze, который будет пустым массивом и
то здесь мы можем сказать, что этот набор точек
и мы скажем — дуэты, и мы установим
что данные все в порядке , а затем
давайте обратный вызов , а затем мы можем
проверьте состояние, чтобы консольная точка записывала это
точка, так как мы можем сделать это
работающих в этих жизненных циклах
должен запускаться сразу, когда приложение загружается так
давайте вернемся туда и откройте
консоли, и если мы посмотрим на объект, мы
конечно, есть наши проекты, а затем мы
есть 200 — дуэтов, хорошо, что это
входящий в этот API, так что это просто
так как для ввода данных извне
источника и помещать его в наше государство и
то мы можем использовать это в остальной части нашего
заявление
и я думаю, мы можем сделать это
быстро создадим еще один компонент
призванный делать zjs, и мы также создадим
один призвал сделать элемент J s, и мы
собираемся сделать то же самое, что мы
сделал с проектами , поэтому я собираюсь
копировать то, что у нас есть в проектах, и вставлять
что делать ZJS хорошо мы будем
измените много этих двух, чтобы сделать это
будет делать, я не собираюсь делать
удалять и добавлять, хотя я просто хочу
перечислите их, чтобы мы избавились от этого .
измените это, и я знаю, что я двигаюсь
быстро, но я просто хочу, чтобы я не хотел
это слишком долго , теперь мы будем
переходят в сборы как свойства так же, как мы
сделал здесь, а затем мы скажем, чтобы делать предметы
этот точечный реквизит dot to dues dot map okay
то здесь мы собираемся вернуть
Дела компонентам детали мы не нужны
на удаление , и я считаю , что двойки имеют
название давайте проверим это, да, они
название и идентификатор, чтобы это можно было сделать
точка, чтобы сделать oops
все в порядке, измените это, просто скажем
список дел, а затем для
мы не нуждаемся в удалении
а затем давайте убедиться, что мы экспортируем в
сборы все в порядке , так что давайте экономить , что и
то в текущих дел пункта мы будем копировать
что у нас есть в палитре элементов проекта,
в порядке, нам не нужно удалять
здесь назовем это, чтобы изменить, что мы
не нужна категория, поэтому давайте избавимся
о том, что это просто будет
нам не нужна ссылка для удаления изменений
что
все в порядке, поэтому мы сохраним это и давайте
см. сейчас в главном компоненте приложения, который мы
собираются импортировать обе из них:
фактически мы собираемся импортировать
все правильно, и тогда мы добавим, что
вниз, давайте поместим HR для сохранения и
Вероятно, у меня ошибка
мы ничего не выводим, и это
потому что мы не прошли ничего в к
сделаем это, мы хотим пройти по двум взносам
что у нас есть состояние, поэтому мы скажем это
точка точка точка две сборы сохранить его и там
они так поступают из
этот API, чтобы вы могли видеть, что это легко
вытащить данные и просто привести их в нашу
и затем опубликовать его до
компоненты через свойства, и мы
сделал запрос на получение, но, конечно, мы
также могли бы делать запросы по почте, и мы
может передавать данные в pis во внешние
базы данных и так далее в порядке , так что это
получив вид долго, поэтому мы собираемся
идти вперед и остановиться здесь мы рассмотрели довольно
много всех оснований реакции я делаю
надеюсь , что вы , ребята , узнали что — то и
наслаждался этим, я получу этот код
github и я также предлагаю проверить
из десяти сценариев реагирования проекта, которые
Я буду готов через неделю или около того, а потом
также у меня есть более простой ввод, чтобы реагировать
курс, а также курс потока реагентов
ладно, спасибо за просмотр, и я
увидимся в следующий раз
Please follow and like us:
Be First to Comment