React — это библиотека JavaScript для создания пользовательских интерфейсов (UI). Он поддерживается и разрабатывается Facebook и является одним из самых популярных инструментов для создания веб-приложений сегодня.
Тем не менее, он имел репутацию не очень удобного в использовании приложения React, особенно для начинающих. Проблема связана с тем, когда React впервые стал популярным, а стандартный метод создания приложения React включал сложную ручную настройку всего набора файлов установки.
Многие учебники, предназначенные для помощи начинающим в React, представили различные подходы и инструменты для настройки работающего приложения. Даже с небольшими различиями между предлагаемыми методами сборки путаница была неизбежна.
Чтобы успешно настроить приложение React с помощью ручной настройки, требуется хорошее понимание нескольких различных технологий.
Такая гибкость в настройке на самом деле отличная вещь. У вас есть полная свобода выбора конкретных инструментов, которые вы хотите создать для своего приложения React, и их точной настройки.
Когда вы освоитесь с этими инструментами, у вас появится уверенность в том, чтобы использовать их в полной мере и создавать всесторонне сложные приложения. До тех пор все еще остается барьер входа для многих разработчиков, которые не обязательно имеют опыт работы с инструментами командной строки, необходимыми для создания приложений React.
Чтобы помочь справиться с этим разочарованием, в этой серии руководств рассматриваются различные методы настройки приложений React. Мы начнем с самого простого подхода, а затем перейдем к более сложным настройкам. Давайте начнем с этого, пояснив более подробно типы настроек React, которые мы рассмотрим.
Что мы будем покрывать
К концу этой серии руководств вы сможете настроить приложения React четырьмя основными способами:
- используя онлайн-редактор кода (CodePen)
- базовая ручная настройка, без Node.js или npm
- используя приложение create-реагировать
- полная ручная настройка и настройка
Первый способ демонстрирует, как использовать онлайн-редактор кода, такой как CodePen, для очень быстрой настройки приложения React. Используя этот метод, вы будете кодировать свое первое приложение буквально за считанные секунды!
Затем мы переходим к настройке React в локальной среде разработки, начиная с непосредственного добавления сценариев в файл HTML, не используя никаких инструментов сборки. Следующие два метода настройки сосредоточены на том, как вы настроите типичное приложение React в своей повседневной разработке.
Как вы увидите, использование инструмента create-реагировать-приложение позволяет очень просто раскрутить приложения React с помощью одной команды! Наконец, мы рассмотрим, как настроить приложение React через командную строку полностью с нуля, как в старой школе.
Каждый метод настройки имеет свое место, и нет единого «лучшего» подхода, есть только альтернативы в зависимости от ваших потребностей.
React — фантастическая библиотека для создания веб-приложений, и это очень весело! Давайте теперь посмотрим на предварительные условия учебника, чтобы убедиться, что вы в курсе.
Предпосылки
Самый простой способ настройки приложения React не требует ничего, кроме подключения к Интернету. Однако по мере перехода к более сложным настройкам мы будем переходить к настройке приложения React с нуля. Поэтому некоторые знания по следующим темам рекомендуется.
Командная строка
Windows, macOS и Linux предоставляют доступ к инструментам командной строки. Они широко используются в современной веб-разработке для быстрого и эффективного выполнения сложных задач. Если у вас нет опыта работы с командной строкой для выполнения таких операций, как управление файлами / папками, установка инструментов, запуск сценариев и т. Д., Тогда вам стоит хотя бы изучить основы.
Node.js и NPM
Если вы занимались веб-разработкой какое-то время, скорее всего, вы хотя бы слышали о Node.js и npm . Node.js изначально был создан для запуска JavaScript на сервере, но также широко используется для разработки веб-приложений, упрощения и автоматизации общих задач в единой среде.
Доступны буквально сотни тысяч модулей Node.js, а npm был представлен в качестве выделенного менеджера пакетов, помогающего устанавливать, организовывать и управлять всеми различными модулями в вашем веб-приложении. Поскольку npm поставляется с Node.js, все, что вам нужно сделать, это установить последнюю версию Node.js в вашей системе, чтобы сделать ее доступной через командную строку.
JavaScript
Для настройки и разработки приложений React требуется разумный уровень JavaScript. В противном случае вы наверняка будете в какой-то момент бороться за создание приложений React любой глубины или сложности. Это включает в себя некоторые функции ES6, такие как функции стрелок, классы и модули. Я рекомендую освежить свои навыки JavaScript, если это необходимо, прежде чем пытаться разработать приложение React.
реагировать
В этом учебном курсе основное внимание уделяется настройке приложений React, а не их разработке, поэтому мы не будем слишком углубляться в конкретные темы React, такие как компоненты, реквизиты и состояние. Тем не менее, неплохо бы иметь базовые знания о том, что это такое, поэтому в следующем разделе мы рассмотрим основные функции React и рассмотрим, как все части сочетаются друг с другом, образуя работающее приложение.
Структура приложения React
Прежде чем мы углубимся в наш первый метод настройки, давайте кратко рассмотрим сам React.
В его основе лежат три фундаментальные особенности React, из которых состоит большинство приложений. Эти:
- компоненты
- реквизит
- государство
Это ключевые функции, которые вам необходимо освоить для написания эффективных приложений React. Достигнув этой стадии, вы будете очень хорошо подготовлены к более глубокому погружению в React и разработке более сложных приложений.
Вы можете быть приятно удивлены, обнаружив, что компоненты, реквизиты и состояние React не так уж и сложны. Мой личный опыт показал, что процесс установки React был более сложным, чем изучение самого React!
Компоненты
Строительные блоки любого приложения React являются компонентами. Думайте о них как о повторно используемых блоках кода, которые инкапсулируют разметку, поведение и стили. Они также могут быть вложены друг в друга, что делает их многоразовыми. Например, у вас может быть компонент <Book /> который представляет данные и пользовательский интерфейс, связанный с одной книгой. Тогда вы также можете иметь компонент <BookIndex /> который отображает несколько компонентов <Book /> и так далее.
Чтобы упростить конструирование компонентов, JSX был создан для придания компонентам HTML-подобной структуры. Если вы знакомы с HTML или XML, то вы будете дома, используя JSX для создания компонентов. Стоит отметить, что вы не обязаны использовать JSX вообще в React, но теперь это стало общепринятым стандартным способом определения компонентов.
Реквизит
Реквизит позволяет передавать информацию между компонентами. А в React информация может передаваться только через подпорки из родительских компонентов в дочерние компоненты.
Если вы решите использовать JSX в своих определениях компонентов (и я настоятельно рекомендую вам это сделать), то определение реквизитов для компонента очень похоже на добавление атрибутов HTML. Это одна из причин популярности JSX! Возможность использовать HTML-подобный синтаксис для компонентов и реквизитов React позволяет очень легко быстро создать приложение.
Давайте подробнее рассмотрим наш <BookIndex /> компонента <BookIndex /> React и посмотрим, как мы можем определить его с помощью нескольких вложенных дочерних компонентов <Book /> . В то же время мы передадим информацию каждому отдельному компоненту <Book /> из <BookIndex /> .
Во-первых, вот определение компонента <BookIndex /> :
|
01
02
03
04
05
06
07
08
09
10
11
12
|
class BookIndex extends React.Component {
render() {
return (
<div className=»books»>
<h2>List of all books</h2>
<Book title=»Through the Looking-Glass» author=»Lewis Carroll» published=»1871″ />
<Book title=»The Time Machine» author=»HG Wells» published=»1895″ />
<Book title=»A Tale of Two Cities» author=»Charles Dickens» published=»1859″ />
</div>
)
}
}
|
Затем внутри каждого компонента <Book /> мы можем получить доступ к переданным реквизитам следующим образом:
|
01
02
03
04
05
06
07
08
09
10
11
|
class Book extends React.Component {
render() {
return (
<div className=»book»>
<h2>{this.props.title}</h2>
<p>Author: {this.props.author}</p>
<p>Published: {this.props.published}</p>
</div>
)
}
}
|
Если приведенный выше синтаксис для создания компонентов React выглядит странно, не беспокойтесь — это довольно просто. Класс ES6 расширяет базовый класс компонента, а затем (обязательный) метод визуализации обрабатывает выходные данные компонента.
состояние
Состояние позволяет нам отслеживать все данные в приложении React. Мы должны иметь возможность обновлять интерфейс всякий раз, когда что-то меняется, и состояние обрабатывает это для нас. Всякий раз, когда состояние изменяется, React достаточно умен, чтобы знать, какие части вашего приложения требуют обновления. Это делает React очень быстрым, поскольку он обновляет только те части, которые были изменены.
Состояние обычно применяется к компоненту верхнего уровня в приложении React, так что он доступен каждому дочернему компоненту для использования данных состояния по мере необходимости.
Вот и все для нашего бурного тура по React. Он ни в коем случае не является всеобъемлющим, и есть еще много вещей, которые необходимо изучить, прежде чем вы сможете создавать полноценные сложные приложения, но понимание компонентов, реквизита и состояния даст вам твердое преимущество.
Вывод
В этом уроке мы заложили основу для обучения настройке среды React. Остальная часть этого урока посвящена конкретным методам, необходимым для этого. Мы рассмотрим методы настройки, начиная от очень простых до более сложных, требующих ручной настройки.
В следующем уроке мы начнем с рассмотрения использования CodePen, онлайн-редактора кода, для настройки приложения React всего за несколько щелчков мыши. Это самый простой и быстрый способ получить код в React!