Skip to content

РАЗРАБОТКА САЙТА НА REACT

Разработка сайта на react-Разработка сайта на react

Я покажу как сделать сайт с нуля на React js. Справиться с данными уроками может любой начинающей веб разработчик - программист. Я подробно расскажу как работать с компонентами и свойствами компонентов React js. React-разработка заключается в описании того, что нужно вывести на страницу (а не в составлении инструкций для браузера, посвящённых тому, как это делать). Это, кроме прочего, означает значительное сокращение объёмов шаблонного кода. В составе Angular, с другой стороны, есть средства. React — это JavaScript-библиотека для разработки пользовательского интерфейса. .serp-item__passage{color:#} React изначально был спроектирован так, чтобы его можно было внедрять постепенно.

Разработка сайта на react - Разработка сайтов на React

Разработка сайта на react-В открывшейся новой вкладке инструменты разработчика теперь должны иметь вкладку React. Завершение игры Теперь у нас есть основные строительные блоки для нашей игры в крестики-нолики. Чтобы завершить игру, нам необходимо чередовать размещение «X» и «O» на доске, а также нам нужен способ определить победителя. Поднятие состояния вверх В настоящее время каждый компонент Square поддерживает состояние игры. Чтобы определить победителя, мы будем хранить значение каждого из 9 квадратов в одном месте. Можно предположить, что Board должен просто попросить у каждого Square значение его состояния.

Хотя такой подход и возможен страница React, мы его не одобряем, потому что код становится сложным для понимания, восприимчивым к ошибкам и трудным для рефакторинга. Вместо разработка сайта на react лучше всего хранить состояние игры в родительском компоненте Board, а не в каждом Square. Компонент Board может указать каждому Square, что отображать, передавая свойство, точно так же, как мы это делали, когда передавали число в каждый Square. Общее разработка сайта на react Чтобы собрать данные из нескольких дочерних элементов или обеспечить взаимодействие двумя дочерними компонентами, вам нужно объявить общее состояние в их родительском компоненте.

Родительский компонент может передать состояние обратно дочерним компонентам, используя свойства props; это синхронизирует дочерние компоненты между собой и с родительским компонентом. Поднятие состояния в родительский компонент является обычным явлением при рефакторинге компонентов React - давайте воспользуемся этой возможностью. Мы добавим конструктор в Board и установим его начальное состояние так, чтобы оно содержало массив с 9 нулями.

Разработка сайта на react

Эти 9 нулей соответствуют 9 квадратам: Код class Board extends React. В другом предыдущем шаге мы заменили числа разработка сайта на react «X», определяемым собственным состоянием Square. Вот почему Square в настоящее время игнорирует свойство разработка сайта на react, переданное ему компонентом Board. Теперь мы снова будем использовать механизм передачи свойств. Мы изменим Board, чтобы проинструктировать каждый отдельный Square о его текущем значении «X», «O» или null. У нас уже определен массив squares в конструкторе Board. Давайте изменим метод renderSquare в Board, чтобы читать значения из массива: Код Посмотреть полный код. Далее нам нужно изменить то, что узнать больше при нажатии на квадрат.

Компонент Board теперь знает, какие квадраты заполнены. Нам нужно создать для Square способ обновить состояние Board. Поскольку состояние считается приватным по отношению к компоненту, который его определяет, мы не можем обновлять состояние Board напрямую из Square. Чтобы сохранить состояние Board приватным, мы передадим функцию посетить страницу компонента Board компоненту Square. Эта функция будет вызываться при нажатии на квадрат.

Разработка сайта на react

Мы разбиваем возвращаемый элемент на несколько строк для удобства чтения и добавляем скобки, чтобы JavaScript не вставлял точку с запятой после return ломая наш код. Теперь мы передаем потомкам два свойства из Board в Square: value и onClick.

Разработка сайта на react

Свойство onClick - это функция, которую Square может вызывать при нажатии. Внесем следующие изменения в Square: Заменим this. При нажатии на разработка сайта на react React вызывает обработчик события onClickопределенный в методе render компонента Square. Этот обработчик событий вызывает this. Свойство onClick компонента Square было определено компонентом Board. Мы пока не определили метод handleClickпоэтому наш код выдает крэш. Для пользовательских компонентов, таких как Square, наименование зависит от. Мы могли бы как угодно назвать метод onClick компонента Square или метод handleClick компонента Board. Однако в React принято использовать имена on[Event] для свойств, которые представляют события, и handle[Event] для методов, которые обрабатывают события.

Больше информации мы попытаемся кликнуть по квадрату, мы должны получить ошибку, потому что мы еще не определили handleClick. После этих изменений здесь снова можем нажимать на квадраты, чтобы заполнить. Однако теперь состояние хранится в компоненте Board вместо отдельных компонентов Square. При изменении состояния Board компоненты Square автоматически разработка сайта на react.

Разработка сайта на react

Хранение состояния всех квадратов в компоненте Board в будущем позволит определить победителя. Поскольку компоненты Square больше не поддерживают состояние, они получают значения от компонента Board и информируют компонент Board при клике по .

Разработка сайта на react-Информация

В терминах React-компоненты Square теперь являются контролируемыми компонентами. Board их полностью контролирует. Обратите внимание, что в handleClick мы вызываем. Мы сайтов питер цены, почему мы создаем копию массива квадратов в следующей главе. Почему важна неизменяемость В предыдущем примере кода мы предложили использовать оператор. Теперь мы обсудим неизменяемость и то, почему важно её изучить. Как правило, существует два подхода к изменению данных. Первый разработка сайта на react заключается в мутировании данных путем прямого изменения значений.

Разработка сайта на react

Читать статью подход заключается в замене данных новой копией, которая имеет желаемые изменения. Разработка сайта на react функции становятся простыми Разработка сайта на react делает сложные функции намного проще в реализации. Позже в этом учебнике мы реализуем функцию «путешествие во времени», которая позволяет нам просматривать историю игры в крестики-нолики и «перепрыгивать» к предыдущим ходам. Такая функциональность не является специфичной для игр - способность отменять и повторять определенные действия является распространенным требованием в приложениях.

Избежание прямой мутации данных позволяет нам сохранить предыдущие версии истории игры нетронутыми и использовать их позже. Отслеживание изменений Обнаружить изменения в мутируемых изменяемых объектах сложно, потому что они изменяются напрямую. Такое обнаружение требует, чтобы изменяемый объект сравнивался с предыдущими копиями самого себя и всего дерева объектов перемещения. Обнаружение изменений в неизменяемых объектах значительно проще. Если неизменяемый объект, на который ссылаются, отличается от предыдущего, то объект изменился.

Определение момента, когда необходима перерисовка в React Основным преимуществом неизменяемости является то, что она помогает создавать чистые компоненты в React. Неизменяемые данные могут легко определить, были ли внесены изменения, что в свою очередь помогает определить, когда компонент требует повторной отрисовки. Вы можете узнать больше о shouldComponentUpdate и о том, как создавать чистые компоненты, прочитав раздел « Оптимизация производительности ». Компоненты-функции Теперь мы изменим Square на компонент-функцию. В React компоненты-функции являются более простым способом написания компонентов, которые содержат только метод отрисовки и не имеют своего собственного состояния.

Разработка сайта на react-Начало работы с React - Изучение веб-разработки | MDN

Вместо определения класса, который расширяет React. Component, мы можем написать функцию, которая принимает свойства props в качестве входных данных и возвращает то, что должно быть отображено. Компоненты-функции пишутся менее утомительно, чем классы, и многие компоненты могут быть выражены именно таким образом. В классе мы использовали стрелочную функцию для доступа к правильному значению this, но в компоненте функции нам не нужно об этом разработка сайта на react. По очереди Теперь нам нужно исправить очевидный дефект в нашей игре в крестики-нолики: буквы «O» не могут быть отмечены на доске.

Мы установим первый ход в «X» по умолчанию. Мы можем установить разработка сайта на react значение по умолчанию, изменив начальное состояние в нашем конструкторе Board: Код class Board extends React. Объявление победителя Теперь, когда мы показываем, какой игрок ходит следующим, мы также должны показать ситуацию, когда сайта в одинцове выиграна, и ходов больше .

Разработка сайта на react

Если игрок выиграл, мы можем отобразить текст, такой как «Победитель: X» или «Победитель: O». Теперь у разработка сайта на react есть рабочая игра в крестики-нолики. Также вы только что изучили основы React, являясь, возможно, настоящим победителем. Добавление путешествия во времени В качестве последнего упражнения, давайте сделаем возможным «вернуться назад во времени» к предыдущим ходам в игре. Хранение истории ходов Если бы мы мутировали массив squares, реализация путешествия во времени была бы очень сложной. Однако мы использовали slice для создания новой копии массива squares после каждого перемещения и рассматривали его как неизменяемый. Теперь это позволит нам сохранять каждую прошлую версию массива squares и перемещаться между ходами, которые уже произошли.

Мы будем хранить прошлые массивы squares в другом массиве, называемом history. Чем больше проект, тем важнее становится разработка сайта на react структура. Загляните в большое руководство по структурированию react-проектовчтобы создавать удобные и легко поддерживаемые приложения. Взаимодействие с пользователем Добавляем формы. Теперь нужно научить наше SPA отслеживать действия пользователя и реагировать на. Для демонстрации лучше всего посмотреть больше формы, поэтому мы добавим форму обратной связи в наше портфолио. Вот так это будет выглядеть на странице. Форма обратной связи. Добавляем новый компонент ContactForm.

Поэтому при его детальнее на этой странице мы используем класс, наследующий от React.

Разработка сайта на react-Table of contents

Весь рендер при этом переносится в метод render. Обработчики событий. У ContactForm есть также методы-обработчики событий onSubmit отправка формы и onChange по созданию сайта digital значений полей. Поля ввода полностью посмотреть больше React — мы отслеживаем ввод и указываем, что выводить. Чтобы лучше понять, что такое контролируемые компоненты и как происходит изменение данных в формахзагляните в документацию React. Храним состояние формы. Теперь у компонента Приведенная ссылка появляется состояние: форма разработка сайта на react быть закрытой или открытой.

Чтобы хранить этот параметр переделаем App из функционального компонента stateless в классовый и добавим ему поле state. Внизу разместим кнопку, клики по которой нажмите для деталей отслеживать с помощью атрибута onClick. Обратите внимание: Для изменения состояния компонента предназначен метод this. Подробнее о состоянии вы можете прочитать в документации. Страница проекта Добавим в приложение страницы. Хоть разработка сайта на react и используем React, до сих пор в нашем проекте не было ничего особенного.

Мы работаем в пределах одной страницы, отслеживаем события и меняем DOM. Чтобы прикоснуться к магии Single Page Application, нужно в наше приложение добавить страниц. Требования к маршрутизации SPA: Переход между страницами должен происходить без перезагрузки. При вводе в адресную строку некоторого маршрута должен выводиться тот контент, который этому маршруту соответствует, как в мультистраничном приложении. Пакет react-router-dom. Не переживайте, нам не придётся заниматься этим вручную. Честно говоря, нам вообще мало что придётся делать — всё уже сделано. Пакет react-router инкапсулирует логику маршрутизации, а react-router-dom обеспечивает его взаимодействие с DOM в браузере.

Комментарии 5

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *