Руководство по React от одного начинающего разработчика к другому. Мы начинаем с сайта поиска изображений, чтобы немного попрактиковаться.
вступление
React — это популярный фреймворк, который был создан для решения нескольких проблем и с тех пор расширился, чтобы решить многие другие. Это способ передать часть управления сложными приложениями. Я думаю об этом как о забавном способе изобретать HTML-элементы, которые вы хотели бы иметь. Возьмем, к примеру, abc.net.au/news. Те отдельные области, которые вы видите на странице, скорее всего, являются не html-разделами, а тегами React. Возможно, они создали тег под названием Story. В истории вы можете определить, что это за история, что она содержит, CSS, который вам нужен, и еще много чего. Вы можете повторно использовать тег Story на нескольких страницах, создавая прекрасную согласованность на своем сайте. Это одна из проблем, которую Facebook пытался решить, создавая React: они хотели, чтобы каждая страница имела высокий уровень согласованности.
Теги React похожи на элементы html, но богаче.
Основы
Основы, которые следует иметь в виду, следующие.
- Компоненты: если у вас есть опыт работы с рельсами, вам может быть полезно думать о компонентах как о версии классов React.
- Реквизиты: то, как вы получаете данные в компонент. Мы можем настроить работу компонента, изменив свойства.
- Состояние: это данные, которые меняются с течением времени. Одним из источников состояния является пользовательский ввод. Например, пользователь может щелкнуть кнопку определенное количество раз. Состояние этой кнопки привязано к их компьютеру, а не является чем-то, что коренным образом меняет сайт. Еще одним ведущим источником состояния является ajax. Данных нет, когда страница загружается изначально, но они появляются после.
Разработка, управляемая ошибками
Рабочий процесс будет выглядеть следующим образом:
- Создать несуществующий элемент
- Сделать его существующим
- Определение этого
- Сделать это доступным
- Импорт его
Знакомство с React
Когда я изучаю что-то новое, мне нравится окунуться и поиграть с вещами, прежде чем приступить к надлежащему проекту.
Давайте возьмем React на небольшое первое свидание и почувствуем себя комфортно друг с другом. Перейдите или создайте папку, с которой вы хотите работать, в терминале, а затем npx create-react-app flickr. Откройте файл в редакторе, затем вернитесь в терминал и cd flickr и npm run start ИЛИ npm rum start по какой-то причине. Это работает одинаково в любом случае. Если что-то таинственным образом не пошло не так, вы должны были автоматически открыть его в своем браузере. Он предпочитает хром, но есть способы открыть его в firefox или тому подобное в терминале, например, BROWSER=firefox npm rum start. Я считаю, что изменить это навсегда означало бы включить эту строку в ваш файл .bash_profile.
В редакторе перейдите в App.js и внесите следующие изменения в код.
Мы хотим этого:
Вместо этого быть:
<p> Bless us Mark Zuckerberg. Bless our code since you redeemed us so dearly and delivered us from evil, as you gave us a share in this code so may you give us a share in eternal life. </p>Ого, посмотри на это! Он обновил наш текст без необходимости обновления. Все это И он открыл наш файл в браузере без нашего запроса? Так удобно, так продуктивно, вау-вау.
React (для некрутых малышей)
Хорошо, теперь давайте начнем по-настоящему. Я предлагаю создать новую папку в src под названием Components, потому что именно так меня учили делать вещи, как и в случае со всем кодом, есть много способов сделать это. Переместите туда App.js и создайте новый файл с именем Search.js.
Теперь перейдите к index.js и в четвертой строке измените import App from './App'; на import App from './Components/App';.
На данный момент наш сайт все еще не работает, но это нормально. Мы занимаемся разработкой, управляемой ошибками. Совет: каждый раз, когда ваш код дает сбои, называйте это разработкой, управляемой ошибками, чтобы утешить себя.
В App.js давайте создадим компонент, которого еще не существует, а затем сделаем так, чтобы он существовал. Это рабочий процесс, детки.
Взгляните на ошибку, здесь мы получаем сигнал для нашей следующей работы. Определение «Поиск».
Существует множество способов, которыми вы могли бы определить поиск, но есть общепринятая практика, согласно которой люди будут смотреть на вас косо из-за неповиновения. Итак, давайте сделаем это с некоторой деструктуризацией объекта и избежим избиения и кражи денег на обед.
Render — это единственный метод, который вы обязательно должны определить в компоненте класса. Без рендера у вас вообще нет компонента.
Боже, какая интересная страница у нас здесь.
Давайте приступим к созданию формы поиска.
В коде Search.js выводится следующее
Еще более интересная страница! Смотри, мы идем. Хорошо, эта штука в конце концов должна что-то сделать. Начнем с этого фронта.
Если вы смотрите на это и думаете: «Это многое нужно принять». Справедливый. Давайте немного разберемся.
Конструктор необходим, когда мы инициализируем состояние и привязываем методы к нашему классу. Первое, без чего конструктор не может обойтись, это super(props).
Конструкторы React служат двум основным целям. Состояние инициализации, т.е. this.state = { value: " " }; . И привязка обработчиков событий к нашим методам, т.е. .bind(this);.
Все эти ссылки на состояние и значение, например. <input type="text" value={ this.state.value } onChange={ this.handleChange } placeholder="Search" autoFocus /> являются примерами того, как React обрабатывает изменения состояния и рендеринг. React — это единственный источник достоверной информации о состоянии компонентов, он отображается при загрузке страницы и реагирует на ввод данных пользователем, обрабатывая изменения и обновляя модель DOM. handleChange запускается при каждом нажатии клавиши, обновляя DOM по мере ввода пользователем. React касается DOM и инструктирует нас не сметь даже смотреть на него. Пусть матушка Цукерберг сделает это за вас, и не забивайте себе голову этим. ДОМ. Без касаний. Понятно? Хорошо.
Давайте рассмотрим нашу очень функциональную форму поиска.
Шум.
Во второй части этой серии мы заставим работать поиск изображений, будем использовать синтаксис, который обычно используется сообществом, и подключим API flickr.
Первоначально опубликовано на https://yasmina95.hashnode.dev.
