Учебник. React в Windows для начинающих
Если вы только начинаете свое знакомство с React, это руководство поможет вам начать работу.
Предварительные требования
Несколько основных терминов и понятий
React — это библиотека JavaScript для создания пользовательских интерфейсов.
Это решение с открытым кодом — вы можете участвовать в этом проекте, публикуя проблемы и запросы на вытягивание. (См. эту документацию!)
Это декларативная библиотека — вы пишете нужный код, с которым затем React выполняет все действия JavaScript и DOM, чтобы получить нужный результат.
Она также основана на компонентах — приложения создаются с помощью готовых и многократно используемых независимых модулей кода, которые управляют собственным состоянием и которые можно объединить с помощью платформы React. Это позволяет передавать данные через приложение, сохраняя состояние из модели DOM.
Основной принцип работы с React: «Выучи один раз, используй везде». Целью является повторное использование кода. Вам не нужно делать предположения о том, как вы будете использовать пользовательский интерфейс React с другими технологиями. Вместо этого нужно сделать компоненты многократно используемыми без необходимости перезаписывать существующий код.
JSX — это расширение синтаксиса для JavaScript, написанное для использования с React. Оно выглядит как HTML, но фактически является файлом JavaScript, который необходимо скомпилировать или преобразовать в обычный код JavaScript.
Виртуальная модель DOM — модель DOM представляет пользовательский интерфейс приложения. При каждом изменении состояния пользовательского интерфейса приложения модель DOM обновляется для представления изменений. Если модель DOM обновляется часто, производительность снижается. Виртуальная модель DOM — это визуальное представление модели DOM, поэтому при изменении состояния приложения обновляется виртуальная модель DOM, а не сама модель DOM, что позволяет оптимизировать производительность. Это репрезентация объекта DOM, упрощенная копия.
Представления — это то, что видит пользователь в браузере. В React представление связано с понятием элементов отрисовки, которые пользователь должен видеть на экране.
Состояние — это данные, хранимые в разных представлениях. Состояние обычно зависит от прав и действий пользователя. Например, при входе на веб-сайт может отображаться ваш профиль пользователя (представление) с вашим именем (состояние). Данные состояния зависят от пользователя, но представление не меняется.
Использование React в Visual Studio Code
Создать приложение с помощью React можно разными способами (примеры см. в статье Общие сведения о React). В этом учебнике описано, как использовать create-react-app для ускорения настройки работающего приложения React, чтобы вы могли сосредоточиться на экспериментах с кодом, а не отвлекаться на средства сборки.
Измените каталоги, чтобы перейти в папку для нового приложения ( cd hello-world ), и запустите приложение ( npm start ).
Новое приложение React Hello World будет скомпилировано. Затем оно откроется в веб-браузере по умолчанию по адресу localhost:3000.
Найдите файл src/App.js и перейдите в следующий раздел заголовка:
Измените его следующим образом:
Использование React с API
Используя то же приложение Hello World, созданное с помощью React и обновленное в Visual Studio Code, мы добавим вызов API для отображения некоторых данных.
Во-первых, мы удалим все содержимое из этого файла app.js и сделаем из него компонент класса. Сначала мы импортируем компонент из React для создания компонента класса. (Типов компонентов два: класс и функция.) В оператор return() также будет добавлен пользовательский код JSX. Чтобы увидеть результат, нужно перезагрузить страницу.
Теперь файл app.js будет выглядеть так:
Чтобы добавить локальное состояние, необходимо сначала добавить конструктор. При реализации конструктора для подкласса React.Component следует вызывать super(props) перед любым другим оператором. В противном случае this.props не удастся определить в конструкторе, что может привести к ошибкам. Данные в компоненты передают свойства.
Теперь файл app.js будет выглядеть так:
Структура React REST API приложения + TypeScript + Styled-Components
Доброго %время_суток, хабровчане!
Какие-либо статьи я еще не писал, опыта в этом нет от слова совсем. Поэтому, пожалуйста, не судите строго и прошу заранее прощения, если где-то совершу ошибки.
Это для меня совершенно новый опыт, мне никогда еще не доводилось делиться своим опытом и наработками с сообществом.
Предисловие
Когда я только начал знакомиться с React, мне приходилось искать, и искать довольно-таки долго, информацию, которая помогла бы мне грамотно организовать структуру моих будущих проектов, но дельной информации было мало.
Кто-то советовал делать плоскую структуру, в том числе и для папки, в которой находятся компоненты, кто-то же советовал просто разделять компоненты на «Молекулы», «Организмы» и т.д., но при этом, почти все, мало внимания уделяли сервисам, хукам, а именно тому, что содержало логику, не говорили о том, где лучше и как лучше их хранить.
Буду очень рад, если вы оставите предложения по улучшению данной структуры, как и вашей конструктивной критике.
Components
Начну, пожалуй, с компонентов.
Компоненты, в данной структуре, разделяются на:
UI (UI, как ни странно)
Первые четыре группы (Smart, Ordinary, Simple и UI) хранятся в папке Components.
Поговорим немного о них:
Данные компоненты не могут использовать свое локальное хранилище и обращаться к глобальному.
Не могут использовать локальное хранилище и обращаться к глобальному.
Не могут использовать хуки, кроме тех, что изначально поставляются с React (за исключением useState).
Могут использовать в своей реализации UI компоненты.
Не могу использовать локальное хранилище, как и обращаться к глобальному.
Не могут использовать хуки, кроме тех, что изначально поставляются с React (за исключением useState).
Могут использовать в своей реализации Simple и UI компоненты.
Могут использовать локальное хранилище, как и обращаться к глобальному (не изменяя его)
Могут использовать все доступные хуки, кроме тех, что взаимодействуют с сетью
Могут использовать в своей реализации Ordinary, Simple и UI компоненты.
Структура папки Componets:
Оставшиеся две группы (Containers и Pages) имеют отдельные папки в корне приложения (папка src).
Структура корневой папки:
Сами компоненты должны иметь отдельные папки, есть 2 (это число не является константой) файла:
Пример компонента Align. Хотелось бы сказать, что этот компонент попадает под группу «Simple», так как он является глупым (не имеет нужды в локальном хранилище) и не заменяет никакой нативный, браузерный, UI компонент.
Теперь, поговорим о самом сладком.
Данная папка является «ядром» вашего приложения. В ней хранится все, для взаимодействия с сервером, глобальное хранилище, тема вашего приложения и т.д.
Эта папка содержит:
Примеры содержимого папок
Довольно-таки удобно хранить все роуты в одном файле. Если вдруг со стороны бэкенда изменятся роуты, то их легко можно будет изменить в одном файле, не проходясь, при этом, по всему проекту.
Ух ты! Как же много получилось.
И напоследок.
Есть еще несколько, немаловажных папок, которые также следует упомянуть:
Остается еще 2 файла:
Примерно так он может выглядеть:
Он же может выглядеть примерно так:
И на этом, я думаю, стоит закончить.
Итоговая структура выглядит вот так:
Заключение
Если вам понравилась эта статья и вы узнали что-то интересное для себя, то я очень этому рад.
Ссылка на репозиторий (прошу прощения за такой скудный ридми, мне еще не по силам разговорный английский).
Применение в React REST API с помощью Fetch и Axios
Если вы являетесь React-разработчиком и хотите узнать, как начать использовать API в своих React-приложениях, то эта статья для вас. Мы объясним, что такое REST API и как можно создать простое приложение, которое использует REST API с помощью Fetch API и Axios.
Применить REST API в React-приложениях можно различными способами, но в этом руководстве мы рассмотрим, то, как можно применить REST API, используя два наиболее популярных метода, известных как Axios (HTTP-клиент на основе промисов) и Fetch API (встроенный в браузер веб-API). Мы подробно рассмотрим и реализуем каждый из этих методов и объясним некоторые интересные функции, которые может предложить каждый из этих методов.
API — это то, что мы можем использовать, чтобы загрузить React-приложения данными. Есть определенные операции, которые нельзя выполнить на стороне клиента, поэтому эти операции выполняются на стороне сервера. Затем мы можем использовать API-интерфейсы для использования данных на стороне клиента.
API состоят из набора данных, которые часто представлены в формате JSON с указанными конечными точками. Когда мы получаем доступ к данным из API, мы хотим получить доступ к определенным конечным точкам в этой структуре API. Также можно сказать, что API — это соглашение между двумя службами в форме запроса и ответа. Код является побочным продуктом. Он также содержит условия обмена данными.
В React доступны различные способы использования REST API в приложениях, в том числе использование встроенного JavaScript- метода fetch() и Axios, который является HTTP-клиентом на основе промисов для браузера и Node.js.
Примечание. Хорошее знание ReactJS, React Hooks, JavaScript и CSS пригодится вам, когда вы будете изучать это руководство.
Давайте начнем с изучения дополнительных сведений о REST API.
Что такое REST API
REST API — это API, который структурирован в соответствии с REST структурой для API. REST означает «передача состояния представления». Он состоит из различных правил, которым следуют разработчики при создании API.
Преимущества REST API
Пример ответа REST API
То, как структурирован REST API, зависит от продукта, для которого он был создан, но при этом должны соблюдаться правила REST.
Применение API с помощью Fetch API
Метод fetch() API всегда принимает обязательный аргумент, представляющий собой путь или URL-адрес ресурса, который вы хотите получить. Он возвращает промис, который указывает на ответ от запроса, независимо от того, был ли запрос успешным или нет. При желании вы также можете передать объект параметров инициализации в качестве второго аргумента.
После получения ответа доступно несколько встроенных методов, позволяющих определить, каково содержимое тела и как его следует обрабатывать.
Разница между Fetch API и jQuery Ajax
Fetch API отличается от jQuery Ajax тремя основными моментами:
Параметры для Fetch API
Базовый синтаксис для использования Fetch API
Простой запрос на выборку может выглядеть следующим образом:
В приведенном выше коде мы извлекаем данные из URL-адреса, который возвращает данные в формате JSON, а затем выводим их в консоль. Простейшая форма использования fetch() часто принимает только один аргумент — путь к ресурсу, который вы хотите получить, и затем возвращает промис, содержащий ответ на запрос на выборку. Этот ответ является объектом.
Ответ — это обычный HTTP-ответ, а не фактический JSON. Другими словами, чтобы получить содержимое тела JSON из ответа, нам нужно изменить ответ на фактический JSON, используя в ответе метод json().
Использование Fetch API в приложениях React
Использование Fetch API в React-приложениях — это стандартный способ, которым мы использовали бы Fetch API в JavaScript, синтаксис не изменится. Единственная проблема — решить, где выполнить запрос на выборку в React- приложении. Большинство запросов на выборку или HTTP-запросы любого рода обычно выполняются в React Component.
Например, в приведенном ниже коде мы выполним запрос на выборку внутри компонента класса, а это означает, что мы должны сделать это внутри метода жизненного цикла. В этом конкретном случае наш запрос на выборку будет выполнен внутри метода жизненного цикла componentDidMount, потому что мы хотим выполнить запрос сразу после монтирования компонента React.
В приведенном выше коде мы создаем очень простой компонент класса, который после завершения монтирования компонента React выполняет запрос на выборку, выводящий окончательные данные из запроса на выборку по URL-адресу API в консоль браузера.
Метод fetch() принимает путь к ресурсу, который мы хотим извлечь, он присваивается переменной с именем apiUrl. После завершения запроса на выборку возвращается промис, содержащий объект ответа. Затем мы извлекаем из ответа содержимое тела JSON, используя метод json(), и, наконец, выводим окончательные данные из промиса в консоль.
Давайте применим REST API с помощью метода Fetch
В этом разделе мы создадим простое React- приложение, которое использует внешний API, при этом мы будем применять метод Fetch для использования API.
Простое приложение будет отображать все репозитории, которые принадлежат конкретному пользователю, и их описание. В этом руководстве я буду использовать свое имя пользователя GitHub, вы также можете использовать свое, если захотите.
Первое, что нам нужно сделать, это сгенерировать React-приложение с помощью create-react-app:
Эта команда загрузит новое React-приложение. Когда новое приложение будет создано, остается только запустить приведенную ниже команду и начать создание кода:
Если все было сделано правильно, мы должны увидеть это в окне браузера, когда перейдем по адресу localhost:3000 после выполнения приведенной выше команды.
Файл List.js будет обрабатывать отображение рипозиториев в виде списка, а файл withListLoading.js будет содержать компонент высшего порядка, который будет отображаться, когда запрос Fetch будет находиться в процессе выполнения.
Давайте вставим приведенный ниже код в файл List.js, который мы создали внутри папки components:
Приведенный выше код является базовым компонентом списка React, который отображает данные, в нашем конкретном случае, имена репозиториев и их описания в списке.
Теперь позвольте мне объяснить код по частям.
Мы инициализируем свойство для компонента, который называется repos.
Все, что мы делаем здесь — это создаем условный оператор, который будет отображать сообщение, когда длина repos, получаемого нами из запроса, равна нулю.
Здесь мы сопоставляем каждый из репозиториев, который будет предоставлен запросом API, и извлекаем каждое из имен репозиториев и их описания, а затем отображаем их в списке.
Здесь мы экспортируем компонент List, чтобы иметь возможность использовать его где-то еще.
В файл withListLoading.js, который мы создали в папке components, давайте вставим следующий код:
Файл App.js является функциональным компонентом, который использует React Hooks для обработки состояния, а также побочных эффектов.
Позвольте мне объяснить приведенный выше код.
Здесь мы импортируем все необходимые внешние файлы, а также компоненты, которые создали в папке components. Мы также импортируем нужные нам React Hooks.
Здесь мы создаем новый компонент с именем ListLoading и назначаем withListLoadingкомпонентом высшего порядка, обернутым вокруг компонента списка. Затем мы создаем значения состояния loading и repos и используем React Hook useState().
Здесь мы инициализируем React Hook useEffect(). В хуке useEffect() мы устанавливаем для начального состояния загрузки значение true, пока это так, наш компонент более высокого порядка будет отображать сообщение. Затем мы создаем глобальную переменную с именем user и назначаем ей URL API, из которого будем получать данные репозиториев.
Затем мы выполняем базовый запрос fetch(), как мы уже рассмотрели выше, а затем, после того как запрос выполнен, мы устанавливаем для состояния загрузки приложения значение false и заполняем состояние репозитория данными, которые получили из запроса.
Здесь мы в основном просто отображаем Component, который мы назначили компонентом высшего порядка, а также заполняем свойства isLoading и repos значениями состояния.
Теперь, когда запрос на выборку находится в процессе выполнения, мы должны увидеть в браузере следующее:
Когда запрос на выборку завершился успешно, мы должны увидеть репозитории, отображаемые в виде списка, как показано ниже.
С помощью приведенного выше кода мы сделаем наше приложение выглядящим более аккуратно, мы присваиваем различные имена классов каждому элементу в файле App.js и, таким образом, используем эти имена классов для стилизации приложения.
После того, как мы применили стили, приложение должно выглядеть следующим образом:
Теперь приложение выглядит намного лучше.
Вот как мы можем использовать Fetch API для применения REST API. В следующем разделе мы рассмотрим Axios и то, как мы можем использовать его для применения того же API в том же приложении.
Применение API с помощью Axios
Axios — это простой в использовании HTTP-клиент для браузера и node.js на основе промисов. Поскольку Axios основан на промисах, мы можем воспользоваться асинхронностью и ожидать более читабельного и асинхронного кода. С помощью Axios мы получаем возможность перехватывать и отменять запросы, а также у нас появится встроенная функция, которая обеспечивает защиту от подделки межсайтовых запросов на стороне клиента.
Функции Axios
Выполнение запросов с помощью Axios
Выполнить HTTP-запросы с помощью Axios довольно просто. Приведенный ниже код демонстрирует выполнение HTTP-запроса.
Приведенный выше код демонстрирует основные способы выполнения HTTP-запросов GET и POST с помощью Axios.
Axios также предоставляет набор сокращенных методов для выполнения различных HTTP-запросов:
Например, если мы хотим выполнить запрос, аналогичный примеру кода, приведенного выше, с помощью сокращенных методов, мы можем сделать это следующим образом:
В приведенном выше коде мы выполняем тот же запрос, что и в предыдущем примере, но на этот раз с помощью сокращенного метода. Axios обеспечивает гибкость и делает HTTP-запросы еще более читабельными.
Выполнение нескольких запросов с помощью Axios
Axios предоставляет разработчикам возможность создавать и обрабатывать одновременные HTTP-запросы с использованием метода axios.all(). Этот метод принимает массив аргументов и возвращает один объект промиса, который разрешается только после разрешения всех аргументов, переданных в массиве.
Например, мы можем выполнить несколько запросов к API GitHub, используя метод axios.all(), приведенный ниже:
Приведенный выше код параллельно выполняет запросы к массиву аргументов и возвращает данные ответа, в нашем случае он выводит в консоль объект created_at из каждого из ответов API.
Давайте применим REST API с клиентом Axios
В этом разделе мы заменим в нашем существующем React-приложении метод fetch() на Axios. Все, что нам нужно сделать, это установить Axios, а затем использовать его в файле App.js для отправки HTTP-запроса к API GitHub.
Теперь давайте установим Axios в нашем React-приложении, выполнив одно из следующих действий:
После завершения установки мы должны будет импортировать axios в App.js. В файле App.js мы добавим в самое начало следующую строку:
После добавления этой строки кода в файл App.js все, что нам нужно будет сделать, это внутри useEffect() прописать следующий код:
Возможно, вы заметили, что теперь мы заменили fetch API на сокращенный метод Axios axios.get, чтобы выполнить get-запрос к API.
В этом блоке кода мы выполняем запрос GET, затем возвращаем промис, содержащий данные репозиториев, и присваиваем данные глобальной переменной с именем allRepos. Затем мы устанавливаем для текущего состояния загрузки значение false и также передаем данные из запроса в переменную состояния repos.
Если вы все сделали правильно, то увидите, что наше приложение по-прежнему отображается без каких-либо изменений.
Вот как мы можем использовать клиент Axios для применения REST API.
Fetch или Axios
В этом разделе я перечислю некоторые функции, а затем расскажу, насколько хорошо Fetch и Axios поддерживают их.
Заключение
И Axios, и fetch() — это отличные способы применения API, но я советую использовать fetch() при создании относительно небольших приложений и Axios при создании больших приложений по причинам масштабируемости. Надеюсь, вам понравилось работать с этим руководством, вы всегда можете прочитать больше о применении REST API с помощью Fetch или Axios в источниках по ссылкам ниже. Если у вас есть какие-либо вопросы, вы можете задать их в комментариях к этой статье.
Дополнительные ресурсы
Пожалуйста, оставьте ваши комментарии по текущей теме статьи. За комментарии, подписки, дизлайки, отклики, лайки низкий вам поклон!
Пишем API для React компонентов, часть 1: не создавайте конфликтующие пропсы
Пишем API для React компонентов, часть 1: не создавайте конфликтующие пропсы
Этот пост — перевод первой статьи из серии статей Writing good component API, за авторством @Sid. При переводе, в любой непонятной ситуации, я буду руководствоваться официальным переводом документации React JS на русский язык
Когда речь идет о React компонентах, ваши пропсы — это ваш API.
Хороший API должен быть понятным, таким что бы разработчик мог сам догадаться как с ним работать. Это относиться не только к разработке библиотек компонентов, но и к разработке приложений. Важно что бы вам и вашей команде было удобно использовать компоненты и их API.
После прочтения множества статей + лекций, и после более года проектирования дизайн системы cosmos, я пришел к этим принципам разработки.
Возможно, вам также понадобится основная кнопка, которая нужна для основного действия на странице. Раньше мне нравилось формировать API, как если бы я мог сказать — «Дайте мне основную кнопку»:
Теперь, как это обычно и бывает с кнопками, вам понадобятся еще несколько вариантов. Вот как выглядит таблица нескольких пропсов для кнопок:
| имя | описание | тип | значение по умолчанию |
|---|---|---|---|
| primary | нужно для обозначения основного действия | boolean | false |
| secondary | для действий которые менее важны | boolean | false |
| destructive | Опасная кнопка, для действий с которыми пользователь должен быть осторожен, пример: удаление | boolean | false |
| link | нужно для отображения кнопки как ссылки | boolean | false |
Есть несколько пропсов, которые можно использовать для изменения внешнего вида кнопки. Что будет если кто-то использует их вместе?
Победит ли кто-нибудь из них? От чего это зависит? От порядка?
Зачем вообще кому-то это писать? Существует ли реальный случай когда вам нужно сказать «Дайте мне primary destructive кнопку»?
В большинстве случаев это ошибка. Но если разработчикам вообще приходится задавать такие вопросы (как выше приведенные), это, вероятно, не очень хороший API.
Для того кто решает каким будет API, важно:
Итак, вот совет № 1: не создавайте конфликтующие пропсы.
Мы можем довольно легко исправить приведенный выше код, используя проп который позволит получить список вариантов. Назовем его appearance (внешний вид)
Мы можем добавить список поддерживаемых вариантов для appearance используя prop-types (типы пропсов).
Теперь, даже если разработчик допустит ошибку, он получит предупреждение об этом в своем инструменте разработки.
Этот совет довольно прост в реализации, но он сделает ваш API намного проще в использовании (и поддержке).
От переводчика — я будут обновлять список статей этой серии (в начале) по мере перевода и выхода новых статей.
