Добро пожаловать в ваше путешествие по обучению React!

Вы знакомы с HTML, CSS и JavaScript? Затем вы можете создать простой и динамичный веб-сайт.

Но научили ли вы создавать современные веб-приложения?

В эту эпоху современные веб-сайты используют подход к проектированию одностраничных приложений (SPA), при котором взаимодействие пользователя немедленно отражается в пользовательском интерфейсе (UI) и не требует перезагрузки страницы.

С React создание такого типа приложений не составляет труда.

В этом руководстве по React вы изучите базовую концепцию React. Вы также узнаете, как создавать и развертывать приложение React в Интернете.

Но прежде чем продолжить, убедитесь, что у вас есть:

  • Базовое понимание HTML и CSS
  • Основы JavaScript (объект, массив, условные операторы и т. д.).
  • Знакомство с функциями JavaScript ES6 (синтаксис классов, стрелочные функции, деструктуризация объектов и т. д.).

Если вам все еще сложно с JavaScript, просто читайте и программируйте вместе со мной. Я постараюсь максимально подробно объяснить каждую задачу, когда мы кодируем наше приложение React.

Прежде чем мы углубимся, вот приложение React, которое мы создадим — Simple React App. И вы можете найти весь код в моем репозитории GitHub здесь.

Это руководство по React разделено на четыре части. А вот и первая часть серии.

Теперь приступим.

Что такое Реакт?

React (иногда называемый React.js или ReactJS) — это библиотека JavaScript для создания быстрого и интерактивного пользовательского интерфейса. Он был создан в Facebook в 2011 году и позволяет разработчикам создавать масштабные веб-приложения или сложные пользовательские интерфейсы из небольшого изолированного фрагмента кода.

В некоторых кругах React часто называют фреймворком из-за его поведения и возможностей.

Но технически это библиотека. В отличие от некоторых других фреймворков, таких как Angular или Vue, вам часто потребуется использовать больше библиотек с React для формирования любого решения.

Сделаем шаг назад.

Я упомянул, что это позволяет разработчикам создавать сложный пользовательский интерфейс из изолированного фрагмента кода. Чтобы лучше понять это утверждение, вам нужно начать думать в React Component.

Мышление в компоненте React

При создании приложения с помощью React вы создаете набор независимых, изолированных и многократно используемых компонентов. Думайте о компоненте как о простой функции, которую вы можете вызвать с некоторыми входными данными, и они отобразят некоторые выходные данные.

И как мы можем повторно использовать функции, так же мы можем повторно использовать компоненты, объединять их и тем самым создавать сложный пользовательский интерфейс.

Давайте посмотрим на изображение ниже. Простое приложение To-Dos.

В этом уроке мы создадим это приложение с нуля. На первый взгляд это может показаться простым, но поверьте мне, вы поймете концепцию React и то, как она работает, после того, как создадите это приложение.

Чтобы создать приложение такого типа или любое сложное приложение (даже такое сложное, как Twitter), самое первое, что нужно сделать, — это разделить и декомпозировать дизайн пользовательского интерфейса на меньшую и изолированную единицу, как показано на изображении. Где каждый из этих блоков может быть представлен как компонент, который затем может быть построен изолированно, а затем объединен в сложный пользовательский интерфейс.

Еще на изображении.

Родительский компонент (также известный как корневой компонент) с меткой TodoContainer содержит все остальные компоненты (известные как дочерние компоненты). Компонент Header отображает содержимое заголовка, компонент InputTodo принимает пользовательский ввод, компонент TodosList отображает список задач и, наконец, компонент TodoItem заботится о каждом из элементов задач.

С помощью этой разбивки мы будем создавать пять различных компонентов изолированно.

Наличие этого инстинкта указывает на то, что вы думаете в React!

Идем дальше.

Концепция виртуального DOM

Как разработчик JavaScript, вы наверняка взаимодействовали с реальным DOM при создании интерактивных веб-сайтов. Хотя, возможно, вам удалось избежать понимания того, как это работает.

