Часть первая из четырех частей семинара по изучению и использованию react.js
Что на этом семинаре?
Мы посмотрим, что такое React, а что нет. Затем мы рассмотрим процесс создания полностью интерактивного интерфейса на основе данных response.js.
Мы начнем с простого создания и запуска приложения для реагирования, постепенно добавляя сложности в каждую часть:
Часть 1. Основы React (эта статья)
- Что такое реагировать?
- Что это не
- Настройка вашей среды разработки
- Настройка вашего первого приложения React
Часть 2. Создание простого пользовательского интерфейса с фиктивными данными
- Компоненты и иерархия компонентов
- Создание ваших первых компонентов
- Реквизиты и передача данных компонентам
- Создание фиктивных данных
Часть 3. Подключение вашего приложения к источнику данных
- Использование HTTP-клиента для связи с API
- Состояние приложения
- Перехватчики жизненного цикла React
Часть 4. Интеграция конечного автомата и контроллеров
- Возрастающая сложность и разделение проблем
- Представляем Redux
- Знакомство с Redux-logic
- Рефакторинг вашего приложения
Что такое React?
React.js - это, конечно же, библиотека внешнего вида от наших благотворителей из Facebook. Если вы занимаетесь разработкой программного обеспечения и в 2018 году не жили под скалой, то вы, вероятно, слышали об этом. Созданный для того, чтобы реагировать на изменения в источниках данных и оперативно обновлять пользовательский интерфейс, React продолжает завоевывать популярность и признание в сообществе разработчиков с момента его выпуска в 2015 году, и похоже, он останется таким до конца. 2018 ».
React также известен своей простотой, легкостью для понимания и меньшей сложностью, чем альтернативные фреймворки, такие как Angular. Нельзя сказать, что это лучше, просто нужно выучить меньше понятий и синтаксиса, прежде чем вы станете продуктивным.
В тени
По сути, самым большим нововведением React является сохранение копии или тени HTML DOM (объектной модели документа) в памяти, изменяя только те части, которые нуждаются в к, в ответ на изменения данных, лежащих в основе модели. После внесения изменений в теневой DOM React визуализирует или снова рисует страницу, используя новую версию в качестве шаблона.
Компоненты, компонент, компоненты
То, как React обновляет небольшие части DOM без переписывания всего дерева, также является его основной архитектурной парадигмой.
React ожидает, что вы напишете свое приложение в виде дерева вложенных «компонентов». Эти компоненты написаны с использованием типа «расширенного синтаксиса Javascript», называемого JSX, что означает JavaScript XML. (Их можно написать на чистом Javascript, но это не то, чему будет следовать это руководство.)
Вот пример компонента React, написанного с использованием синтаксиса класса ES6 (компоненты можно писать проще, чисто функционально, но этот пример иллюстрирует конкретный метод render) :
<div id="myReactApp"></div>
<script>
class Greeter extends React.Component {
render() {
return <h1>{this.props.greeting}</h1>
}
}
ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));
</script>
// source: https://en.wikipedia.org/wiki/React_(JavaScript_library)#Basic_usage
Не волнуйтесь, если вы не сразу ознакомились со всем, что вы здесь видите. Давайте рассмотрим это строка за строкой:
<div id="myReactApp"></div>
Это элемент HTML, который будет действовать как «корень» нашего приложения. Если вы помните раньше:
React ожидает, что вы напишете свое приложение в виде дерева вложенных «компонентов».
Что ж, в любой древовидной иерархии нам понадобится что-то, что действует как корневой узел или якорь для привязки остальной части дерева. Любые HTML-элементы, отображаемые нашим приложением, будут содержаться в этом теге div.
class Greeter extends React.Component {
...
}
Мы используем этот синтаксис ES6 для определения нашего нового компонента Greeter, и он является расширением базового компонента React. (Причина, по которой мы могли бы использовать этот синтаксис вместо собственного метода объявления компонентов React, на данном этапе руководства носит чисто эстетический характер: но есть фундаментальная разница.)
Мы рассмотрим полное значение этого объявления в следующих частях руководства, но по сути это означает: «Дайте мне именованный контейнер для всего, что я хочу делать с моим компонентом». В будущем вы можете добавить функциональность, например, для подключения к источнику данных или даже для реагирования на изменения в состоянии вашего приложения (теперь geddit ?!). На данный момент все, что мы хотим увидеть, - это вывод части нашего пользовательского интерфейса:
render() {
return <h1>{this.props.greeting}</h1>
}
Пока что так ванильный Javascript. Каждый компонент React должен возвращать что-то для React для рендеринга или вывода в DOM (Ред: нормально возвращать null.) И это то, что делает наш метод рендеринга. : возвращает тег h1.
Но что это? Между фигурными скобками? Тег h1 содержит то, что выглядит не в формате HTML. Это часть синтаксиса JSX! В этом случае фигурные скобки сообщают React, что нужно проанализировать Javascript внутри скобок и отобразить их как содержимое внутри тега:
{this.props.greeting}
Мы посмотрим, что именно означает «this» и что такое «props» в следующих частях, но теперь вы должны «props - это сокращение от 'properties'. Вы можете рассматривать свойства как фрагменты данных, которые передаются от родительского компонента.
Однако JSX может делать больше, чем просто отображать переданные данные. По мере того, как мы пройдем курс, вы увидите, как мы можем выразить себя, чтобы достичь вложенности компонентов, передавать данные и функции и поддерживать работу черепах до самого конца.
ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));
Наконец, строка, которая объединяет все это, и вы можете увидеть больше JSX! ReactDOM - это объект библиотеки Javascript, который вы импортируете и используете для привязки приложения React к реальной модели DOM. Здесь мы говорим ReactDOM «отобразить» наш новый компонент и прикрепить его к корневому элементу, который мы можем найти с помощью стандартного метода Javascript DOM «document.getElementById».
Обратите внимание, что на компонент ссылаются как на тег HTML, но тег HTML не имеет закрывающего тега, помечен заглавной буквой и ему передается атрибут, которого нет в спецификации HTML ни для одного элемента. Это способ JSX ссылаться на ваш новый компонент как на что-то, что нужно отобразить, и передавать 'properties' или 'props' , которые мы видели ранее для ваш компонент. По мере синтаксического анализа JSX будет преобразован в компоненты, которые преобразуются в функции, которые возвращают свое визуализированное содержимое (которое, в свою очередь, может быть большим количеством компонентов React). Это суть составления вашего приложения из компонентов. Мы подробно поговорим о компонентах и свойствах во второй части.
Что такое React НЕТ?
React - это не фреймворк. Мы здесь не для того, чтобы обсуждать различия между фреймворками и библиотеками, и это выходит за рамки данного семинара. Проще говоря, это касается только пользовательского интерфейса, а не управления потоком данных от приложения к серверу или наоборот, или даже того, как данные, которые управляют приложением, обосновываются и хранятся. Для полноты картины и для тех, кто знаком с программной архитектурой MVC, вот очень хороший учебник.
Настройка вашей среды разработки
Вам не нужно много делать, чтобы настроить среду для разработки с помощью React, но есть несколько предварительных условий и некоторые вещи, которые вы можете сделать, чтобы облегчить себе жизнь:
Текстовый редактор
Купите себе хороший редактор с подсветкой синтаксиса JSX и, если у вас есть время, используйте функции линтинга ES6 или Babel. Я рекомендую Atom, SublimeText или Visual Studio Code.
Среда выполнения Node.js Javascript
Вам не обязательно Node для запуска приложений React, но node предоставляет вам локальную среду выполнения, на которой вы можете запустить веб-сервер разработки, чтобы локально протестировать код и обеспечить горячую перезагрузку при изменении кода.
Диспетчер пакетов Javascript
Обычно инструменты разработки и даже сценарии сборки для вашего приложения React зависят от библиотек и пакетов javascript, доступных в npm или yarn, двух менеджерах пакетов Javascript.
Я не собираюсь рассказывать вам, как настроить эти инструменты, но если вы используете Mac, я рекомендую установить HomeBrew, диспетчер пакетов с открытым исходным кодом и командной строкой, который позволяет вам установить и обновить основные инструменты, такие как node.js, npm,, такие как контроль версий GIT, базы данных, такие как mongoDB или postgreSQL, и даже среды выполнения для новых языков программирования, таких как Ruby или Python.
Настройка вашего первого приложения React
Начать работу с вашим первым приложением React невероятно просто. Команда Facebook осознала, что инструменты, необходимые для настройки, создания и запуска среды разработки для приложений React, довольно сложны, поэтому они услужливо создали нечто под названием create-response-app » : набор скриптов, доступных на npm, которые обновляются до последней версии React и позволяют вам сгенерировать голый скелет работающего приложения React с помощью одной утилиты командной строки.
Чтобы начать работу и запустить локальный React за считанные минуты с установленными node.js и npm, запустите из командной строки:
npm install -g create-react-app create-react-app [myappname] // cd [myappname] npm install npm start
Скрипт сообщит вам, что теперь на localhost:3000 запущено приложение для реагирования. Перейдите туда в своем браузере, и вы увидите демонстрационное приложение, созданное для вас сценарием:
Если вы хотите узнать больше о create-react-app и его структуре проекта, вы можете посетить репозиторий Github.
Часть вторая этого руководства доступна ТЗ
