Итак, если вы впервые погружаетесь в этот блог - я кратко объясню. Я учусь в Лямбда-школе около 7 недель. Во время учебы в школе я вел дневник и планировал этапы; однако я хотел задокументировать время, проведенное там. Начиная с прошлой недели я опубликовал свой первый пост в блоге - и с тех пор я публикую еженедельные обновления о времени, проведенном в Lambda. С учетом сказанного, вот моя еженедельная перепечатка, посвященная одностраничным приложениям!
Неделя 7: React Router
На этой неделе мы познакомились с миром React Router. Я узнал разницу между маршрутизацией на стороне клиента и на стороне сервера. По сути, React Router допускает маршрутизацию на стороне клиента, чрезвычайно эффективный «чит-код», если хотите. Стандартная маршрутизация на стороне сервера требует перезагрузки страницы и требует, чтобы сервер отображал различные страницы вашего веб-сайта или веб-приложения. Используя React Router, React.js имеет встроенный пакет, в котором вы можете локально маршрутизировать страницы между страницами на стороне клиента приложения, в результате чего нет необходимости обновлять страницу или получать любую нелокальную информацию. Как здорово! Вот как сложилась неделя:
День 1: Знакомство с React Router
Этот день был отличным первым впечатлением от работы с React Router. Мы изучили основы установки и импорта React Router. С пакетом у вас есть доступ к множеству ключевых компонентов. Некоторые из основных: Route
, Link
, BrowserRouter
.
По сути, импорт BrowserRouter
позволяет вашему приложению использовать React Router. Я полагаю, можно сказать, что это ключ разблокировки. волшебный проход. Секретный проход! Обертывание этого приложения на React дает неограниченные возможности!
Далее идет Route
. Что помогло мне понять цель Route
, так это то, что он предоставляет доступ к этому пути. По сути, Link
приведет вас к _8 _._ 9_ позволит вам указать другой URL-адрес и, как следствие, загрузить другой контент, связанный с этим маршрутом. Например, у вас может быть домашняя страница: https://www.test-website.com/
, и она будет отображать что-то похожее на главную страницу.
Теперь предположим, что у вас есть другой контент, возможно, страница контактов или страница с информацией, с информацией, полностью отличной от домашней страницы. Вы можете использовать Route
, чтобы указать новый целевой URL: https://www.test-website.com/about
. Когда все делается локально, ничего не обновляется, он просто повторно отображает новый контент на экран. Супер весело! С этим безгранично множество возможностей!
Наконец был Link
, чтобы завершить первый день одностраничных приложений. Короче говоря, Link
- это просто теги привязки с некоторыми дополнительными функциями, встроенными в компонент React. Ссылка позволяет указать желаемое местоположение маршрута и установить пункт назначения в качестве атрибута href
тега привязки. С маршрутами и ссылками все стало настолько эффективно!
День 2: React Router продолжился.
Это был день, когда он стал немного более подробным и немного более запутанным. Тем не менее, это все равно было очень весело! Мы рассмотрели разницу между component
и render
в компоненте Route
. Также, касаясь того, какие реквизиты автоматически передаются с помощью Route
по умолчанию. Завершить день компонентом NavLink
- теперь это я называю изящным компонентом.
render
и component
очень похожи с одним полезным отличием: атрибут render позволяет передавать свойства компоненту, который вы визуализируете. В React Router Route
автоматически получает три реквизита, но с помощью атрибута component
у вас нет возможности передать какие-либо дополнительные реквизиты, такие как состояние или функцию, которую вы сохранили в этом файле. . render
позволяет вам просто передавать эти фрагменты кода в качестве свойств, как и любой другой компонент, в дополнение к передаче Route
свойств по умолчанию, которыми являются match
, history
и location
. Я относительно все еще не уверен в функциональности всех этих реквизитов, поэтому оставлю это на другой день. Ниже приведен пример того, как будут выглядеть два разных маршрута: один - с использованием component
, а другой - с использованием render
.
<Route path="/pathHere" component={ExampleComponent} />
а также
<Route path="/pathHere" render={(props) =>
<ExampleComponent {...props} exampleProps={exampleProps} /> }
/>
В render
примере, чтобы получить реквизит от Route
, вы просто берете реквизит с оператором rest ...
, и все готово! Вся тяжелая работа сделана за вас - так здорово!
Компонент NavLink
действительно хорош, поскольку он имеет только одно существенное отличие от стандартного компонента Link
- activleStyle
или activeClassName
. Короче говоря, NavLink
получает один из этих атрибутов, который является либо встроенными стилями, либо именем класса, который вы добавляете в компонент. Эти стили применяются только тогда, когда эта ссылка используется / активна.
Результат? Вы получите причудливый стиль для своих навигационных ссылок! Например, вкладка Home
может быть выделена только тогда, когда вы находитесь на этой странице, а вкладка About
- только тогда, когда вы просматриваете страницу «О нас» - Это меня воодушевило!
День 3: Управление формами в React
Позвольте мне начать с того, что в формах так много всего, что я не буду вдаваться в 8-страничный обзор того, как использовать формы в React, ха-ха! В этом разделе я просто расскажу о некоторых основополагающих принципах.
Таким образом, мы научились использовать элементы form
, label
и input
для создания красивой и простой формы. Форме нужны две функции, чтобы она работала: onChange
и onSubmit
. По моему опыту, эти функции обычно называются handleChange
и handleSubmit
. handleChange
отвечает за установку вашего состояния React на значение, которое помещено в элемент input
.
import React, { useState } from "react"; const Form = props => { const [user, setUser] = useState({ id: '', name: '', email: '' }); const handleChange = (event) => { const { name, value } = event.target; setUser({...user, [name]: value}); }; const handleSubmit = (event) => { event.preventDefault(); setUser({ name: '', email: '' }); }; return ( <form onSubmit={(event) => handleSubmit(event)}> <label> Name: <input onChange={(event) => handleChange(event)} name="name" type="text" value={user.name} /> </label> <label> E-Mail: <input onChange={(event) => handleChange(event)} name="email" type="email" value={user.email} /> </label> <button>Submit!</button> </form> ); } export default Form;
У нас есть форма с состоянием user
, содержащим все входные значения. Функция handleChange
, которая устанавливает значение поля ввода для объекта с этой парой "ключ-значение" в состоянии user
. handleSubmit
просто очищает форму после ее отправки. Ниже находится фактическая визуализируемая форма. Следует обратить внимание на один важный атрибут - value
на каждом входе. Этот атрибут value
заявляет, что, каким бы ни было значение состояния user
, отображать это значение внутри ввода. Таким образом, вы можете видеть, что набираете, в режиме реального времени!
handleSubmit
отвечает за отправку данных в API, используя такую функцию, как axios.post()
, а также очищает поля ввода и отображает новую форму для использования. Я рассматриваю handleSubmit
как «прощание» с формой, над которой вы работали - увидимся позже!
e.preventDefault();
или event.preventDefault();
предотвращает перезагрузку страницы при отправке формы и потенциально теряет все введенные вами значения.
День 4: Расширенное управление формами с Formik и Yup
Если бы мне пришлось как следует сесть и объяснить вам все о Формике и Ага, я бы, по сути, заново преподавал всю лекцию - ха-ха! Эти инструменты такие мощные, но я сделаю все возможное, чтобы они были краткими.
Formik - это библиотека, которую можно использовать в React, что, по сути, делает ваши формы столь же эффективными, но устраняет тонну лишнего кода. Он имеет встроенные компоненты Form
и Field
с массой уникальных надстроек к ним, облегчающих вашу жизнь! Я настоятельно рекомендую взглянуть на то, на что способен Formik. Я собираюсь использовать их гораздо чаще!
Ага, также было очень интересно исследовать - по сути, это позволяет вам реализовать проверку формы. Вы знаете, эти супер-крутые сообщения об ошибках, в которых говорится: Ура! Ваш пароль не соответствует требованиям. или, Это недопустимый формат электронной почты! Ага, дорабатывает ваши формы и делает их действительно законченными и законченными с точки зрения пользователя. Множество творческих идей и возможностей с помощью Yup. Мне очень понравилось узнавать об этом!
Рассмотрение
Эта неделя была действительно информативной и определенно немного проверила мои навыки. До этой недели мне еще не приходилось бороться с какой-либо учебной программой, но на этой неделе я определенно вступил в борьбу! Однако к концу недели я почувствовал себя уверенно, применяя то, что узнал. React Router - отличный инструмент для быстрой и эффективной загрузки разных страниц. Формы являются основным продуктом многих веб-сайтов и веб-приложений, а Formik помогает упростить создание потрясающих форм! Кроме того, с помощью Yup вы можете оживить свои формы, чтобы они были организованы, чисты, структурированы и просты в использовании!
Важнейший вывод
По мере того, как темы становятся все более глубокими и сложными, нередко возникают трудности и требуется больше, чем несколько часов в день, чтобы полностью усвоить концепцию. Эта неделя была унизительной и научила меня, что некоторые концепции требуют дополнительного внимания, чтобы полностью понять. Будьте терпеливы и практикуйтесь как можно больше. Всегда применяйте то, что вы узнали, пытайтесь сломать это. Исправьте. Учитесь на ошибках. Промойте и повторите!