Итак, давайте повторим, чтобы вы могли быстро понять концепцию виртуального DOM, которую нам предоставляет React.

DOM (объектная модель документа) — это интерфейс, который позволяет JavaScript или другим скриптам читать и манипулировать содержимым документа (в данном случае HTML-документа). Всякий раз, когда HTML-документ загружается в браузер как веб-страница, для этой страницы создается соответствующая объектная модель документа. Это просто объектное представление HTML.

Таким образом, JavaScript сможет подключаться и динамически манипулировать DOM, потому что он может читать и понимать его объектный формат. Это позволяет добавлять, изменять содержимое или выполнять действия на веб-страницах.

Но есть проблема! Хотя и не с DOM.

Каждый раз, когда DOM изменяется, браузер должен пересчитывать CSS, запускать макет и перерисовывать веб-страницу.

И с одностраничным приложением (SPA), где JavaScript обновляет DOM гораздо чаще, чем нужно. Все становится медленнее из-за процесса в рабочем процессе браузера после манипуляции с DOM.

Поэтому нам нужен способ минимизировать время, необходимое для перерисовки экрана.

Вот тут-то и появляется виртуальный DOM.

React использует виртуальный DOM, который использует стратегию, которая обновляет DOM без необходимости перерисовывать все элементы веб-страницы. Это гарантирует, что реальный DOM получит только необходимые данные для перерисовки пользовательского интерфейса.

Вот как это работает,

Всякий раз, когда в пользовательский интерфейс добавляются новые элементы, создается виртуальный DOM. Но если состояние любого из этих элементов изменится, React обновит виртуальный DOM, сохраняя при этом предыдущую версию, чтобы можно было сравнить и выяснить, какие виртуальные объекты DOM изменились. Реагируйте, а затем обновляйте ТОЛЬКО те объекты в реальном DOM, тем самым снижая затраты производительности на повторный рендеринг веб-страницы.

Не волнуйтесь, если все это покажется вам странным, позже вы увидите это на практике.

Настройка рабочей среды

Есть несколько способов взаимодействия и начала работы с React. Хотя React рекомендует выполнять настройку с помощью инструмента create-react-app CLI, я быстро покажу вам, как начать работу с React, просто написав код React в файле HTML.

Это быстро поможет вам начать работу и не требует установки.

Итак, давайте сделаем это.

Написание React прямо в HTML

Этот метод взаимодействия с React — самый простой и очень простой, если вы когда-либо работали с HTML, CSS и JavaScript.

Давайте посмотрим, как это делается.

Мы начнем с создания файла index.html. Внутри него мы загрузим три скрипта в элементе head, указывающих на соответствующие CDN — React, ReactDOM и Babel. Затем мы создадим пустой элемент div и присвоим ему уникальный id из root. Здесь будет жить наше приложение. Наконец, мы создадим элемент script, где мы напишем наш код React.

Итак, ваш файл index.html должен выглядеть так:

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>React Tutorial</title>
   <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
   <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
 </head>

 <body>
   <div id="root"></div>

   <script type="text/babel">     
     const element = <h1>Hello from React</h1>;     
     console.log(element);   
   </script> 
  </body>
</html>

Областью внимания в приведенном выше коде является элемент script. Атрибут type в открывающем теге является обязательным для использования Babel (объясню это чуть позже).

В сценарии у нас есть то, что выглядит как HTML.

const element = <h1>Hello from React</h1>;

И вам может быть интересно, почему мы пишем HTML внутри JavaScript.

Ну, эта строка не HTML, а JSX.

Что такое JSX?

Написание кода JavaScript/React для описания того, как будет выглядеть пользовательский интерфейс (UI), не так просто, как вы думаете.

Это заставляет автора React создавать то, что выглядит как JavaScript-версия HTML. Это называется JSX (JavaScript XML). Это XML-подобное расширение синтаксиса для JavaScript, которое упрощает и делает более интуитивно понятным описание пользовательского интерфейса.

Под капотом JSX транслируется в обычную версию JavaScript во время выполнения, поскольку браузер не может его прочитать.

