Итак, если вы впервые погружаетесь в этот блог - я кратко объясню. Я учусь в Лямбда-школе около 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 вы можете оживить свои формы, чтобы они были организованы, чисты, структурированы и просты в использовании!

Важнейший вывод

По мере того, как темы становятся все более глубокими и сложными, нередко возникают трудности и требуется больше, чем несколько часов в день, чтобы полностью усвоить концепцию. Эта неделя была унизительной и научила меня, что некоторые концепции требуют дополнительного внимания, чтобы полностью понять. Будьте терпеливы и практикуйтесь как можно больше. Всегда применяйте то, что вы узнали, пытайтесь сломать это. Исправьте. Учитесь на ошибках. Промойте и повторите!