Курс React с нуля для начинающих Онлайн обучение React JS разработке на практике
Работая напрямую с DOM API, нам библиотека компонентов react пришлось бы указывать, какой элемент изменять в нужное время, в нужном порядке. То есть пришлось бы подробно объяснять Domo, как расположить голову, руки и ноги для каждого портрета. Мы можем сделать новый компонент с помощью других компонентов. Прямое общение с Domo было стандартным подходом к веб-разработке в течение многих лет, особенно когда контент был в основном статичным.
▍Рекомендация №1: не нужно везде использовать классы компонентов
Обратите внимание, что мы используем некоторые особенности из ES6 (последней версии JavaScript), такие как стрелочные функции, классы, операторы let и const. Вы можете воспользоваться Babel REPL, чтобы узнать во что компилируется ES6-код. Мы предполагаем, что вы немного знакомы с HTML и JavaScript. Однако, вы сможете изучать введение, даже если знакомы только с другими языками программирования. Мы также полагаем, что вы знакомы с такими понятиями программирования как функции, объекты, массивы и, в меньшей степени, классы. Если вы не очень хорошо понимаете код, или вы не знакомы с синтаксисом, не беспокойтесь.
Вариант 2: Локальное окружение для разработки
Однако по мере роста вашего приложения вам может потребоваться более интегрированная настройка. Существует несколько нескольких инструментов для JavaScript, которые мы рекомендуем для более крупных приложений. Каждый из них может работать практически без конфигурации и позволяет вам в полной мере использовать богатую экосистему React. Поэтому поток данных в приложении — более предсказуемый, что упрощает разработку и отладку. Чтобы закрепить навыки, создадите музыкальный сервис, в котором реализуете витрину с треками, встроенный плеер, избранное и подборки.
Вариант 1: Пишем код в браузере
Функция получает массив из 9 клеток, проверяет победителя и возвращает ‘X’, ‘O’ или null. Мы разбили возвращаемый элемент на несколько строк для удобства чтения и добавили скобки, чтобы JavaScript не вставлял точку с запятой после return и не ломал наш код. Вы можете закрыть игру в крестики-нолики, как только познакомитесь с ней. Следующим шагом мы настроим окружение, чтобы вы могли начать создание игры. Вам не обязательно проходить все части сразу, чтобы получить пользу от этого введения.
▍Декларативный подход к описанию интерфейсов
Если в новом списке есть ключ, которого раньше не было, React создаёт новый компонент. Если в текущем списке отсутствует ключ, который был в прошлом списке, React уничтожает предыдущий компонент. Если два ключа совпадают, соответствующий компонент перемещается.
React: наглядное пособие для начинающих. Создаем свой компонент без знаний JavaScript
Компоненты React могут получить состояние, устанавливая this.state в конструкторе. This.state должно рассматриваться как приватное свойство React-компонента, определяемое им самим. Давайте сохраним текущее значение Square в this.state и изменим его при клике. ShoppingList является примером классового компонента React. Компонент принимает параметры, которые называются пропсами (props, сокращение от properties — свойства), и возвращает из метода render() иерархию представлений для отображения.
Люди приходят к React с разным опытом и стилем обучения. Некоторые предпочитают учиться на ходу, а кому-то нравится сначала овладеть теорией. В любом случае мы надеемся, что этот раздел будет для вас полезен. Если вы предпочитаете работать в своём редакторе, скачайте тестовый HTML-файл, добавьте в него код и запустите на своём компьютере. При открытии тестового файла браузер преобразует JSX в обычный код на JavaScript. Такое преобразование достаточно медленно, поэтому мы рекомендуем использовать этот файл только для простых демонстрационных примеров.
Обмен данными между компонентами
Если документация кажется вам сложной и усваивается не так быстро, как хотелось, прочтите блог Тани Раша (Tania Rascia). Таня написала о том, как начала работать с React и доходчиво рассказала об его основных принципах. Попробуйте почитать этот пост, а потом вернуться к документации. Вот несколько наборов JavaScript-инструментов, которые мы рекомендуем для создания приложения. Каждый из этих инструментов может работать практически без настройки и позволит раскрыть все возможности экосистемы React. На этой странице мы сделаем небольшой обзор документации и других ресурсов, которые могут пригодиться при первом использовании React.
Это лишняя работа, потому что не относится напрямую к логике приложения. Глоссарий содержит перечень наиболее употребляемых терминов, которые встречаются в документации. В нём короткие вопросы и ответы на самые животрепещущие темы, такие как использование AJAX, состояние компонентов или структура проекта. В предыдущем примере у каждого MyButton имеется своё собственное состояние count, и при клике на каждую кнопку обновление count происходило только у нажатой кнопки. Для отрисовки списков компонентов вам будет нужно использовать такие возможности JavaScript, как цикл for и функция массива map().
Каждый раз, когда наши данные меняются, React эффективно обновляет и повторно рендерит наши компоненты. Вы увидите пустое поле для игры в крестики-нолики и код на React, который мы будем постепенно изменять. Есть два варианта прохождения практической части — вы можете писать код в браузере, либо настроить окружение для разработки на компьютере. Если вам нужно повторить основы JavaScript, мы рекомендуем прочитать вот этот учебник.
В последнем примере мы советовали использовать метод .slice() для создания и последующего копирования копии массива squares вместо изменения существующего. Теперь мы обсудим иммутабельность и почему её так важно изучить. Обратите внимание, что внутри handleClick мы вызвали .slice() для создания копии массива squares вместо изменения существующего массива. В следующей части мы объясним зачем создавать копию массива squares. Помимо ввода входных данных (доступных через this.props), компонент может поддерживать внутренние данные состояния (доступные через this.state). Когда данные состояния компонента изменяются, отрисованная разметка будет обновляться путём повторного вызова render().
Ключи в React работают как идентификаторы для каждого компонента, что помогает React поддерживать состояние между повторными рендерингами. Если у компонента меняется ключ, компонент будет уничтожен и создан вновь с новым состоянием. В дополнении к изменённым цифрам, человек, читающий это, вероятно, сказал бы что Алекс и Бен поменялись местами, а между ними вставили Клаву.
React автоматически использует key для определения того, какой компонент должен обновиться. В отличие от метода массива push(), с которым вы должно быть знакомы, метод concat() не изменяет оригинальный массив, поэтому мы предпочтём его. В качестве последнего упражнения давайте добавим возможность «вернуться в прошлое» — к прошлым ходам игры. Конечный результат будет тот же, но без мутации (т.е. изменения) исходных данных напрямую. Подъём состояния в родительский компонент — обычное дело при рефакторинге React-компонентов.
- Если в текущем списке отсутствует ключ, который был в прошлом списке, React уничтожает предыдущий компонент.
- По умолчанию состояние устанавливается в true — это значит, что первыми будут ходить крестики.
- Родительский компонент может передать состояние обратно дочерним элементам с помощью пропсов.
- Информация, которую вы передаёте таким образом, называется пропсами.
- Ниже мы реализуем функциональность «путешествие во времени», которая позволит хранить историю игры и «возвращаться» к прошлым ходам.
В таком случае нам требуется сравнивать объект как со своей последней копией, так и со всем деревом объектов. Вначале мы передали из Board проп value вниз, чтобы отобразить номера от 0 до 8 внутри каждого Square. На другом шаге мы заменили числа знаком «X», определённом в собственном состоянии Square.
Возможно, вы предполагали, что Board просто запросит у каждого Square его состояние. Хотя такой подход в React возможен, мы его не одобряем. Из-за этого код становится трудным, провоцирует ошибки и усложняет рефакторинг. Вместо этого, лучшим решением будет хранение состояния игры в родительском компоненте Board, а не в каждом отдельном Square.
Цель состоит в том, чтобы вы поняли суть React, не погрязнув в синтаксисе JS. Если вам удобно читать код на JavaScript, можете проверить реальные исходные тексты. Сегодня такие инструменты для веб-дизайна, как Framer и Figma (и символы в Sketch), также основаны на компонентах. Они очень похожи на React-компоненты, но последние более гибкие и мощные.
IT курсы онлайн от лучших специалистов в своей отросли https://deveducation.com/ here.