Вот как это работает:

Код JSX передается Babel (компилятору JavaScript), который затем преобразует его в простой код JavaScript, понятный всем браузерам. Этот компилятор также изменяет любые функции JavaScript ES6 на то, что распознают старые браузеры. Например, он преобразует ключевое слово const в var.

Давайте посмотрим быструю демонстрацию.

Перейдите на сайт babel и добавьте код JSX в редакторе Babel.

У вас должно получиться что-то похожее на изображение выше.

Как видно на изображении, код JSX преобразуется в простой код React. Из этого мы можем сделать вывод, что использовать JSX для описания того, как выглядит пользовательский интерфейс, намного проще.

Кроме того, помните, что мы загрузили библиотеку React в заголовок нашего HTML-кода, даже если мы не используем ее явно. Но внутри React использует объект React из библиотеки, как вы можете видеть в правой части редактора Babel.

Обратите внимание на следующее о JSX

  • Вы можете использовать допустимое выражение JavaScript внутри JSX через фигурные скобки, {}.
  • В JSX атрибуты элементов, обработчики событий всегда в camelCase. Несколько исключений составляют атрибуты aria-* и data-*, которые написаны в нижнем регистре.

Вернемся к нашему коду.

Сохраните файл index.html и откройте его в веб-браузере.

Убедитесь, что вы подключены к Интернету, так как мы включили библиотеки через CDN.

На данный момент в окне просмотра браузера ничего не отображается. Но если вы откроете DevTools и проверите вкладку Console (поскольку мы console.log элемент в нашем коде), вы увидите объект, представляющий JSX.

Этот вывод представляет собой элемент React, который также является частью виртуального DOM.

В React этот элемент может иметь состояние. И каждый раз, когда состояние изменяется, создается новый элемент React. React сравнивает эти элементы и выясняет, что изменилось. Затем он обращается к реальному DOM и обновляет только измененный объект.

Давайте визуализируем элемент React внутри настоящего DOM.

Обновите элемент script, чтобы он выглядел так:

<script type="text/babel">
 const element = <h1>Hello from React</h1>;
 ReactDOM.render(element, document.getElementById("root"));
</script>

В скрипте мы вызвали метод render(), который React предоставляет через объект ReactDOM.

Помните, что мы включили библиотеку ReactDOM в head HTML-файла. В противном случае метод render() не сработает.

Первый аргумент метода render() определяет, что вы хотите визуализировать, а второй определяет, где вы хотите это визуализировать. Как видно из кода, мы использовали простой ванильный JavaScript для ссылки на контейнер div (через идентификатор root) в нашем файле .html.

Сохраните файл HTML и перезагрузите веб-страницу.

Если вы успешно отобразили свой контент на экране, значит, вы только что создали приложение React.

Поздравляем.

Использование интерфейса командной строки Create-React-App

Вместо того, чтобы вручную загружать сценарии в элемент head вашего файла, вы настроите среду React, установив инструмент create-react-app CLI.

Этот инструмент CLI установит React, а также другие сторонние библиотеки, которые вам понадобятся.

Чтобы установить и использовать этот интерфейс командной строки, на вашем компьютере должен быть установлен Nodejs, чтобы иметь доступ к его инструменту npm (менеджер пакетов узла).

Вы можете проверить, установлены ли у вас Nodejs и npm, выполнив эти команды node -v и npm -v соответственно в своем терминале. Убедитесь, что версия Node — 8.10 или выше, а версия npm — 5.2 или выше.

Но если он у вас не установлен, зайдите на Node.js, скачайте и установите последнюю стабильную версию.

После его установки выполните следующую команду в своем терминале, чтобы создать приложение React с именем simple-todo-app.

C:\Users\Your Name> npx create-react-app simple-todo-app

Это создаст папку с именем simple-todo-app в выбранном вами каталоге.

Теперь откройте папку с вашим любимым редактором кода. Я буду использовать код Visual Studio.

Ваша исходная файловая структура должна выглядеть так:

Давайте быстро заглянем внутрь папки проекта.

Папка node_modules содержит все сторонние библиотеки, а также сам React. Он также будет содержать пакеты, которые вы будете устанавливать через npm позже. Папка public содержит общедоступный ресурс вашего приложения, и именно здесь находятся ваши статические файлы. index.html в общей папке похож на тот, который мы создали ранее. Он также имеет элемент контейнера div, в котором будет отображаться все ваше приложение.

В папке src находятся рабочие файлы. Один из них — index.js, который будет служить точкой входа в наше приложение. Не беспокойтесь обо всех src файлах, мы напишем все с нуля.

Наконец, package.json содержит информацию о вашем приложении. У него есть некоторые зависимости от библиотек, которые в настоящее время установлены, и если вы установите другие пакеты, они также будут перечислены.

Достаточно сказано.

Запустим сервер разработки.

Перейдите к своему терминалу и выполните эту команду:

C:\Users\Your Name\simple-todo-app > npm start

Перед запуском команды убедитесь, что вы находитесь в каталоге проекта. Кроме того, если вы используете VsCode, вы можете переключить терминал, нажав Ctrl + ` или Cmd + `, или перейти к View-> Terminal.

Команда npm start запускает сервер разработки на port 3000, и автоматически появляется новое окно браузера, отображающее ваше приложение.

Если ничего не происходит, напишите этот URL, localhost:3000 в адресной строке браузера и нажмите ввод.

У вас должно получиться что-то похожее на изображение ниже.

Как видно на изображении, вы можете редактировать то, что отображается на баннере, изменив файл App.js, расположенный в папке src.

Например, вы можете изменить текст «Learn React» на что-то другое.

После сохранения файла браузер автоматически перезагружается, чтобы изменения вступили в силу. Это происходит потому, что create-react-app CLI поставляется в комплекте с горячей перезагрузкой.

Хорошо.

Написание приложения To-dos

На данный момент мы готовы приступить к созданию нашего приложения React. Вы узнаете, как создавать отдельные компоненты, описывающие, как выглядят разные разделы пользовательского интерфейса. Эти файлы компонентов находятся в папке src.

Поскольку это руководство по React ориентировано на новичков, мы напишем все файлы src с нуля.

Итак, начнем с удаления всех файлов в папке src.

Интерфейс ломается сразу же, как вы это делаете. Это связано с тем, что React нуждается в файле index.js в папке src. Этот файл является точкой входа.

Давайте создадим файл.

В папке src создайте файл index.js и добавьте следующий код:

import React from "react";
import ReactDOM from "react-dom";

const element = <h1>Hello from Create React App</h1>;

ReactDOM.render(element, document.getElementById("root"));

После сохранения файла вы увидите текст заголовка, отображаемый во внешнем интерфейсе.

Сравнивая этот код с тем, который мы пишем непосредственно в файле HTML в начале. Вы увидите, что мы не сделали ничего особенного, за исключением того, что мы импортировали React и ReactDOM вместо загрузки соответствующих CDN.

Примечание. Оператор import — это функция ES6, которая позволяет нам вводить объекты ( React и ReactDOM) из соответствующих модулей ( react и react-dom). Модуль — это просто файл, который обычно содержит класс или библиотеку функций. И create-react-app установил для нас оба файла.

Заметьте также, что мы не загружаем Babel для компиляции JSX в JavaScript, так как он create-react-app установлен и использует его «внутри».

На данный момент мы визуализируем элемент JSX прямо в реальном DOM через файл ReactDOM.render. Это неосуществимо.

Представьте себе, что у вас есть приложение с сотнями элементов, вы согласитесь со мной, что его будет сложно поддерживать.

Поэтому вместо рендеринга простого элемента мы будем рендерить компонент React.

Создание файлов компонентов

Помните, в начале мы разложили наше приложение на дерево изолированных компонентов. Где родительский компонент TodoContainer содержит три дочерних компонента ( Header, InputTodo и TodosList). Затем TodosList содержит другой компонент с именем TodoItem.

Это означает, что всего мы создадим пять компонентов.

Опять же, см. изображение ниже:

Давайте создадим эти файлы.

Начните с создания папки с именем components внутри каталога src и создайте файлы этих компонентов, то есть TodoContainer.js, Header.js, InputTodo.js, TodosList.js и TodoItem.js.

Затем добавьте следующий код в файл родительского компонента TodoContainer.js и сохраните его:

import React from "react";
class TodoContainer extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello from Create React App</h1>
        <p>I am in a React Component!</p>
      </div>
    );
  }
}
export default TodoContainer;

Кроме того, зайдите в файл index.js и обновите его, чтобы он выглядел так:

import React from "react";
import ReactDOM from "react-dom";
//component file
import TodoContainer from "./components/TodoContainer";
ReactDOM.render(<TodoContainer />, document.getElementById("root"));

Сохраните файл и проверьте интерфейс.

У вас должен быть заголовок и текст абзаца, которые отображаются на экране.

Что мы сделали?

Во-первых, чтобы создать компонент в React, вы либо пишете его как класс, либо как функционально-ориентированный.

компонент класса создается с использованием синтаксиса класса ES6, а функциональный компонент создается путем написания функции.

В родительском файле нашего приложения мы определили класс компонента React с именем TodoContainer и расширили класс Component в библиотеке React. Внутри этого класса у нас есть метод render(), в котором мы возвращаем JSX, отображаемый на экране.

Убедитесь, что вы импортируете объект React для работы JSX.

Обратите внимание. Вы не можете вернуть более одного элемента JSX рядом друг с другом, за исключением того, что вы заключаете их в один элемент. В нашем случае мы обернули их внутри файла <div>. Но если вам не нужна избыточная оболочка вокруг вашего элемента, вы можете обернуть все в фрагмент React (виртуальный элемент, который не отображается в DOM).

Например, используйте <React.fragment> (или используйте ярлык <></>) вместо <div>.

<React.Fragment>
 <h1>Hello from Create React App</h1>
 <p>I am in a React Component!</p>
</React.Fragment>

Компонент TodoContainer, который является родительским, не был подключен к приложению, пока мы не импортировали и не отобразили его в файле index.js.

В файле мы визуализировали компонент с помощью пользовательского тега, похожего на HTML, <TodoContainer />.

Теперь вместо рендеринга простого элемента JSX мы рендерим компонент React.

Несколько заметок:

  • Рекомендуется использовать UpperCamelCase для имени файла компонента (например, TodoContainer.js).
  • Имена компонентов в React должны быть написаны с заглавной буквы. В нашем случае TodoContainer.

Это необходимо для того, чтобы его экземпляр (например, <TodoContainer />) в JSX не рассматривался как тег HTML.

Также обратите внимание на путь к файлу компонента, используемый в файле index.js. Убедитесь, что вы всегда указываете относительный путь к этому файлу из текущего каталога. В нашем случае "./components/TodoContainer". Это означает, что файл TodoContainer находится в папке components внутри текущего каталога.

Расширение файла по умолчанию равно .js, поэтому добавлять его не нужно.

Работа с данными

При создании приложения React вы не можете обойтись без компонентов, принимающих и/или передающих данные. Это может быть дочерний компонент, получающий данные от своего родителя, или, может быть, пользователь напрямую вводит данные в компонент. Понимание того, как работать с данными, очень важно для создания компонента React.

Это подводит нас к концепции state и props.

Начнем с реквизита

props (что означает свойства) можно рассматривать как атрибуты в элементе HTML.

Например, атрибуты — type, checked — в теге input ниже являются реквизитом.

<input type="checkbox" checked={true} />

Это основной способ отправки данных и/или обработчиков событий вниз по дереву компонентов. то есть от родителя к его дочернему компоненту.

Когда это происходит, данные, полученные в дочернем компоненте, становятся доступными только для чтения и не могут быть изменены дочерним компонентом. Это связано с тем, что данные принадлежат родительскому компоненту и могут быть изменены только тем же родительским компонентом.

Штат

Если свойства позволяют дочернему компоненту получать данные от своего родителя, что произойдет, если пользователь введет данные непосредственно в компонент?

Для этого у нас есть государство.

Подумайте о состоянии как о данных, которые вы можете сохранить для определенного компонента. Эти данные являются собственностью и могут быть обновлены только компонентом, который их содержит. Сделать состояние локальным для этого компонента.

Поэтому в любое время, когда вы хотите, чтобы некоторые данные обновлялись всякий раз, когда пользователь выполняет какое-либо действие, такое как обновление поля ввода, переключение кнопки меню и т. д., вы будете использовать состояние.

Добавление состояния

Как показано на диаграмме приложения, компонент AddTodo будет нести ответственность за принятие пользовательского ввода.

Это означает, что нам понадобится место для хранения данных, полученных через ввод. Оттуда мы можем отображать данные во внешнем интерфейсе.

Тем не менее, вы можете решить, чтобы некоторые элементы задач по умолчанию отображались во внешнем интерфейсе. Или, если хотите, вы можете отобразить пустой список задач.

В любом случае вам нужно будет определить состояние в вашем файле.

Для каждого компонента, который будет обращаться к данным состояния, вам нужно будет объявить состояние в файле их ближайшего общего родителя.

Например, на нашей диаграмме приложения поле ввода в компоненте InputTodo будет добавлять данные в состояние. Кроме того, кнопка «Удалить» в компоненте TodoItem будет получать доступ к данным состояния и удалять элемент списка задач.

По этой причине данные состояния будут жить в компоненте TodoContainer, который является их ближайшим общим родителем.

Надеюсь понятно?

Чтобы добавить состояние, мы просто создаем объект состояния с другой парой ключ-значение. Для данных todos у нас будет массив объектов.

В файле TodoContainer.js добавьте следующий код прямо над методом render():

state = {
 todos: [
   {
     id: 1,
     title: "Setup development environment",
     completed: true
   },
   {
     id: 2,
     title: "Develop website and add content",
     completed: false
   },
   {
     id: 3,
     title: "Deploy to live server",
     completed: false
   }
 ]
};

В файле обновите метод render(), чтобы он выглядел так:

render() {
 return (
   <div>
     {this.state.todos.map(todo => (       
      <li>{todo.title}</li>    
     ))}   
   </div>
 );
}

Сохраните файл и проверьте интерфейс.

Итак, что же нам делать?

После того, как мы определили данные состояния, мы получили к ним доступ в методе render(), используя this.state.todos. Поскольку его значение представляет собой массив объектов, объявленных в состоянии, мы прошлись по этому массиву и вывели каждый элемент todos, то есть title.

В React мы используем метод map(), который является функцией более высокого порядка для выполнения этой итерации.

Помните, что вы можете использовать допустимое выражение JavaScript внутри JSX с помощью фигурных скобок, {}.

На данный момент вы увидите предупреждения React, если проверите консоль своих инструментов разработки. Мы позаботимся об этом через мгновение.

А пока я хочу, чтобы вы сравнили результат внешнего интерфейса и диаграмму приложения. Вы поймете, что другой компонент под названием TodosList отвечает за обработку списка задач.

Здесь мы применим знание props, объясненное ранее.

Мы хотим передать данные state из компонента TodoContainer в компонент TodosList. Напомним, что мы можем передавать данные вниз по дереву через props. И я упомянул, что реквизит такой же, как атрибут HTML.

Применим это.

Сначала зайдите в файл TodosList.js и создайте компонент с именем TodosList. На этом этапе вы можете визуализировать что угодно. Мы обновим его в ближайшее время.

После этого откройте файл TodoContainer.js и измените метод render(), чтобы он выглядел так:

render() {
  return (
    <div>
      <TodosList todos={this.state.todos} />    
    </div>
  );
}

Поскольку мы используем экземпляр компонента <TodosList /> в другом файле, вам необходимо импортировать компонент. Итак, добавьте это в начало файла TodoContainer.js.

import TodosList from "./TodosList";

На данный момент у вас есть данные state в пропсах todos. Благодаря этой строке:

<TodosList todos={this.state.todos} />

Теперь мы можем получить доступ к этим данным через props в компоненте TodosList.

Итак, давайте обновим файл TodosList.js, чтобы он выглядел так:

import React from "react";

class TodosList extends React.Component {
  render() {
    return (
      <div>
        {this.props.todos.map(todo => (
          <li>{todo.title}</li>
        ))}
      </div>
    );
  }
}

export default TodosList;

Сохраните файл. Вы должны отобразить заголовок todos на экране, как и раньше.

Обратите внимание, как мы получили доступ к данным состояния из дочернего компонента TodosList, используя this.props.todos. Это называется пропорочное бурение.

С помощью свойств мы можем получить доступ к данным состояния на разных уровнях иерархии компонентов.

Подводя итог,

Данные todos, поступающие из состояния компонента TodoContainer, передаются в качестве реквизита с использованием todos={this.state.todos}. Затем мы получили к нему доступ через this.props.todos из компонента TodosList.

Давайте исправим консольные предупреждения.

Всякий раз, когда вы сопоставляете что-либо, создается список. React хочет, чтобы каждый дочерний элемент в списке имел уникальную ключевую опору. Это помогает React определить, какие элементы были изменены, добавлены или удалены.

Чтобы добавить эту уникальную ключевую опору, мы воспользуемся преимуществом id, которое мы предоставили в состоянии TodoContainer. Мы можем получить доступ к этим id так же, как мы получили доступ к title.

Итак, продолжайте и обновите элемент <li> в компоненте TodosList, чтобы у вас было:

<li key={todo.id}>{todo.title}</li>

Сохраните файл и ошибка исчезнет.

Опять же, если вы вернетесь к диаграмме приложения, вы поймете, что другой компонент под названием TodoItem отвечает за обработку каждого из элементов todos.

Что-то подобное мы делали раньше.

Откройте файл TodoItem.js и создайте компонент с именем TodoItem. А пока можно рендерить что угодно.

Затем импортируйте компонент в файл TodosList.js, используя эту строку:

import TodoItem from "./TodoItem";

После этого замените элемент <li> в методе map() этой строкой:

<TodoItem key={todo.id} todo={todo} />

Примечание. Поскольку мы сопоставляем задачи, не забудьте добавить реквизиты key.

На данный момент все данные о состоянии присутствуют в реквизитах todo. Теперь вы можете получить доступ к этим данным через реквизиты в компоненте TodoItem.

Итак, давайте обновим файл TodoItem.js, чтобы он выглядел так:

import React from "react";

class TodoItem extends React.Component {
  render() {
    return (
      <li>
        {this.props.todo.title}
      </li>
    );
  }
}

export default TodoItem;

Сохраните все ваши файлы. Интерфейс должен отображаться, как и ожидалось.

В компоненте TodoItem обратите внимание на то, как мы получили доступ к title с помощью this.props.todo.title.

Прежде чем мы продолжим, давайте кратко поговорим об Инструментах разработчика React.

Инструменты разработчика React

Если вы хотите проверить и отладить свое приложение, проверить дерево компонентов или посмотреть, как работает React в режиме реального времени, вам понадобится этот инструмент.

Этот инструмент доступен в виде расширения браузера для Chrome и Firefox.

Давайте продолжим и установим его.

Перейдите на страницу расширения для выбранного вами браузера (Chrome здесь и Firefox здесь) и установите его.

Как только вы установите его, все готово. Никакой другой настройки он не требует.

Чтобы просмотреть его, откройте инструменты разработчика браузера, щелкнув правой кнопкой мыши в любом месте области просмотра веб-страницы и выбрав Проверить или Проверить элемент в зависимости от вашего браузера.

Затем в окне проверки браузера выберите вкладку Компоненты, чтобы просмотреть представление иерархии приложений.

Обратите внимание, что вы не сможете увидеть вкладку Компоненты, если ваша веб-страница в данный момент не использует React.

Вы можете перемещаться по различным компонентам в дереве и просматривать данные о состоянии и свойствах. Просто поиграйте с этим.

Создание функционального компонента

До этого момента мы использовали компонент на основе классов. Этот тип требуется, если компонент будет содержать данные о состоянии и/или метод жизненного цикла (подробнее об этом позже). Вот почему компонент класса также называется компонентом с отслеживанием состояния.

С другой стороны, функциональный компонент, также называемый компонентом без сохранения состояния, не требует метода жизненного цикла и не может поддерживать данные о состоянии, если только он не использует что-то, называемое перехватчиками React. Этот тип является самой простой формой компонента React, потому что он в первую очередь связан с тем, как все выглядит.

Если вы посмотрите на созданные нами компоненты, то увидите, что только один из них содержит данные о состоянии. И это родительский компонент, TodoContainer.

Это означает, что этот компонент может быть основан только на классе. Другие компоненты, которые в настоящее время являются компонентами класса, также могут быть функциональными. Это потому, что они не содержат данных о состоянии.

Для ясности давайте преобразуем один из компонентов класса, TodoItem, в функциональный компонент.

Преобразование компонента на основе классов в функциональный компонент

В файле TodoItem.js замените код следующим:

import React from "react";

function TodoItem(props) {
  return (
    <li>{props.todo.title}</li>
  );
}

export default TodoItem;

Если вы сохраните файл и проверите свое приложение, у вас по-прежнему будут отображаться элементы todos.

Так что же меняется?

Здесь мы создали функцию с тем же именем компонента вместо класса ES6, который расширяет React.Component. Этот функциональный компонент не требует метода render(), который является частью метода жизненного цикла (приближается к этому).

Также обратите внимание, что this.props в компоненте класса заменено на props. И чтобы использовать это props, мы включили его в качестве аргумента функции.

Когда вы начинаете работать с React, вы можете не всегда знать, какой компонент использовать — функциональный или классовый. Много раз через некоторое время вы поймете, что выбрали не тот тип. Но по мере того, как вы будете создавать больше компонентов, сделать этот выбор станет проще.

До тех пор один полезный совет заключается в том, что компонент класса, который имеет только разметку в методе render(), можно безопасно преобразовать в функциональный компонент.

В этом уроке мы будем использовать тип функционального компонента просто для презентации. Как и в случае с компонентом Header, где мы сосредоточимся на рендеринге простого текста заголовка. Итак, верните компонент TodoItem в компонент класса.

Давайте создадим компонент Header.

Это довольно прямолинейно. Итак, добавьте следующий код в файл Header.js:

import React from "react";

const Header = () => {
  return (
    <header>
      <h1>Simple Todo App</h1>
      <p>Please add to-dos item(s) through the input field</p>
    </header>
  );
};

export default Header;

Сохраните файл.

Затем войдите внутрь компонента TodoContainer и импортируйте файл вверху следующим образом:

import Header from "./Header";

Затем вызовите его экземпляр <Header /> в методе render(), чтобы у вас было:

render() {
  return (
    <div>
      <Header />      
      <TodosList todos={this.state.todos} />
    </div>
  );
}

Сохраните файл. У вас должен быть текст заголовка, отображаемый во внешнем интерфейсе.

Обратите внимание, как мы использовали функцию стрелки ES6:

const Header = () => {

Строка выше аналогична этой:

function Header() {

Так что идите с тем, который вам наиболее удобен.

Вывод

Я взволнован, что ты здесь! Мы запустили игру.

На данный момент мы коснулись некоторых основ React и начали писать наше простое приложение todos.

В следующей части мы углубимся и объясним, как вы можете обрабатывать форму в React, создавать и обрабатывать события и многое другое.

Прежде чем взять кофе и перейти к следующей части, обязательно похлопайте этой статье и нажмите кнопку Подписаться.

Наконец, если что-то было неясно, постарайтесь сообщить нам об этом.

Часть II — Обработка форм, создание событий и метод setState

Первоначально опубликовано на https://ibaslogic.com.